WebRTC 架构全景解析：从浏览器 API 到 libwebrtc

第二层：WebRTC JavaScript API

浏览器暴露给 JavaScript 的标准 API，由 W3C 定义：

第三层：WebRTC Native C++ API

这是 libwebrtc 提供的 C++ 接口层，主要包含：

• PeerConnectionFactory：创建 PeerConnection 的工厂类
• PeerConnection：核心连接管理类
• MediaStreamInterface：媒体流接口
• DataChannelInterface：数据通道接口

第四层：核心引擎层

包含三个主要模块：

1. Session Management：会话管理（SDP 协商、ICE 候选收集与交换、DTLS 密钥交换）
2. Voice Engine：音频引擎（音频编解码、回声消除、噪声抑制、自动增益控制、抖动缓冲）
3. Video Engine：视频引擎（视频编解码、视频处理、前向纠错、抖动缓冲）

第五层：传输层

负责网络传输的协议栈：

┌─────────────────────────────────────────┐
│ Application │
├─────────────────────────────────────────┤
│ SRTP (媒体) │ SCTP (数据) │
├─────────────────────────────────────────┤
│ DTLS (加密) │
├─────────────────────────────────────────┤
│ ICE (NAT 穿透) │
├─────────────────────────────────────────┤
│ STUN / TURN (服务器) │
├─────────────────────────────────────────┤
│ UDP / TCP │
└─────────────────────────────────────────┘

浏览器实现差异

不同浏览器的 WebRTC 实现有所差异：

API 体系详解

getUserMedia / getDisplayMedia

getUserMedia - 获取摄像头和麦克风

// 基础用法
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

// 高级约束
const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 },
    frameRate: { ideal: 30, max: 60 },
    facingMode: 'user', // 'user' 前置，'environment' 后置
    deviceId: { exact: 'specific-camera-id' }
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true,
    sampleRate: 48000,
    channelCount: 2
  }
});

getDisplayMedia - 屏幕共享

const screenStream = await navigator.mediaDevices.getDisplayMedia({
  video: {
    cursor: 'always', // 是否显示鼠标
    displaySurface: 'monitor' // 'monitor' | 'window' | 'browser'
  },
  audio: true // 系统音频（部分浏览器支持）
});

枚举设备

const devices = await navigator.mediaDevices.enumerateDevices();
devices.forEach(device => {
  console.log(`${device.kind}: ${device.label} (${device.deviceId})`);
});
// 输出示例：
// videoinput: FaceTime HD Camera (abc123)
// audioinput: MacBook Pro Microphone (def456)
// audiooutput: MacBook Pro Speakers (ghi789)

RTCPeerConnection

RTCPeerConnection 是 WebRTC 的核心 API，负责建立和管理 P2P 连接。

构造函数与配置

const configuration = {
  // ICE 服务器配置
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'turn:turn.example.com:3478', username: 'user', credential: 'password' }
  ],
  // ICE 传输策略
  iceTransportPolicy: 'all', // 'all' | 'relay'
  // Bundle 策略
  bundlePolicy: 'max-bundle', // 'balanced' | 'max-compat' | 'max-bundle'
  // RTCP 复用策略
  rtcpMuxPolicy: 'require', // 'require' | 'negotiate'
  // 证书
  certificates: [certificate]
};
const pc = new RTCPeerConnection(configuration);

核心方法

// ===== 信令相关 =====
// 创建 Offer
const offer = await pc.createOffer({
  offerToReceiveAudio: true,
  offerToReceiveVideo: true,
  iceRestart: false
});
// 创建 Answer
const answer = await pc.createAnswer();
// 设置本地描述
await pc.setLocalDescription(offer);
// 设置远端描述
await pc.setRemoteDescription(remoteAnswer);
// 添加 ICE 候选
await pc.addIceCandidate(candidate);

// ===== 媒体相关 =====
// 添加轨道
const sender = pc.addTrack(track, stream);
// 移除轨道
pc.removeTrack(sender);
// 获取发送器
const senders = pc.getSenders();
// 获取接收器
const receivers = pc.getReceivers();
// 获取收发器
const transceivers = pc.getTransceivers();
// 添加收发器
const transceiver = pc.addTransceiver('video', { direction: 'sendrecv' }); // 'sendrecv' | 'sendonly' | 'recvonly' | 'inactive'

