WebRTC是实现浏览器端点对点实时通信的最直接方案，其核心在于通过信令交换SDP和ICE候选信息建立P2P连接。关键组件包括RTCPeerConnection（管理音视频流）、RTCDataChannel（传输任意数据）、MediaStream（获取本地媒体）和信令机制（自建服务传递连接信息）。连接流程为：一方创建Offer并设置本地描述，通过信令发送给对方；接收方设置远程描述并生成Answer返回；双方收集ICE候选并通过信令互发并添加；连接建立后通过addTrack传输媒体流或使用DataChannel传数据。部署时需配置STUN/TURN服务器以应对NAT和防火墙问题，信令服务可基于WebSocket实现，且应用需运行在HTTPS或localhost环境下。难点在于信令设计与网络兼容性处理，而非API本身。
要实现浏览器端的点对点实时通信，WebRTC 是目前最直接有效的技术方案。它允许音频、视频和任意数据在浏览器之间直接传输，无需经过中间服务器中转。核心在于建立 P2P 连接，整个过程依赖信令机制协调，但实际媒体流是点对点传输的。
理解 WebRTC 的核心组件
WebRTC 本身不负责设备发现或连接协商，这些由开发者自行实现。关键组件包括：
- RTCPeerConnection：管理点对点连接，处理音视频流的编码、传输与网络穿透。
- RTCDataChannel：用于传输任意数据（如文本、文件），支持可靠或不可靠传输模式。
- MediaStream (getUserMedia)：获取本地摄像头和麦克风的媒体流。
- 信令（Signaling）：通过 WebSocket 或 HTTP 等方式交换 SDP 和 ICE 候选信息，不属于 WebRTC 标准，需自建服务。
实现点对点连接的基本流程
两个浏览器要建立连接，必须通过信令服务交换必要的连接信息。步骤如下：
- 用户 A 调用 createOffer 生成本地 Offer SDP，并设置到自己的 RTCPeerConnection 中。
- 将 Offer 通过信令服务器发送给用户 B。
- 用户 B 收到 Offer 后，调用 setRemoteDescription 保存对方的会话描述。
- 用户 B 调用 createAnswer 生成 Answer SDP，设置为本地描述并发送回用户 A。
- 双方通过 onicecandidate 事件收集 ICE 候选地址（如 STUN/TURN 获取的公网地址），并通过信令互发。
- 收到对方 ICE 候选后，调用 addIceCandidate 添加到连接中。
- 连接建立后，媒体流通过 addTrack 添加，数据则通过 RTCDataChannel 发送。
部署时的关键注意事项
虽然 WebRTC 是点对点协议，但实际部署中仍需考虑网络环境和兼容性问题：
- 使用 STUN 服务器帮助获取公网 IP 地址，例如 Google 提供的
stun:stun.l.google.com:19302可用于测试。 - 在 NAT 或防火墙复杂环境下，需部署 TURN 服务器作为中继，保证连接可达。
- 信令服务可用 Node.js + WebSocket 快速搭建，只需传递 SDP 和 ICE 数据，逻辑简单。
- 注意浏览器安全策略：获取媒体流需要 HTTPS 或 localhost 环境。
- 监听 ontrack 事件接收对方视频流，并绑定到 <video> 元素播放。
简单示例代码结构
前端主要逻辑可简化为：
const pc = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] });
// 获取本地视频流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
localVideo.srcObject = stream;
stream.getTracks().forEach(track => pc.addTrack(track, stream));
});
// 创建 Offer
pc.createOffer().then(offer => {
pc.setLocalDescription(offer);
// 通过信令发送 offer
});
// 接收 Answer 或 ICE 候选
signaling.onmessage = (event) => {
const message = JSON.parse(event.data);
if (message.type === 'answer') {
pc.setRemoteDescription(new RTCSessionDescription(message));
} else if (message.type === 'candidate') {
pc.addIceCandidate(new RTCIceCandidate(message.candidate));
}
};
pc.onicecandidate = (event) => {
if (event.candidate) {
// 发送到对方
}
};
pc.ontrack = (event) => {
remoteVideo.srcObject = event.streams[0];
};
基本上就这些。WebRTC 的难点不在 API 使用，而在信令设计和网络兼容性处理。只要理清 SDP 交换和 ICE 协商流程，就能实现稳定可靠的浏览器间实时通信。
