面向工程团队的 WebRTC 系统化学习手册。目标读者是已有前端或后端开发经验、希望从 0 系统掌握 WebRTC 协议族、媒体引擎、工程架构、跨端落地和实战项目交付的工程师。
不复述官方文档,每节回答四个问题:为什么这么做、什么时候适用、什么时候不适用、失败时长什么样。
1. 学习路径
| 阶段 | 目标 | 对应章节 |
|---|
| 入门 | 跑通一个浏览器内的 echo demo,理解 SDP/ICE 形态 | 01、02、99/L0 |
| 上手 | 完成跨网络的 1v1 通话,部署 coturn | 03、99/L1 |
| 进阶 | 多人会议、Simulcast/SVC、getStats 全字段 | 04、05、99/L2 |
| 工程化 | 录制、互通、可观测、安全合规 | 05、06、99/L3-L4 |
| 跨端 | Web、移动原生、小程序差异处理 | 07、99/L6 |
| 专家 | libwebrtc 源码、自研 SFU、AI 增强 | 08、99/L5 |
2. 目录结构
3. 通用判断原则
- 能不上 P2P 就不上 SFU。1v1 用 P2P,多于 4 人立刻评估 SFU。
- TURN 不是可选项。生产环境 10%~20% 流量要走中继,不部署就等于"在 NAT 后面用户全部连不上"。
- 不要靠 prompt 式 SDP munging 解决问题。优先用
RTCRtpTransceiver、setCodecPreferences、setParameters 等标准 API。
getStats 是真理来源。任何"用户说卡"都先看 framesPerSecond、packetsLost、jitterBufferDelay、qualityLimitationReason。
- 拥塞控制是工业级护城河。GCC/TWCC + NACK + FEC + Simulcast 决定了产品上限,不会调就交给 mediasoup/LiveKit 这类成熟 SFU。
- 跨端不能想当然。Safari、微信 WebView、iOS WKWebView、小程序对 WebRTC 的支持差距巨大,每一个都要单独验证。
4. 通用工程交付面
| 模块 | 最低要求 |
|---|
| 信令层 | 房间模型、断线重连、Offer/Answer 状态机、Perfect Negotiation |
| 媒体层 | 多分辨率上行、自适应码率、关键帧请求、回声消除 |
| 网络层 | STUN/TURN 双栈、TCP/TLS 兜底、IPv6 支持、ICE Restart |
| 安全层 | DTLS 指纹校验、TURN 短期凭据、房间鉴权、媒体加密 |
| 观测层 | getStats 上报、QoE 指标、freeze/卡顿事件、降级原因 |
| 跨端层 | 浏览器、移动原生、小程序差异封装、Polyfill 边界 |
5. 反模式总览
| 反模式 | 表现 | 后果 |
|---|
| 不部署 TURN | 只配 STUN,对称 NAT 用户连不上 | 现场 demo 通、外网用户失败 |
| 信令裸跑 WebSocket | 没有重连、没有 glare 处理 | 同时 offer 时连接卡死 |
| Mesh 拓扑硬扛多人 | 5 人以上每端要发 N-1 路 | 上行带宽爆炸、CPU 拉满 |
| 只测最终画面 | 不读 getStats | 用户卡了不知道是丢包、CPU 还是带宽 |
| SDP munging 改 codec | 字符串替换 SDP | 升级浏览器后随时崩 |
| 不做 ICE Restart | 移动端切网络后断流 | 4G ↔ Wi-Fi 切换必断 |
6. 与本仓库其他目录的关系
- 网络与运维基础:见
../前端运维知识体系/02-网络协议深入(未发布:../前端运维知识体系/02-网络协议深入/index.md)。
- 性能与缓存:见
../前端运维知识体系/09-性能优化与缓存(未发布:../前端运维知识体系/09-性能优化与缓存/index.md)。
- AI 增强专题(实时字幕、语音降噪)会引用
../AI Agent知识体系大全/03-模型与推理能力(未发布:../AI%20Agent知识体系大全/03-模型与推理能力/index.md)。
7. 权威资料