WebRTC 技术详解：架构、组件与网络穿透

2.4 网络传输

• 传输协议：
  • 基于 UDP 实现低延迟传输
  • 通过 QUIC 协议优化传输效率
• NAT 穿透方案：
  • ICE 框架整合 STUN/TURN
  • STUN：用于发现公网地址
  • TURN：在中继服务器转发数据
  • 支持多种候选地址类型（主机、反射、中继）

2.5 安全层

• 加密体系：
  • DTLS：用于密钥交换（类似 TLS）
  • SRTP：媒体流加密（AES 加密）
  • SCTP：数据通道加密（支持可靠/不可靠传输）
• 安全特性：
  • 强制加密所有通信
  • 支持 Perfect Forward Secrecy
  • 端到端加密保护

三、WebRTC 核心组件详解

3.1 RTCPeerConnection —— 音视频通信主干

RTCPeerConnection 是 WebRTC 的核心 API，负责管理端到端 (P2P) 连接的整个生命周期，包括媒体协商、连接建立、网络传输和质量监控等关键功能。

3.1.1 关键流程

• 创建连接：new RTCPeerConnection(configuration)，其中 configuration 包含 ICE 服务器配置等参数
• 添加媒体流：addTrack() 方法将本地媒体流添加到连接中
• 信令交换：
  • 发起方调用 createOffer() 生成 SDP Offer
  • 接收方处理 Offer 后调用 createAnswer() 生成 SDP Answer
• ICE 候选交换：通过 onicecandidate 事件收集并交换网络候选地址
• 连接建立：自动选择最优路径建立连接

3.1.2 核心概念

SDP（Session Description Protocol）：

• 文本格式的协商协议，描述媒体能力（编码器、分辨率、端口等）

示例格式：

v=0 o=- 123456789 2 IN IP4 127.0.0.1 s=- t=0 0 m=video 9 UDP/TLS/RTP/SAVPF 96 a=rtpmap:96 VP8/90000 

Offer/Answer 模型：

• 一方发起 Offer（包含媒体能力），另一方回复 Answer（确认或调整能力）
• 协商过程确保双方使用兼容的编解码器和传输参数

ICE Candidate：

• 网络地址候选类型：
  • Host Candidate：本地网络接口地址
  • Server Reflexive Candidate：通过 STUN 服务器获取的外网映射地址
  • Relay Candidate：通过 TURN 服务器中继的地址
• 使用 ICE 算法选择最优连接路径（通常优先选择直连路径）

3.2 RTCDataChannel —— 低延迟数据传输

在已建立的 PeerConnection 上，可创建可靠或不可靠的数据通道，用于传输任意数据（文本、文件、游戏指令等）。

3.2.1 底层协议栈

• 应用层：RTCDataChannel API
• 传输层：SCTP（流控制传输协议）
• 安全层：DTLS（Datagram Transport Layer Security）
• 网络层：UDP

3.2.2 特性对比

3.2.3 典型应用场景

• 实时游戏状态同步
• 文件分块传输
• 远程桌面控制
• 传感器数据实时传输

3.3 媒体处理：getUserMedia 与 MediaStream

3.3.1 navigator.mediaDevices.getUserMedia()

• 功能：请求用户授权访问摄像头/麦克风等媒体设备
• 返回：Promise 解析为 MediaStream 对象

参数：constraints 对象指定所需媒体类型和质量

{ audio: true, video: { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 30 } } }

3.3.2 MediaStream 结构

• 包含一个或多个 MediaStreamTrack（媒体轨道）
  • AudioTrack：音频数据流
  • VideoTrack：视频数据流
• 每个 Track 有自己的设置和状态（enabled/muted）

3.3.3 常见应用方式

• 流媒体操作：
  • 添加/移除 Track：addTrack()/removeTrack()
  • 克隆流：clone()
  • 获取 Tracks：getAudioTracks()/getVideoTracks()

视频处理：

// 通过 Canvas 处理视频帧
const canvas = document.getElementById('videoCanvas');
const ctx = canvas.getContext('2d');
function processFrame() {
  ctx.drawImage(videoElement, 0, 0);
  // 应用图像滤镜等处理
  requestAnimationFrame(processFrame);
}

直接播放：

const videoElement = document.getElementById('localVideo');
videoElement.srcObject = mediaStream;

四、网络穿透：ICE / STUN / TURN

WebRTC 的最大挑战是穿越 NAT 和防火墙。为此，它采用 ICE（Interactive Connectivity Establishment）框架：

ICE 工作流程

• 收集候选地址：
  • Host Candidate：本地 IP（如 192.168.1.10）
  • Server Reflexive Candidate：通过 STUN 服务器获取公网映射 IP
  • Relay Candidate：通过 TURN 服务器中转（最后手段）
• 连通性检查：双方交换候选地址，尝试所有组合，选择延迟最低、带宽最高的路径
• 建立连接：成功后锁定最优路径，媒体流直连（P2P）或经 TURN 中转

五、安全机制：端到端加密

WebRTC 强制加密，无法关闭：

• 媒体流：SRTP（Secure Real-time Transport Protocol） + AES 加密
• 密钥交换：DTLS（Datagram Transport Layer Security）握手
• 数据通道：SCTP over DTLS
• 证书：自动生成自签名证书（可通过 setIdentityProvider 集成 WebAuthn）