// ===== 数据通道 =====
// 创建数据通道
const dataChannel = pc.createDataChannel('myChannel', { ordered: true, maxRetransmits: 3 });

// ===== 连接管理 =====
// 关闭连接
pc.close();
// 获取统计信息
const stats = await pc.getStats();

核心事件

// ICE 候选事件
pc.onicecandidate = (event) => {
  if (event.candidate) {
    // 发送候选到远端
    sendToRemote({ type: 'candidate', candidate: event.candidate });
  }
};

// ICE 连接状态变化
pc.oniceconnectionstatechange = () => {
  console.log('ICE state:', pc.iceConnectionState); // 'new' | 'checking' | 'connected' | 'completed' | 'failed' | 'disconnected' | 'closed'
};

// 连接状态变化
pc.onconnectionstatechange = () => {
  console.log('Connection state:', pc.connectionState); // 'new' | 'connecting' | 'connected' | 'disconnected' | 'failed' | 'closed'
};

// 信令状态变化
pc.onsignalingstatechange = () => {
  console.log('Signaling state:', pc.signalingState); // 'stable' | 'have-local-offer' | 'have-remote-offer' | 'have-local-pranswer' | 'have-remote-pranswer' | 'closed'
};

// 收到远端轨道
pc.ontrack = (event) => {
  const [remoteStream] = event.streams;
  remoteVideo.srcObject = remoteStream;
};

// 收到数据通道
pc.ondatachannel = (event) => {
  const dataChannel = event.channel;
  dataChannel.onmessage = (e) => console.log(e.data);
};

// 需要重新协商
pc.onnegotiationneeded = async () => {
  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);
  sendToRemote({ type: 'offer', sdp: offer.sdp });
};

RTCDataChannel

DataChannel 提供了在 P2P 连接上传输任意数据的能力。

// 创建数据通道（发起方）
const dataChannel = pc.createDataChannel('chat', {
  ordered: true, // 保证顺序
  maxRetransmits: 3, // 最大重传次数
  // maxPacketLifeTime: 3000, // 或者设置最大生存时间（ms）
  protocol: 'json', // 子协议
  negotiated: false, // 是否手动协商
  id: 0 // 通道 ID（negotiated 为 true 时使用）
});

// 事件处理
dataChannel.onopen = () => {
  console.log('Data channel opened');
  dataChannel.send('Hello!');
};
dataChannel.onclose = () => {
  console.log('Data channel closed');
};
dataChannel.onmessage = (event) => {
  console.log('Received:', event.data);
};
dataChannel.onerror = (error) => {
  console.error('Data channel error:', error);
};

// 发送数据
dataChannel.send('text message');
dataChannel.send(new ArrayBuffer(1024));
dataChannel.send(new Blob(['binary data']));

// 检查缓冲区
if (dataChannel.bufferedAmount < dataChannel.bufferedAmountLowThreshold) {
  dataChannel.send(moreData);
}

// 接收方处理
pc.ondatachannel = (event) => {
  const receiveChannel = event.channel;
  receiveChannel.onmessage = (e) => {
    console.log('Received:', e.data);
  };
};

WebRTC 信令流程概览

什么是信令？

信令（Signaling） 是 WebRTC 建立连接前的协商过程，用于交换：

1. 会话描述（SDP）：媒体能力、编解码器、传输参数
2. 网络候选（ICE Candidates）：可用的网络路径

⚠️ WebRTC 标准不定义信令协议，开发者需要自行实现。

常见信令方案

完整信令流程

┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Caller │ │ Signaling │ │ Callee │
│ (发起方) │ │ Server │ │ (接收方) │
└──────┬───────┘ └──────┬───────┘ └──────┬───────┘
│ │ │
│ 1. 获取本地媒体流 │ │ │
│ getUserMedia() │ │ │
│ │ │ │
│ 2. 创建 PeerConnection │ │ │
│ new RTCPeerConnection │ │ │
│ │ │ │
│ 3. 添加本地轨道 │ │ │
│ addTrack() │ │ │
│ │ │ │
│ 4. 创建 Offer │ │ │
│ createOffer() │ │ │
│ │ │ │
│ 5. 设置本地描述 │ │ │
│ setLocalDescription() │ │ │
│ │ │ │
│ 6. 发送 Offer ─────────>│ │ │
│ 7. 转发 Offer ─────────>│ │ │
│ │ │ │
│ 8. 获取本地媒体流 │ getUserMedia() │ │
│ 9. 创建 PeerConnection │ new RTCPeerConnection │ │
│ │ │ │
│ 10. 设置远端描述 │ setRemoteDescription() │ │
│ │ │ │
│ 11. 添加本地轨道 │ addTrack() │ │
│ │ │ │
│ 12. 创建 Answer │ createAnswer() │ │
│ │ │ │
│ 13. 设置本地描述 │ setLocalDescription() │ │
│ │ │ │
│<───────── 14. 发送 Answer │<───────── 15. 转发 Answer│ │
│ │ │ │
│ ═══════════ 17. ICE 候选交换 (双向) ═══════════ │
│ onicecandidate ──────>│<─────── onicecandidate │
│<────── addIceCandidate │ addIceCandidate ──────>│
│ │ │ │
│ ═══════════════ 18. P2P 连接建立 ═══════════════│
│<═══════════════════════════════════════════════>│
│ │ │ │
│ ═══════════════ 19. 媒体流传输 ═════════════════│
│<═══════════════════════════════════════════════>│
│ │ │

SDP 详解

SDP（Session Description Protocol）描述了会话的媒体能力。

SDP 示例

v=0 o=- 4611731400430051336 2 IN IP4 127.0.0.1 s=- t=0 0 a=group:BUNDLE 0 1 a=extmap-allow-mixed a=msid-semantic: WMS stream_id m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 110 112 113 126 c=IN IP4 0.0.0.0 a=rtcp:9 IN IP4 0.0.0.0 a=ice-ufrag:abcd a=ice-pwd:efghijklmnopqrstuvwxyz a=ice-options:trickle a=fingerprint:sha-256 AA:BB:CC:DD:... a=setup:actpass a=mid:0 a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level a=sendrecv a=rtcp-mux a=rtpmap:111 opus/48000/2 a=fmtp:111 minptime=10;useinbandfec=1 ... m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 c=IN IP4 0.0.0.0 a=rtcp:9 IN IP4 0.0.0.0 a=ice-ufrag:abcd a=ice-pwd:efghijklmnopqrstuvwxyz a=fingerprint:sha-256 AA:BB:CC:DD:... a=setup:actpass a=mid:1 a=sendrecv a=rtcp-mux a=rtcp-rsize a=rtpmap:96 VP8/90000 a=rtpmap:97 rtx/90000 a=fmtp:97 apt=96 a=rtpmap:98 VP9/90000 ...

SDP 关键字段

ICE 候选类型

// ICE 候选示例
{
  candidate: "candidate:842163049 1 udp 1677729535 192.168.1.100 54321 typ srflx raddr 10.0.0.1 rport 12345 generation 0",
  sdpMid: "0",
  sdpMLineIndex: 0
}

媒体引擎结构（libwebrtc 概览）

libwebrtc 简介

libwebrtc 是 Google 开源的 WebRTC 实现，也是 Chrome、Firefox（部分）、Safari 等浏览器的底层实现。

• 代码仓库：https://webrtc.googlesource.com/src/
• 许可证：BSD 3-Clause
• 语言：C++（核心）+ 各平台绑定

目录结构

