深入浅出 WebRTC 通信原理：从点对点到多人会议的全方位解析

最新推荐文章于 2025-11-12 06:30:00 发布

原创

最新推荐文章于 2025-11-12 06:30:00 发布 · 1.5k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#webrtc

随着远程办公和在线协作的普及，音视频通信的需求日益增长。无论是两点之间的通信还是多人会议，WebRTC（Web Real-Time Communication）作为一种开源技术，提供了低延迟的实时通信能力。

它允许浏览器或移动设备通过直接的点对点（P2P）连接进行音频、视频和数据的实时传输。它使得不依赖中间服务器的实时通信成为可能，尤其适用于视频聊天、文件共享、音频会议等场景。

在本文中，我们将深入介绍从两点之间的通信原理到底层协议，再到多人会议的实现。

在此之前，我们先来了解一下WebRTC的一些基本概念和关键组件。

一、 WebRTC 关键概念

GetUserMedia：用于从用户设备（如摄像头、麦克风）获取媒体流。
RTCPeerConnection：用于建立和维护对等连接，进行音视频流或数据的传输。
LocalDescription：本地描述是指当前客户端的音视频连接配置，包括了媒体的编解码器、媒体的传输方式（RTP、SRTP）、ICE 候选者（用于 NAT 穿越的网络路径）等。同理，远程描述RemoteDescription则是描述连接对方的信息。
信令服务器：用于交换 SDP（Session Description Protocol）和 ICE（Interactive Connectivity Establishment）候选者信息。信令服务器不处理实际的音视频数据，仅负责协调通信的初期协商。
SDP（会话描述协议）：SDP 提供了媒体类型、编解码器、带宽要求等信息，描述了会话的具体配置。通过 SDP，两个客户端可以相互了解对方的通信能力并进行匹配。
ICE（交互式连接建立）：ICE 帮助客户端穿越 NAT（网络地址转换），通过收集不同网络路径的候选者，找到可以建立 P2P 连接的最佳路径。

上述即两点通信的关键概念，有了这些基本概念，接下来我们了解一下他们建立的通信过程和实现原理。

二、两点之间的通信流程

实现两点之间的 WebRTC 通信时，整个过程通常涉及几个主要步骤：

获取本地媒体流: 使用 getUserMedia() API 获取用户的音视频流。
建立连接: 创建 RTCPeerConnection 实例，并配置 ICE 服务器。
创建和交换 SDP: 使用 createOffer() 和 createAnswer() 生成 SDP 描述，并通过信令服务器交换 SDP 信息。
ICE 候选者交换: 交换 ICE 候选者以建立最优的网络路径。
建立点对点连接: 完成所有的 SDP 和 ICE 交换后，WebRTC 会自动建立点对点连接并开始数据传输。

核心代码示例

// Peer A 和 Peer B 都需要的 RTCPeerConnection 配置
const peerConnectionConfig = {
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
};

// 在 Peer A 中
const peerAConnection = new RTCPeerConnection(peerConnectionConfig);

// 获取本地媒体流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    stream.getTracks().forEach(track => peerAConnection.addTrack(track, stream));
  });

// 创建 Offer
peerAConnection.createOffer().then(offer => {
  return peerAConnection.setLocalDescription(offer);
}).then(() => {
  // 通过信令服务器将 Offer 发送给 Peer B
  signalingServer.send({ offer: peerAConnection.localDescription });
});

// 处理 ICE 候选者
peerAConnection.onicecandidate = (event) => {
  if (event.candidate) {
    signalingServer.send({ iceCandidate: event.candidate });
  }
};

// 接收 Peer B 的 Answer 并设置远端描述
signalingServer.onmessage = (message) => {
  if (message.answer) {
    peerAConnection.setRemoteDescription(new RTCSessionDescription(message.answer));
  } else if (message.iceCandidate) {
    peerAConnection.addIceCandidate(new RTCIceCandidate(message.iceCandidate));
  }
};

// 在 Peer B 中
const peerBConnection = new RTCPeerConnec