第1章 WebRTC初探

课程目录第1章 WebRTC初探

1、WebRTC初探：WebRTC是什么、WebRTC发展史、WebRTC能做什么、WebRTC整体架构

1.1 WebRTC到底是什么？

先问大家一个问题：你有没有想过，为什么浏览器里打开视频通话，不需要装任何插件？

答案就是 WebRTC。

WebRTC，全称是 Web Real-Time Communication，翻译过来就是「网页实时通信」。说白了，它是一套让浏览器之间直接传音频、视频、数据的标准。不需要中间服务器转发数据流，两个浏览器就能「面对面」聊天。

我个人习惯把它理解成「浏览器的对讲机」。你打开一个网页，点一下按钮，就能跟另一个网页的人实时通话。这在十年前简直是天方夜谭。

  核心要点： WebRTC 不是某个公司的产品，而是一个开放标准。它由 W3C 和 IETF 共同维护。W3C 管 API 接口，IETF 管底层协议。

1.2 发展史：从闭源到开源，再到标准

WebRTC 的故事，得从 2010 年说起。

那时候，Google 收购了一家叫 Global IP Solutions（GIPS）的公司。这家公司做的是语音引擎技术，说白了就是让网络通话更清晰。Google 买下后，直接把核心技术开源了。

嗯，这里要注意。Google 不是做慈善，而是想推动浏览器原生支持实时通信。你想，如果每个网站都要自己搞一套插件才能视频通话，那 Web 生态就太割裂了。

2011 年，Google 在 Chrome 里首次实现了 WebRTC 原型。同年，W3C 开始制定标准。

我记得那会儿我还在做 Flash 的视频通话项目，每次都要用户装插件，体验极差。看到 WebRTC 出来时，我就知道 Flash 迟早要凉。

2013 年，Firefox 和 Chrome 实现了互通的 WebRTC 通话。这是里程碑事件——两个不同浏览器，不需要任何插件，直接视频通话。

之后几年，WebRTC 不断完善。2017 年，W3C 发布了 WebRTC 1.0 候选推荐标准。2021 年，正式成为 W3C 推荐标准。

年份	事件
2010	Google 收购 GIPS 公司
2011	Chrome 实现 WebRTC 原型，W3C 开始制定标准
2013	Chrome 与 Firefox 实现互通
2017	WebRTC 1.0 候选推荐标准发布
2021	WebRTC 1.0 正式成为 W3C 推荐标准

个人经验： 我早期做 WebRTC 项目时，最头疼的就是不同浏览器实现不一致。现在好多了，主流浏览器基本都支持标准 API。但移动端 WebView 仍然是个坑，后面章节我会专门讲。

1.3 WebRTC 能做什么？

你可能会想：不就是视频通话吗？

其实远不止这些。我列几个典型场景：

视频会议：Zoom、Google Meet 的底层技术就是 WebRTC
在线教育：师生实时互动，屏幕共享
远程医疗：医生和患者视频问诊
直播连麦：主播和观众实时互动
文件传输：点对点传大文件，不走服务器
IoT 设备控制：摄像头、无人机实时画面回传

为什么 WebRTC 能做这么多？因为它不只是视频通话。它提供了三个核心能力：

音视频采集与播放：通过 getUserMedia 获取摄像头和麦克风
点对点连接：通过 RTCPeerConnection 建立直接通道
数据通道：通过 RTCDataChannel 传输任意数据

避坑指南： 我曾经以为 WebRTC 能直接穿透所有网络环境。结果第一次部署就遇到对称 NAT，连不上。后来才知道，WebRTC 需要 STUN/TURN 服务器辅助打洞。这个坑我后面会详细讲。

1.4 整体架构：拆开看看里面长什么样

WebRTC 的架构，说白了就是三层：

上层 API：给开发者用的 JavaScript 接口
中间层：浏览器实现的 C++ 引擎
底层：网络传输和编解码器

下面这张图是我自己画的，帮你理解整体结构：

从上往下看：

API 层：你写 JavaScript 时直接调用的接口。比如 navigator.mediaDevices.getUserMedia() 获取摄像头，new RTCPeerConnection() 建立连接。
引擎层：浏览器内部实现的 C++ 模块。音频引擎负责回声消除、降噪；视频引擎负责编解码、分辨率适配；网络传输负责丢包重传、抖动缓冲。
网络层：最底层的协议。SRTP 加密音视频流，STUN/TURN 解决 NAT 穿透，ICE 协商最佳路径，DTLS 保证信令安全。

  关键理解： 你写 WebRTC 应用时，其实只接触了最上面那层 API。中间和底层的工作，浏览器帮你做了。但如果你不理解底层原理，遇到问题就会抓瞎。比如为什么连不上？为什么卡顿？这些都要从底层找原因。

1.5 一个最简单的例子

光说不练假把式。我写个最简单的例子，让你感受一下 WebRTC 的 API 长什么样：

// 获取本地摄像头
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    // 把视频流显示到页面上
    let video = document.getElementById('localVideo');
    video.srcObject = stream;
  })
  .catch(function(err) {
    console.log('获取摄像头失败：', err);
  });

这段代码只有几行，就能打开你的摄像头。放在十年前，这得写几百行插件代码。

小提示： 我第一次跑通这个例子时，兴奋了好一阵。但后来发现，真正难的不是获取摄像头，而是把视频传给另一个人。那需要信令、ICE 协商、NAT 穿透……这些我们后面会一步步拆解。

1.6 本章小结

WebRTC 不是什么黑魔法。它是一套标准，让浏览器原生支持实时通信。

它解决了「浏览器之间如何直接传音视频」的问题
它经历了从闭源到开源、再到标准化的过程
它能做的不只是视频通话，还有数据通道、屏幕共享等
它的架构分三层：API、引擎、网络

嗯，到这里，你应该对 WebRTC 有了一个整体印象。下一章，我们会深入第一个实战环节——用 getUserMedia 采集音视频。到时候我会分享一些踩坑经验，比如为什么有的浏览器拿不到摄像头权限。

公众号：蓝海资料掘金营，微信 deep3321

📚 课程目录

1、WebRTC初探：WebRTC是什么、WebRTC发展史、WebRTC能做什么、WebRTC整体架构

1.1 WebRTC到底是什么？

1.2 发展史：从闭源到开源，再到标准

1.3 WebRTC 能做什么？

1.4 整体架构：拆开看看里面长什么样

1.5 一个最简单的例子

1.6 本章小结