1. WebRTC 概述：从零到一理解实时通信
各位同学，咱们今天聊聊 WebRTC。说实话，这个技术我接触了快十年了。从最初在浏览器里点开一个视频通话链接，到后来自己动手搭建信令服务器、调试音画同步，一路踩了不少坑。今天这第一节课，咱们先把 WebRTC 的来龙去脉理清楚。
1.1 WebRTC 到底是什么？
WebRTC，全称 Web Real-Time Communication，翻译过来就是「网页实时通信」。说白了，它是一套让浏览器、移动应用之间直接进行音视频通话、文件传输的 API 和协议集合。
你想想看，以前要实现两个浏览器之间的视频通话，得装插件、配置流媒体服务器、折腾各种编解码器。WebRTC 把这些全封装了——你只要写几行 JavaScript，就能让两个浏览器建立 P2P 连接，互相传音视频数据。
核心要点：WebRTC 不是单一技术，而是一个技术栈。它包含音视频采集、编解码、网络传输、NAT 穿透、安全加密等一整套能力。
我个人习惯把 WebRTC 拆成三层来看：
- 底层传输层：基于 ICE、STUN、TURN 协议，解决网络穿透问题
- 媒体引擎层：负责音视频的采集、编码、解码、渲染
- 上层 API 层：暴露给开发者的 JavaScript 接口，如
getUserMedia、RTCPeerConnection、RTCDataChannel
1.2 发展历史：从实验室到行业标准
WebRTC 的历史其实不长，但发展速度惊人。我记得 2011 年 Google 刚开源 WebRTC 时，很多人觉得这只是个玩具。结果呢？现在它已经是 W3C 和 IETF 的正式标准了。
| 时间 | 里程碑事件 | 我的感受 |
|---|---|---|
| 2011 年 | Google 开源 WebRTC，收购 GIPS 公司获得核心技术 | 当时觉得 Google 疯了，把这么核心的技术免费开放 |
| 2013 年 | Chrome 和 Firefox 首次实现互通的 WebRTC 通话 | 我亲自试过，虽然卡顿严重，但确实通了 |
| 2017 年 | W3C 发布 WebRTC 1.0 候选推荐标准 | API 终于稳定了，不用再追着改代码 |
| 2021 年 | WebRTC 成为 W3C 正式推荐标准 | 嗯，可以放心用在生产环境了 |
| 至今 | WebRTC 已覆盖所有主流浏览器，并扩展到移动端、IoT 设备 | 连智能门铃都在用 WebRTC，你想想看 |
这里有个关键转折点：2017 年之前，各家浏览器对 WebRTC 的实现差异很大。我在 2015 年做过一个项目，Chrome 和 Firefox 的 SDP 格式都不兼容，调试起来简直想砸电脑。后来标准统一了，这类问题才慢慢消失。
1.3 核心优势：为什么选 WebRTC？
市面上做实时通信的方案不少，比如 RTMP、HLS、WebSocket。但 WebRTC 有几个杀手级优势，让我这些年一直用它。
避坑指南：我曾经在一个项目里用 WebSocket 做视频传输，结果延迟 3 秒以上，用户投诉不断。后来换成 WebRTC，延迟降到 200ms 以内。选对技术栈真的很重要。
- 超低延迟：WebRTC 基于 UDP，端到端延迟通常在 200-500ms。相比之下，HLS 的延迟至少 5-10 秒。
- 浏览器原生支持：不用装任何插件，Chrome、Firefox、Safari、Edge 全支持。你写一次代码，所有浏览器都能跑。
- P2P 架构：数据直接在两台设备间传输，不经过服务器，节省带宽成本。当然，遇到对称 NAT 时还是需要 TURN 服务器中转。
- 安全加密：所有音视频流默认使用 DTLS-SRTP 加密，防止中间人攻击。这在企业级应用中特别重要。
- 自适应码率：WebRTC 内置拥塞控制算法，网络差时自动降低画质，网络好时自动提升。用户不会突然卡死。
1.4 应用场景：WebRTC 能做什么？
很多人以为 WebRTC 只能做视频通话，其实它的应用范围广得多。我这些年参与过的项目，几乎覆盖了下面所有场景。
- 视频会议：Zoom、Google Meet、腾讯会议的后台技术都包含 WebRTC。多人通话需要配合 SFU（选择性转发单元）或 MCU（多点控制单元）架构。
- 远程医疗：医生通过 WebRTC 与患者视频问诊，要求音画同步精度高、延迟低。我在一个远程问诊项目里，专门调过音画同步参数，差 100ms 用户都能感觉到。
- 在线教育：师生互动、屏幕共享、白板协作。WebRTC 的 DataChannel 可以传输教学数据，比 WebSocket 更灵活。
- 直播连麦：主播与观众实时互动，延迟控制在 1 秒以内。传统 RTMP 直播延迟 5-10 秒，根本没法连麦。
- IoT 设备监控：智能摄像头、门铃、机器人通过 WebRTC 传输实时画面。我帮一个智能家居公司做过方案，用 WebRTC 替代了 RTSP，兼容性好太多了。
1.5 WebRTC 核心架构图
下面这张图是我自己画的 WebRTC 整体架构。你看一眼，就能明白各个模块之间的关系。
这张图展示了 WebRTC 的四层架构。从上往下看：应用层调用 API，会话层管理连接，媒体引擎处理音视频，传输层负责网络通信。每一层都依赖下一层提供的服务。
注意：实际开发中，你不需要关心传输层的细节——WebRTC 已经帮你封装好了。但理解这些层次关系，对排查问题非常有帮助。比如音画不同步，问题可能出在媒体引擎层，也可能出在传输层。
1.6 本章小结
好了，第一节课的内容就这些。我们讲了 WebRTC 是什么、怎么来的、为什么好用、能用在哪些地方。最后那张架构图，建议你多看几遍，后面每节课都会用到它。