WebRTC 方案全面介绍

WebRTC（Web Real-Time Communication）是一种支持浏览器和移动端实时音视频通信的技术。根据不同的应用场景，WebRTC 的实现方案可以分为以下几类：

---

1. 原生 WebRTC（P2P 直连）​​

​适用场景​

• 一对一视频通话（如微信视频聊天）
• 低延迟、端到端加密通信

​技术实现​

• ​前端​：使用 RTCPeerConnection、getUserMedia、RTCDataChannel。
• ​信令服务器​：WebSocket/Socket.io 交换 SDP 和 ICE Candidate。
• ​NAT 穿透​：依赖 STUN/TURN 服务器（如 Coturn）。

​优点​

✅ ​超低延迟​（100~300ms）
✅ ​端到端加密​（DTLS-SRTP）
✅ ​无需中转服务器​（纯 P2P）

​缺点​

❌ ​NAT 穿透问题​（复杂网络环境需 TURN 服务器）
❌ ​扩展性差​（不适合多人会议）

​代码示例

// 创建 PeerConnection
const pc = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] });

// 添加本地流
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
stream.getTracks().forEach(track => pc.addTrack(track, stream));

// 监听远程流
pc.ontrack = (event) => {
  remoteVideo.srcObject = event.streams[0];
};

// 信令交换（WebSocket）
pc.onicecandidate = (event) => {
  if (event.candidate) ws.send(JSON.stringify({ type: 'candidate', candidate: event.candidate }));
};

---

2. SFU（Selective Forwarding Unit）​​

​适用场景​

• 多人视频会议（如 Zoom、腾讯会议）
• 需要动态调整分辨率/码率的场景

​技术实现​

• ​服务器​：只转发流，不混流（如 mediasoup、Janus）。
• ​客户端​：每个用户上传一路流，服务器选择最优流下发给其他用户。
• ​协议​：支持 Simulcast（多分辨率）、SVC（分层编码）。

​优点​

✅ ​支持大规模会议​（100+ 人）
✅ ​节省带宽​（只转发需要的流）
✅ ​低延迟​（200~500ms）

​缺点​

❌ ​服务器成本高​（需高性能 SFU 如 mediasoup）
❌ ​实现复杂​（需管理多路流）

​代码示例（mediasoup）​

// 客户端：发布流
const transport = await device.createSendTransport({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});
const producer = await transport.produce({ track: localStream.getVideoTracks()[0] });

// 服务端：转发流
router.createRtpObserver((rtpPacket) => {
  // 选择最优流并转发
});

---

3. MCU（Multipoint Control Unit）​​

​适用场景​

• 传统视频会议（如硬件会议系统）
• 需要混流（九宫格）的场景

​技术实现​

• ​服务器​：解码所有输入流 → 混流 → 重新编码（如 FFmpeg、Kurento）。
• ​客户端​：只接收一路合成流。

​优点​

✅ ​兼容性最好​（所有设备看同一画面）
✅ ​带宽要求低​（只下载一路流）

​缺点​

❌ ​高延迟​（1~3s，因转码）
❌ ​服务器压力大​（CPU/GPU 密集型）

​代码示例（FFmpeg 混流）​

ffmpeg -i input1.mp4 -i input2.mp4 -filter_complex "[0][1]hstack=inputs=2[v]" -map "[v]" output.mp4

---

4. WebRTC 代理转码（RTSP → WebRTC）​​

​适用场景​

• 监控摄像头（RTSP/ONVIF）转 WebRTC
• 传统流媒体（RTMP/HLS）转低延迟 WebRTC

​技术实现​

• ​服务器​：WebRtcStreamer、GStreamer、Janus。
• ​流程​：RTSP → FFmpeg 转码 → WebRTC 传输。

​优点​

✅ ​兼容传统摄像头​
✅ ​比 HLS 延迟更低​（500ms~2s）

​缺点​

❌ ​转码消耗 CPU​
❌ ​扩展性有限​

​代码示例（WebRtcStreamer）​

const webRtcServer = new WebRtcStreamer(videoElement, "http://your-server:8000");
webRtcServer.connect("rtsp://your-camera/stream");

---

5. WebRTC over WebSocket（DataChannel）​​

​适用场景​

• 实时数据传输（如游戏、文件传输）
• 非音视频场景（如聊天机器人）

​技术实现​

• ​前端​：RTCDataChannel 发送二进制数据。
• ​信令​：WebSocket 交换 SDP。

​优点​

✅ ​低延迟​（UDP 传输）
✅ ​支持任意数据​（文件、文本、二进制）

​缺点​

❌ ​不适用于音视频​（需额外编码）

​代码示例

const dc = pc.createDataChannel("chat");
dc.onmessage = (event) => console.log("Received:", event.data);
dc.send("Hello WebRTC!");

---

6. WebRTC 直播（WHIP/WHEP）​​

​适用场景​

• 低延迟直播（如电商直播、赛事直播）
• 替代 RTMP 的现代方案

​技术实现​

• ​推流​：WHIP (WebRTC HTTP Ingestion Protocol)。
• ​播放​：WHEP (WebRTC HTTP Egress Protocol)。
• ​服务器​：Ant Media Server、Red5 Pro。

​优点​

✅ ​500ms 级延迟​（比 HLS/DASH 更低）
✅ ​原生支持 WebRTC​

​缺点​

❌ ​生态不成熟​（2023 年仍较新）

​代码示例（WHIP 推流）​

const whip = new WHIPClient();
whip.publish(localStream, "https://whip-server.example.com");

---

方案对比总结

方案	延迟	扩展性	适用场景	代表工具
​P2P WebRTC​	100~300ms	❌	1对1通话	原生 API、peerjs
​SFU​	200~500ms	✅	多人会议	mediasoup、Janus
​MCU​	1~3s	❌	传统会议	Kurento、FFmpeg
​RTSP → WebRTC​	500ms~2s	❌	监控摄像头	WebRtcStreamer
​DataChannel​	100ms	✅	实时数据传输	原生 API
​WHIP/WHEP​	500ms	✅	低延迟直播	Ant Media Server

---

如何选择？​​

1. ​1对1通话​ → ​P2P WebRTC​
2. ​多人会议​ → ​SFU (mediasoup)​​
3. ​监控摄像头​ → ​RTSP → WebRTC​
4. ​直播​ → ​WHIP/WHEP​
5. ​非音视频数据​ → ​DataChannel​

根据你的需求（延迟、规模、设备兼容性）选择最合适的方案！