如何利用WebRTC在浏览器中实现点对点的实时通信？

答案：通过WebRTC实现浏览器间实时通信需三步：先用getUserMedia获取本地音视频流并预览；再创建RTCPeerConnection实例，添加流并配置STUN服务器；最后通过信令服务器交换SDP和ICE候选，完成连接后即可传输媒体流。

要在浏览器中通过WebRTC实现点对点的实时通信，核心在于建立两个浏览器之间的直接连接，无需经过服务器传输音视频流。整个过程依赖信令交换、网络协商和媒体流传输三个关键步骤。

1. 获取本地媒体流

首先需要获取用户的摄像头和麦克风权限，生成本地媒体流。

示例代码：

const localStream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
});
document.getElementById('localVideo').srcObject = localStream;

获取到的媒体流可以绑定到页面的 video 元素进行预览。

2. 创建RTCPeerConnection并添加流

RTCPeerConnection 是 WebRTC 的核心类，负责处理点对点连接。

创建实例后，需将本地媒体流添加进去：

const peerConnection = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});

localStream.getTracks().forEach(track => {
  peerConnection.addTrack(track, localStream);
});

STUN 服务器帮助获取公网 IP 和端口（NAT 穿透），若在复杂网络环境下可考虑加入 TURN 服务器作为中继备份。

3. 信令机制交换会话描述

WebRTC 不提供内置信令传输方式，需自行实现客户端之间的消息传递（如使用 WebSocket）。

通信流程如下：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

• 发起方调用 createOffer() 生成本地 offer 描述
• 设置本地描述：setLocalDescription(offer)
• 将 offer 发送给对方（通过 WebSocket 或其他通道）
• 接收方收到 offer 后，调用 setRemoteDescription() 设置远端描述
• 接收方生成 answer：createAnswer() 并设置为本地描述
• 将 answer 发回给发起方

这样双方就完成了 SDP（会话描述协议）的交换。

4. ICE 候选地址交换

在连接过程中，浏览器会收集可用的网络路径（IP+端口），称为 ICE 候选。

通过监听 onicecandidate 事件获取候选，并发送给对方：

peerConnection.onicecandidate = event => {
  if (event.candidate) {
    // 将 candidate 发送给对方
    socket.emit('ice-candidate', event.candidate);
  }
};

对方收到后调用 addIceCandidate() 添加到连接中：

peerConnection.addIceCandidate(new RTCIceCandidate(candidate));

当所有候选完成交换，且 NAT 穿透成功，点对点连接即建立。

连接建立后，远程媒体流会通过 ontrack 事件传入：

peerConnection.ontrack = event => {
  document.getElementById('remoteVideo').srcObject = event.streams[0];
};

基本上就这些。只要信令通路正确、网络环境支持，WebRTC 能在几秒内建立起低延迟的音视频通话。关键是理解 SDP 协商与 ICE 候选交换的配合逻辑，不复杂但容易忽略细节。

以上就是如何利用WebRTC在浏览器中实现点对点的实时通信？的详细内容，更多请关注php中文网其它相关文章！