src/
├── api/ # 公共 API 接口
│   ├── audio_codecs/ # 音频编解码器接口
│   ├── video_codecs/ # 视频编解码器接口
│   ├── peer_connection_interface.h
│   └── ...
├── audio/ # 音频处理
│   ├── audio_send_stream.cc
│   ├── audio_receive_stream.cc
│   └── ...
├── video/ # 视频处理
│   ├── video_send_stream.cc
│   ├── video_receive_stream.cc
│   └── ...
├── call/ # 呼叫管理
├── media/ # 媒体引擎
│   ├── engine/
│   │   ├── webrtc_voice_engine.cc
│   │   └── webrtc_video_engine.cc
│   └── ...
├── modules/ # 核心模块
│   ├── audio_coding/ # 音频编解码
│   ├── audio_processing/ # 音频处理（AEC、NS、AGC）
│   ├── video_coding/ # 视频编解码
│   ├── rtp_rtcp/ # RTP/RTCP 协议
│   ├── congestion_controller/ # 拥塞控制
│   └── ...
├── pc/ # PeerConnection 实现
│   ├── peer_connection.cc
│   ├── sdp_offer_answer.cc
│   └── ...
├── p2p/ # P2P 连接
│   ├── base/
│   │   ├── stun.cc
│   │   ├── turn_port.cc
│   │   └── ...
│   └── client/
│       └── basic_port_allocator.cc
├── rtc_base/ # 基础库
│   ├── thread.cc
│   ├── async_socket.cc
│   └── ...
└── sdk/ # 平台 SDK
    ├── android/
    ├── objc/ # iOS/macOS
    └── ...

核心模块详解

音频处理模块 (Audio Processing Module, APM)

┌─────────────────────────────────────────────────────────────┐
│ Audio Processing Module │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ AEC │ │ NS │ │ AGC │ │
│ │ (回声消除) │ │ (噪声抑制) │ │ (自动增益控制) │ │
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ VAD │ │ Beamform │ │ Level Estimator │ │
│ │ (语音检测) │ │ (波束成形) │ │ (电平估计) │ │
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

关键组件：

视频编解码模块

┌─────────────────────────────────────────────────────────────┐
│ Video Coding Module │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Encoders │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ VP8 │ │ VP9 │ │ H.264 │ │ AV1 │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Decoders │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ VP8 │ │ VP9 │ │ H.264 │ │ AV1 │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Video Processing │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ Scaling │ │ FEC │ │ Jitter Buf │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

RTP/RTCP 模块

┌─────────────────────────────────────────────────────────────┐
│ RTP/RTCP Module │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ RTP Sender │ │
│ │ • 打包媒体数据 │ │
│ │ • 添加 RTP 头部 │ │
│ │ • 处理重传请求 │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ RTP Receiver │ │
│ │ • 解析 RTP 包 │ │
│ │ • 处理丢包 │ │
│ │ • 抖动缓冲 │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ RTCP Handler │ │
│ │ • SR/RR (发送/接收报告) │ │
│ │ • NACK (丢包重传请求) │ │
│ │ • PLI/FIR (关键帧请求) │ │
│ │ • REMB (带宽估计) │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

拥塞控制模块

WebRTC 使用 GCC（Google Congestion Control） 算法进行带宽估计和拥塞控制。

┌─────────────────────────────────────────────────────────────┐
│ Congestion Controller │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Send-side BWE (发送端带宽估计) │ │
│ │ • 基于延迟梯度 │ │
│ │ • Transport-wide CC │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Receive-side BWE (接收端带宽估计) │ │
│ │ • REMB 反馈 │ │
│ │ • 基于丢包率 │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Pacer (发送节奏控制) │ │
│ │ • 平滑发送 │ │
│ │ • 避免突发 │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

线程模型

libwebrtc 使用多线程架构：

┌─────────────────────────────────────────────────────────────┐
│ Thread Architecture │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ │
│ │ Signaling │ 信令线程：处理 API 调用、SDP 协商 │
│ │ Thread │ │
│ └─────────────────┘ │
│ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ Worker │ 工作线程：媒体处理、编解码 │
│ │ Thread │ │
│ └─────────────────┘ │
│ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ Network │ 网络线程：网络 I/O、ICE 处理 │
│ │ Thread │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Audio │ │ Video │ │
│ │ Device Thread │ │ Capture Thread │ 设备线程 │
│ └─────────────────┘ └─────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘

总结

架构要点回顾

API 体系总结

信令流程要点

1. Offer/Answer 模型：发起方创建 Offer，接收方回复 Answer
2. SDP 交换：描述媒体能力和传输参数
3. ICE 候选交换：发现可用的网络路径
4. 信令协议自定义：WebRTC 不规定信令协议

参考资料

1. WebRTC 1.0: Real-Time Communication Between Browsers - W3C
2. libwebrtc Source Code
3. WebRTC for the Curious
4. High Performance Browser Networking - WebRTC
5. RFC 8825 - Overview: Real-Time Protocols for Browser-Based Applications