JavaScript内核与高级编程之：`JavaScript` 的 `WebRTC`：其在 `P2P` 实时通信中的工作原理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女们，今天咱们来聊聊一个听起来高大上，用起来贼方便的技术——WebRTC，也就是网页实时通信技术。想必大家或多或少都用过视频会议、在线聊天之类的应用，它们背后可能就有WebRTC的身影。今天咱们就一起扒一扒它的裤子，看看它在P2P实时通信中到底是怎么运作的。

一、什么是WebRTC？它为啥这么牛？

WebRTC，全称Web Real-Time Communication，是W3C搞出来的一套开放源代码标准。简单来说，它让浏览器拥有了实时音视频通信的能力，而且无需安装任何插件。是不是很酷？

不用插件： 告别Flash、Java Applet这些老古董，拥抱原生浏览器能力。
实时性强： 延迟低，保证音视频通信的流畅性。
免费开源： 大家都可以用，都可以改，社区支持强大。
P2P能力： 理论上支持浏览器之间直接通信，减少服务器压力（当然，实际应用中往往需要服务器辅助）。

二、WebRTC的核心API和流程：

WebRTC的核心API主要有三个：

getUserMedia： 获取用户的音视频流。相当于你的麦克风和摄像头，是通信的原材料。
RTCPeerConnection： 建立点对点连接。这是WebRTC的核心，负责协商、连接、数据传输等。
RTCDataChannel： 建立数据通道。除了音视频，还能传输任意类型的数据，比如文件、文本消息等。

好，现在咱们来用通俗易懂的语言，加上一些代码示例，把这三个API串起来，讲讲WebRTC的通信流程。

1. 获取音视频流：getUserMedia

这玩意儿就像是跟浏览器申请使用你的摄像头和麦克风。

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
})
.then(function(stream) {
  // 获取到音视频流，stream 就是 MediaStream 对象
  console.log("成功获取音视频流！");

  // 将本地视频流显示在页面上 (比如一个 <video> 标签)
  const video = document.getElementById('localVideo');
  video.srcObject = stream;
  video.play(); // 自动播放
})
.catch(function(err) {
  console.error("获取音视频流失败：", err);
});

代码解释：

navigator.mediaDevices.getUserMedia()：这是获取音视频流的主要方法。
{ audio: true, video: true }：告诉浏览器我们要音频和视频。
.then()：成功获取流后的回调函数。stream 就是包含音视频数据的MediaStream对象。
video.srcObject = stream;：将流赋给<video>标签，这样就能在页面上看到自己的画面了。
.catch()：如果获取失败，会执行这里的回调函数，打印错误信息。

2. 建立P2P连接：RTCPeerConnection（重点来了！）

RTCPeerConnection是WebRTC的核心，负责建立、维护和关闭P2P连接。它做了很多事情，包括：

信令交换（Signaling）： 协商连接参数，比如编解码器、网络地址等。
NAT穿透（NAT Traversal）： 找到双方都能访问的网络地址。
数据传输： 真正发送音视频和数据。

信令交换（Signaling）

WebRTC本身不负责信令交换，需要开发者自己搭建信令服务器。信令服务器的作用是传递SDP（Session Description Protocol）和ICE（Interactive Connectivity Establishment）候选者。

SDP： 描述会话信息，比如支持的编解码器、媒体类型等。
ICE候选者： 包含设备的网络地址信息，用于NAT穿透。

信令交换的过程就像是两个人打电话前的“喂喂喂，听得到吗？”，互相确认对方的身份和能力。

假设我们使用WebSocket作为信令通道，下面是一个简单的信令交换流程：

// 客户端A
const pcA = new RTCPeerConnection();

// 1. 创建 Offer
pcA.createOffer()
  .then(offer => {
    pcA.setLocalDescription(offer);
    // 2. 通过信令服务器发送 Offer 给客户端B
    websocket.send(JSON.stringify({ type: 'offer', sdp: offer.sdp }));
  });

