854 字
2 分钟
WebRTC：实时通信协议详解
前言
WebRTC（Web Real-Time Communication）是浏览器原生支持的实时通信技术，无需安装插件即可实现端到端的音频、视频和数据传输。本章详解 WebRTC 的架构、连接建立流程和应用场景。
一、WebRTC 概述
1.1 核心能力
| 能力 | 说明 |
|---|---|
| 音视频通话 | 点对点音频/视频通话 |
| 屏幕共享 | 分享屏幕或窗口 |
| 文件传输 | P2P 数据传输 |
| 实时游戏 | 低延迟多人游戏 |
1.2 协议栈全景
graph TB
subgraph "应用层"
A[Web Application]
end
subgraph "WebRTC API"
B[getUserMedia] --> G[MediaStream]
C[RTCPeerConnection] --> H[ICE/STUN/TURN]
D[RTCDataChannel] --> I[SCTP/DTLS]
end
subgraph "传输层"
E[SRTP] --> J[UDP]
F[DTLS] --> J
I --> F
end
subgraph "安全层"
K[DTLS-SRTP] --> E
end
A --> B
A --> C
A --> D
style A fill:#e3f2fd
style H fill:#fff3e0
style K fill:#fce4ec
WebRTC 与 WebSocket 协议 都支持实时通信，但 WebRTC 提供真正的 P2P 连接，延迟更低，适合音视频场景。底层使用 UDP（类似 HTTP/3 的 QUIC 协议），避免 TCP 队头阻塞。
1.3 与 WebSocket 对比
| 特性 | WebSocket | WebRTC |
|---|---|---|
| 延迟 | 数十毫秒 | 更低（P2P直连） |
| 服务器 | 需要中转服务器 | 无需服务器（建立后） |
| 适用场景 | 消息推送、聊天 | 视频通话、文件传输 |
| 协议层 | TCP | UDP/TCP |
二、架构概览
graph TB
A["WebRTC API"] --> B["PeerConnection"]
B --> C["Signaling"]
B --> D["ICE"]
D --> E["STUN"]
D --> F["TURN"]
G["DataChannel"] --> B
H["MediaStream"] --> B
2.1 核心组件
- PeerConnection：管理端到端连接
- MediaStream：获取摄像头/麦克风流
- DataChannel：P2P 数据通道
- Signaling：信令交换（通过服务器）
信令服务器通常使用 WebSocket 协议 实现 SDP 和 ICE 候选的实时交换。
三、连接建立流程
3.1 ICE 候选交换
sequenceDiagram
participant C as Caller
participant S as Callee
participant STUN as STUN Server
participant TURN as TURN Server
C->>STUN: 请求 NAT 映射
STUN->>C: 公网 IP:端口
C->>S: ICE Candidate: 公网地址
S->>STUN: 请求 NAT 映射
STUN->>S: 公网 IP:端口
S->>C: ICE Candidate: 公网地址
C->>S: 直接连接测试
S->>C: 连接成功
3.2 SDP 协商
# Session Description Protocol (SDP)offer = { "type": "offer", "sdp": """ v=0 o=- 12345 2 IN IP4 127.0.0.1 s=- c=IN IP4 0.0.0.0 t=0 0 m=audio 5004 RTP/AVP 0 a=rtpmap:0 PCMU/8000 m=video 5006 RTP/AVP 96 a=rtpmap:96 H264/90000 """}四、NAT 穿透
4.1 NAT 穿透流程
flowchart TB
subgraph "ICE 候选收集"
A[开始] --> B[收集本地候选]
B --> C[查询 STUN 服务器]
C --> D[获取公网映射]
D --> E{NAT 类型判断}
E -->|锥型 NAT| F[使用 STUN 候选]
E -->|对称型 NAT| G[需要 TURN 中继]
F --> H[尝试 P2P 连接]
G --> I[使用 TURN 中继]
H --> J{连接成功?}
J -->|是| K[P2P 通信]
J -->|否| I
I --> L[中继通信]
end
style E fill:#fff3e0
style G fill:#ffebee
style F fill:#e8f5e9
4.2 NAT 类型
| 类型 | 说明 | WebRTC 兼容性 |
|---|---|---|
| 全锥型 | 任何外部主机可连接 | 良好 |
| 受限锥型 | 需要内部先访问 | 一般 |
| 端口受限锥型 | 限制 IP 和端口 | 较差 |
| 对称型 | 每个目标不同映射 | 差 |
4.3 STUN 与 TURN
graph LR
subgraph "STUN 模式"
A1[Client A] -->|NAT 映射查询| S1[STUN Server]
S1 -->|返回公网 IP:Port| A1
A1 -->|直连尝试| B1[Client B]
end
subgraph "TURN 模式"
A2[Client A] <-->|中继| T[TURN Server]
T <-->|中继| B2[Client B]
end
style S1 fill:#e8f5e9
style T fill:#fff3e0
# STUN: 简单 NAT 穿透stun_server = "stun:stun.l.google.com:19302"
# TURN: 中继穿透（对称型 NAT 必需）turn_server = "turn:your-turn-server.com"turn_credential = "username"turn_key = "secret_key"五、连接状态管理
5.1 连接状态流程
stateDiagram-v2
[*] --> new: 创建 PeerConnection
new --> connecting: setLocalDescription
connecting --> connected: ICE 完成
connecting --> failed: 连接超时
connected --> disconnected: 网络中断
disconnected --> connected: 重连成功
disconnected --> failed: 重连失败
connected --> closed: 关闭连接
failed --> closed
closed --> [*]
5.2 ICE 连接状态
| 状态 | 说明 |
|---|---|
| new | 初始状态 |
| checking | 正在检查候选 |
| connected | 连接成功 |
| completed | 所有候选检查完成 |
| failed | 连接失败 |
| disconnected | 连接中断 |
| closed | 连接关闭 |
六、DataChannel
6.1 创建数据通道
// 创建可靠有序的数据通道const dc = pc.createDataChannel("chat", { ordered: true, // 有序传输 maxRetransmits: 3, // 最大重传次数});
dc.onmessage = event => { console.log("收到:", event.data);};
dc.send("你好！");6.2 传输模式
| 模式 | 可靠性 | 顺序 | 适用场景 |
|---|---|---|---|
| 可靠有序 | 文件传输 | ||
| 可靠无序 | 实时游戏 | ||
| 不可靠有序 | 语音消息 | ||
| 不可靠无序 | 实时游戏 |
七、浏览器 API
7.1 获取媒体流
// 获取摄像头和麦克风const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720 }, audio: { echoCancellation: true },});
// 显示本地预览videoElement.srcObject = stream;7.2 建立连接
const pc = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.l.google.com:19302" }],});
// 添加本地流stream.getTracks().forEach(track => { pc.addTrack(track, stream);});
// 监听远程流pc.ontrack = event => { remoteVideo.srcObject = event.streams[0];};八、安全考虑
8.1 加密传输
- SRTP（安全实时传输协议）加密媒体流
- DTLS（数据报传输层安全）加密 DataChannel
- 所有密钥在连接建立时协商
WebRTC 强制使用 DTLS 加密，与 HTTPS/TLS 提供类似的端到端安全保证。
8.2 安全建议
// 始终验证远端证书pc.onaddstream = event => { // 验证来源可信 if (!isTrustedPeer(event.streams[0])) { console.error("未信任的远端流"); }};九、应用场景
| 场景 | 实现方式 |
|---|---|
| 视频会议 | MediaStream + DataChannel |
| 直播推流 | MediaStream + WebSocket 中转 |
| 远程教育 | 视频通话 + 白板（DataChannel） |
| 实时游戏 | DataChannel（低延迟） |
| 文件传输 | DataChannel（大文件分片） |
十、局限性
- NAT 穿透失败：对称型 NAT 无法穿透时需 TURN 中转
- 浏览器兼容：Safari 支持相对较差
- 编解码器：HEVC/H.265 需要授权
- 服务器成本：信令服务器仍是必需
十一、总结
WebRTC 提供了浏览器原生的实时通信能力，通过 ICE/STUN/TURN 穿透 NAT，SDP 协商媒体能力，PeerConnection 管理连接。掌握 WebRTC 的架构和 API，是构建现代实时应用的基础。
支持与分享
如果这篇文章对你有帮助，欢迎支持作者或分享给更多人
部分信息可能已经过时
相关文章 智能推荐
1
WebAuthn 与 FIDO2：无密码认证详解
网络 深入解析 WebAuthn 标准与 FIDO2 无密码认证协议
2
gRPC：高性能 RPC 框架详解
网络 深入解析 gRPC 协议的工作原理、Protocol Buffers 和流式调用
3
容器网络
容器运行时 容器网络的核心问题是——隔离的 Network Namespace 如何与外部通信？详细解读 veth pair（虚拟网卡对）、bridge（虚拟网桥）、iptables/NAT（地址转换）、CNI（容器网络接口）的完整链路，以及 Docker 的四种网络模式和 Kubernetes 的 Pod 网络模型——从「容器能 ping 通外网」到「理解每一条网络规则」。
4
WebSocket 协议：双向通信
网络 深度解读 WebSocket 协议——握手流程、帧格式、心跳机制、代理穿透
5
DNS 协议详解：域名系统的分层架构与缓存策略
Web 技术深入 深度解读 DNS 协议——从递归查询与迭代查询的完整流程，到 DNSSEC 签名验证链与 DoH/DoT 加密解析，全面理解域名系统的设计