WebRTC解析

一、WebRTC 协议概述

WebRTC（Web Real-Time Communication）是由 Google 发起并成为 W3C 标准的实时音视频通信技术，核心特点：

零插件：浏览器原生支持
端到端加密（SRTP + DTLS）
P2P 优先架构（支持中转穿透）
超低延迟（100-500ms）
全平台覆盖（Web/Android/iOS/PC）

二、协议栈架构（分层解析）

层级	核心协议/技术	功能说明
应用层	JavaScript API	媒体设备控制/信令交互
会话层	SDP/SIP（信令协议）	媒体协商/会话描述
传输层	ICE/STUN/TURN	NAT穿透/网络路径选择
安全层	DTLS/SRTP	数据加密/防窃听
媒体层	RTP/RTCP + SCTP	音视频传输/数据通道
网络层	UDP（优先）/TCP	底层传输

2.1 WebRTC 全架构蓝图

+-------------------------------+
|         JavaScript API        |
| (getUserMedia, RTCPeerConnection) |
+-------------------------------+⬆ 信令控制 ⬇ 媒体流
+-------------------------------+
|          信令层               |
|  (WebSocket/SIP/XMPP)         |
|  SDP Offer/Answer 交换        |
+-------------------------------+⬆ 网络协商 ⬇
+-------------------------------+
|         ICE 框架              |
|  ┌──────────┐ ┌──────────┐    |
|  | STUN     | | TURN     |    | 
|  | 公网IP发现 | 中继传输   |    |
|  └──────────┘ └──────────┘    |
+-------------------------------+⬆ 传输路径 ⬇
+-------------------------------+
| 安全传输层                    |
|  DTLS-SRTP 加密通道           |
|  ┌───────┐ ┌───────┐          |
|  | 音频流 | | 视频流 |         |
|  | RTP   | | RTP   |         |
|  └───────┘ └───────┘         |
|  ┌───────────────┐           |
|  | 数据通道(SCTP) |           |
|  | 文件/文本传输  |           |
|  └───────────────┘           |
+-------------------------------+⬇
+-------------------------------+
| 网络传输层                    |
| UDP (默认) / TCP 回退         |
+-------------------------------+

三、核心协议详解

信令协议（Signaling）
- 无强制标准：可使用 WebSocket/SIP/XMPP
- 关键交互内容：
```
{"sdp": "v=0\r\no=- 709535467 2 IN IP4 127.0.0.1...","type": "offer","candidate": "candidate:1 udp 2122260223 192.168.1.1 53534 typ host"
}
```
- SDP 协议（Session Description Protocol）：
  -媒体类型协商（H264/VP8/Opus）
  -网络地址交换
  -带宽参数设定
NAT 穿透协议
- ICE 框架：
  收集所有候选地址（Host/Server Reflexive/Relay）
  优先级排序：Host > SRFLX > Relay
- STUN（Session Traversal Utilities for NAT）：
  获取公网 IP : Port
  检测 NAT 类型（完全锥形/限制锥形等）
- TURN（Traversal Using Relays around NAT）：
  中继服务器兜底方案
  消耗服务器带宽资源
媒体传输协议
- RTP/RTCP：
  分包传输 H.264/VP8 视频帧
  RTCP 反馈丢包率/抖动等指标
- SRTP（Secure RTP）：
  AES 加密媒体数据
  HMAC-SHA1 完整性保护
- SCTP over DTLS：
  可靠/有序数据通道（文件传输/聊天）
  多流并发支持
安全协议
- DTLS 握手：
  基于 UDP 的 TLS 加密
  交换证书建立安全通道
- 密钥派生：
  使用 SRTP Master Key 派生会话密钥
  前向保密支持（PFS）

四、连接流程图

[ 设备A ]                           [ 信令服务器 ]                          [ 设备B ]|                                      |                                      ||--- 1. 采集媒体流 ---------------------->|                                      ||    (getUserMedia)                    |                                      ||                                      |                                      ||--- 2. 创建PeerConnection ------------>|                                      ||    (new RTCPeerConnection)           |                                      ||                                      |                                      ||--- 3. 生成SDP Offer ----------------->|---- 4. 转发Offer ------------------->||    (createOffer)                     |                                      ||                                      |                                      ||<-- 6. 接收Answer --------------------|<--- 5. 生成Answer -------------------||    (setRemoteDescription)            |                                      ||                                      |                                      ||--- 7. ICE候选收集开始 ---------------->|                                      ||    (onicecandidate)                  |                                      ||                                      |                                      ||--- 8. 发送ICE候选 -------------------->|---- 9. 转发候选 -------------------->||    (多个candidate消息)                |                                      ||                                      |                                      ||--- 10. 建立P2P连接 ------------------->|                                      ||    (优先UDP直连，失败走TURN)           |                                      ||                                      |                                      ||--- 11. 媒体流传输开始 ---------------->|                                      ||    (ontrack事件触发)                  |                                      |

关键节点说明：
步骤3-6：SDP 协商阶段（约 100-300ms）
步骤7-10：ICE 连接建立（受 NAT 类型影响）
步骤11：SRTP 媒体流开始传输

五、典型消息格式示例

SDP Offer 消息片段

v=0
o=- 709535467 2 IN IP4 192.168.1.10
s=-
t=0 0
a=group:BUNDLE audio video
m=audio 9 UDP/TLS/RTP/SAVPF 111
a=rtpmap:111 opus/48000/2
a=candidate:1 udp 2122260223 192.168.1.10 53534 typ host
...

ICE Candidate 消息

{"candidate": "candidate:2 1 udp 1686052607 203.0.113.1 41434 typ srflx raddr 			192.168.1.10 rport 53534",
"sdpMid": "video","sdpMLineIndex": 1
}