// 3. 收到客户端B的 Answer
websocket.onmessage = function(event) {
  const message = JSON.parse(event.data);
  if (message.type === 'answer') {
    pcA.setRemoteDescription({ type: 'answer', sdp: message.sdp });
  }
  // 收到 ICE 候选者
  else if (message.type === 'candidate') {
    pcA.addIceCandidate(message.candidate);
  }
};

// 监听 ICE 候选者，并发送给对方
pcA.onicecandidate = function(event) {
  if (event.candidate) {
    websocket.send(JSON.stringify({ type: 'candidate', candidate: event.candidate }));
  }
};

// 客户端B
const pcB = new RTCPeerConnection();

// 收到客户端A的 Offer
websocket.onmessage = function(event) {
  const message = JSON.parse(event.data);
  if (message.type === 'offer') {
    pcB.setRemoteDescription({ type: 'offer', sdp: message.sdp });
    // 创建 Answer
    pcB.createAnswer()
      .then(answer => {
        pcB.setLocalDescription(answer);
        // 通过信令服务器发送 Answer 给客户端A
        websocket.send(JSON.stringify({ type: 'answer', sdp: answer.sdp }));
      });
  }
  // 收到 ICE 候选者
  else if (message.type === 'candidate') {
    pcB.addIceCandidate(message.candidate);
  }
};

// 监听 ICE 候选者，并发送给对方
pcB.onicecandidate = function(event) {
  if (event.candidate) {
    websocket.send(JSON.stringify({ type: 'candidate', candidate: event.candidate }));
  }
};

代码解释：

RTCPeerConnection()：创建RTCPeerConnection对象。
createOffer()：创建SDP Offer。
setLocalDescription()：设置本地描述。
setRemoteDescription()：设置远端描述。
createAnswer()：创建SDP Answer。
onicecandidate：监听ICE候选者。
addIceCandidate()：添加ICE候选者。
websocket.send()：通过信令服务器发送消息。
websocket.onmessage()：监听信令服务器的消息。

NAT穿透（NAT Traversal）

NAT（Network Address Translation）是一种网络技术，用于将私有网络地址转换为公有网络地址。大多数用户都位于NAT之后，这使得P2P连接变得困难。

WebRTC使用ICE协议来进行NAT穿透。ICE协议会尝试多种方法来建立连接，包括：

STUN（Session Traversal Utilities for NAT）： 客户端向STUN服务器发送请求，STUN服务器会返回客户端的公网IP地址和端口号。
TURN（Traversal Using Relays around NAT）： 如果STUN无法穿透NAT，客户端会使用TURN服务器作为中继，将数据转发给对方。

数据传输

完成信令交换和NAT穿透后，RTCPeerConnection就可以进行数据传输了。

// 添加本地音视频流
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(stream => {
    pcA.addStream(stream); // 已经废弃，不推荐使用
    // 推荐使用 addTrack
    stream.getTracks().forEach(track => {
        pcA.addTrack(track, stream); // track是单个音视频轨道
    });
  });

// 监听远端音视频流
pcB.ontrack = function(event) {
    console.log("收到 track 事件:", event);
    const remoteStream = event.streams[0]; // 获取 MediaStream 对象
    const remoteVideo = document.getElementById('remoteVideo');
    remoteVideo.srcObject = remoteStream;
    remoteVideo.play();
};

代码解释：

addStream()：添加本地音视频流（已废弃，不推荐）。
addTrack()：添加本地音视频轨道（推荐）。
ontrack：监听远端音视频轨道。

3. 建立数据通道：RTCDataChannel

RTCDataChannel允许你通过WebRTC连接发送任意类型的数据，比如文本消息、文件等。

// 客户端A
const dataChannelA = pcA.createDataChannel('myChannel');

dataChannelA.onopen = function() {
  console.log("数据通道已打开！");
  dataChannelA.send("Hello from A!");
};

dataChannelA.onmessage = function(event) {
  console.log("收到消息：", event.data);
};

// 客户端B
pcB.ondatachannel = function(event) {
  const dataChannelB = event.channel;

  dataChannelB.onopen = function() {
    console.log("数据通道已打开！");
  };

  dataChannelB.onmessage = function(event) {
    console.log("收到消息：", event.data);
    dataChannelB.send("Hello from B!");
  };
};

代码解释：

createDataChannel()：创建数据通道。
ondatachannel：监听数据通道事件。
onopen：数据通道打开时的回调函数。
onmessage：收到消息时的回调函数。
send()：发送数据。

三、WebRTC在P2P实时通信中的工作原理：

说了这么多API，现在我们来总结一下WebRTC在P2P实时通信中的工作原理：

获取音视频流： 使用getUserMedia获取本地音视频流。
信令交换： 通过信令服务器交换SDP和ICE候选者。
NAT穿透： 使用ICE协议进行NAT穿透，找到双方都能访问的网络地址。
建立P2P连接： 使用RTCPeerConnection建立P2P连接。
数据传输： 通过RTCPeerConnection传输音视频流和数据。
数据通道： 使用RTCDataChannel建立数据通道，传输任意类型的数据。

可以总结成一个表格：

步骤	描述	使用API
1. 获取媒体	获取用户的音视频输入，为通信提供原始数据。	`navigator.mediaDevices.getUserMedia()`
2. 信令交换	双方通过信令服务器交换 SDP (Session Description Protocol) 和 ICE (Interactive Connectivity Establishment) 候选者。SDP 描述会话能力，ICE 候选者提供网络地址信息。	自定义信令服务器 (例如使用 WebSocket)
3. NAT穿透	使用 ICE 框架，尝试通过 STUN (Session Traversal Utilities for NAT) 和 TURN (Traversal Using Relays around NAT) 服务器来穿透 NAT 防火墙，找到双方可以直接通信的网络路径。 STUN 用于发现公网 IP 和端口，TURN 在无法直接连接时作为中继服务器。	`RTCPeerConnection` 对象会自动处理 ICE 协商，需要提供 STUN/TURN 服务器配置。
4. 建立连接	`RTCPeerConnection` 对象使用交换的 SDP 和 ICE 候选者，建立对等连接。这个过程包括协商最佳的编解码器、加密方式，以及建立实际的连接通道。	`RTCPeerConnection.setLocalDescription()`, `RTCPeerConnection.setRemoteDescription()`, `RTCPeerConnection.addIceCandidate()`
5. 数据传输	一旦连接建立，音视频流和数据就可以通过 `RTCPeerConnection` 对象进行传输。音视频流通过 RTP (Real-time Transport Protocol) 进行传输，而其他类型的数据可以使用 `RTCDataChannel`。	`RTCPeerConnection.addTrack()`, `RTCPeerConnection.ontrack`, `RTCDataChannel.send()`, `RTCDataChannel.onmessage()`
6. 数据通道	使用 `RTCDataChannel` API 创建数据通道，用于传输除了音视频之外的任意类型的数据，例如文本消息、文件等。数据通道提供可靠或不可靠的传输模式，以及加密和拥塞控制等功能。	`RTCPeerConnection.createDataChannel()`, `RTCPeerConnection.ondatachannel`

四、WebRTC的优缺点：

优点：

实时性好： 延迟低，适合实时音视频通信。
P2P能力： 理论上支持浏览器之间直接通信，减少服务器压力。
安全： 使用DTLS和SRTP进行加密，保证通信安全。
跨平台： 支持多种浏览器和操作系统。

缺点：

复杂： API比较复杂，需要一定的学习成本。
信令服务器： 需要自己搭建信令服务器。
NAT穿透： NAT穿透成功率受网络环境影响。
兼容性： 不同浏览器对WebRTC的支持程度可能存在差异。

五、总结：

WebRTC是一项强大的技术，它让浏览器拥有了实时音视频通信的能力。虽然API比较复杂，但只要掌握了核心概念和流程，就能轻松地构建各种实时应用。

希望今天的讲座能让大家对WebRTC有更深入的了解。下次有机会，咱们再聊聊WebRTC的进阶用法，比如如何优化音视频质量、如何处理网络问题等。

好了，今天的分享就到这里，各位拜拜！

发表回复 取消回复

发表回复取消回复