RTCP 反馈报文

RTCP Packet (Type=205)       // Transport Layer Feedback
Header:Version=2, Padding=0, Length=3SSRC=0x902EFACEFCI:PID=1234, BLP=0x0001     // 指示丢失包序列号

六、协议交互细节

ICE 候选收集过程

本机候选收集
├── Host Candidate: 192.168.1.10:59322 (局域网IP)
├── Server Reflexive Candidate: 203.0.113.5:41434 (通过STUN获取公网IP)
└── Relayed Candidate: 54.32.1.7:3478 (TURN服务器中继地址)优先级排序算法：
候选优先级 = (2^24)*(类型优先级) + (2^8)*(本地优先级) + (256 - 组件ID)
示例：host > srflx > relay

DTLS-SRTP 握手流程

Phase 1: DTLS 握手（基于 UDP 的 TLS）ClientHello → ServerHello → Certificate → ServerKeyExchange → ... → FinishedPhase 2: SRTP 密钥导出
使用 DTLS 协商的 master_secret 生成：
client_write_SRTP_key = HMAC-SHA256(master_secret, "EXTRACTOR-dtls_srtp")
确保每 2^48 包更换密钥Phase 3: 媒体加密传输
音频包：RTP Header + SRTP加密载荷
视频包：RTP Header + VP8 payload + SRTP Auth Tag

七、性能优化矩阵表

优化维度	技术手段	参数示例	影响范围
网络抗丢包	前向纠错 (FEC)	ulpFecPayloadType: 110	提升 10-15% 丢包恢复
	RTX 重传	rtx: { ssrc: 1234, payloadType: 96 }	增加 5-10% 带宽消耗
带宽自适应	GCC 算法	googCpuOveruseDetection: true	动态调整 500kbps-8Mbps
	simulcast	多流 encodings: [{scaleResolutionDownBy: 2}]	增加 30% 编码开销
硬件加速	H264 硬编解码	codec: ‘H264’	降低 50% CPU 占用
	WebGL 渲染	videoElement.webkitRequestFullScreen()	减少 30ms 渲染延迟

八、典型故障排查树

问题：媒体流无法显示
├── 1. 检查信令状态
│   ├── SDP Offer/Answer 是否完整交换？
│   └── ICE candidates 是否全部传输？
├── 2. 验证NAT穿透
│   ├── STUN响应是否正常？(telnet stun.l.google.com 19302)
│   └── TURN服务器是否配置正确？
├── 3. 检测加密配置
│   ├── DTLS 握手是否完成？（Wireshark过滤dtls）
│   └── SRTP密钥是否匹配？
└── 4. 媒体流诊断├── 本地是否有视频输出？（chrome://webrtc-internals）└── 远端是否触发ontrack事件？

九、实战代码示例（Node.js 信令服务）

// 信令服务器核心逻辑
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', (ws) => {ws.on('message', (message) => {const data = JSON.parse(message);// 信令路由switch(data.type) {case 'offer':broadcast(ws, { type: 'offer', sdp: data.sdp });break;case 'answer':broadcast(ws, { type: 'answer', sdp: data.sdp });break;case 'candidate':broadcast(ws, { type: 'candidate',candidate: data.candidate });break;}});
});function broadcast(sender, data) {wss.clients.forEach(client => {if (client !== sender && client.readyState === WebSocket.OPEN) {client.send(JSON.stringify(data));}});
}

十、对比其他协议的优势

协议	延迟	加密支持	P2P能力	部署复杂度	典型场景
WebRTC	<500ms	强制端到端	原生支持	中	视频会议/远程控制
RTMP	1-3s	无	无	低	直播推流（淘汰中）
HLS	10s+	HTTPS	无	低	视频点播/大并发直播
SIP	500ms-2s	可选SRTP	有限支持	高	VoIP电话系统

核心优势：

浏览器原生支持：无需插件即开即用
抗丢包优化：
NACK/PLI 重传请求
动态码率调整（GCC 算法）
多路流管理：
Simulcast（同时发多分辨率流）
SVC（可分层视频编码）
跨平台一致性：统一 API 覆盖所有设备

十一、应用场景与落地实践

典型应用场景
视频会议系统（Google Meet/腾讯会议）
在线教育（实时白板/屏幕共享）
物联网控制（远程设备操控）
游戏互动（实时语音聊天）
医疗会诊（4K 内窥镜影像传输）

开发实践步骤
-设备采集：

navigator.mediaDevices.getUserMedia({
video: { width: 1280, codec: 'vp8' },
audio: { sampleRate: 48000 }
});

-建立连接：

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

-信令交换：

// 通过 WebSocket 发送 SDP Offer/Answer
ws.send(JSON.stringify({ type: 'offer', sdp: pc.localDescription }));
});

-数据通道：

const dc = pc.createDataChannel('chat');
dc.onmessage = e => console.log('Received:', e.data);

性能优化要点
QoS 策略：
启用 RTX 重传（payload type 96-127）
配置 TWCC 带宽评估

硬件加速：
使用 H264 硬件编解码
开启 WebGL 视频渲染

网络优化：
部署 TURN 服务器集群
启用 BBR 拥塞控制算法

十二、关键问题解决方案

防火墙穿透失败：
部署 TURN 服务器（推荐 Coturn）
开启 TCP 443 端口的中继模式
高分辨率卡顿：
启用 Simulcast 发送三档分辨率（1080p/720p/360p）
动态调整 max-bitrate（建议值：500kbps - 8Mbps）
回声消除不佳：
启用硬件 AEC（Acoustic Echo Cancellation）
配置 audio: { echoCancellation: true, noiseSuppression: true }