WebRTC技术详解

随着4G的普及和5G技术的应用，实时音视频技术正在蓬勃发展。实时通信技术已经渗透到各行各业，支撑着人们的日常生活。在互联网领域，花椒、映客等直播平台吸引了大量的用户；在教育领域，通过实时直播技术搭建的“空中课堂”惠及全球数亿学生；在医疗行业，随着电子处方单纳入医保，互联网看病、复诊正在兴起，地域之间医疗资源不均衡的问题被实时直播技术逐步消除。

在WebRTC诞生之前，实时通信技术非常复杂，想获得核心的音视频编码及传输技术需要支付昂贵的专利授权费用。此外，将实时通信技术与业务结合也非常困难，并且很耗时，通常只有较大规模的公司才有能力实现。

WebRTC的出现使实时通信技术得以广泛应用。WebRTC制定、实现了一套统一且完整的实时通信标准，并将这套标准开源。这套标准包含了实时通信技术涉及的所有内容，使用这套标准，开发人员无须关注音视频编解码、网络连接、传输等底层技术细节，可以专注于构建业务逻辑，且这些底层技术是完全免费的。WebRTC统一了各平台的实时通信技术，大部分操作系统及浏览器都支持WebRTC，无须安装任何插件，就可以在浏览器端发起实时视频通话。

什么是WebRTC

WebRTC（Web Real-Time Communication）是一个谷歌开源项目，它提供了一套标准API，使Web应用可以直接提供实时音视频通信功能，不再需要借助任何插件。原生通信过程采用P2P协议，数据直接在浏览器之间交互，理论上不需要服务器端的参与。“为浏览器、移动平台、物联网设备提供一套用于开发功能丰富、高质量的实时音视频应用的通用协议”是WebRTC的使命。

WebRTC技术最初为Web打造，随着WebRTC自身的演进，目前已经可以将其应用于各种应用程序。

WebRTC的技术架构

从技术实现的角度讲，在浏览器之间进行实时通信需要使用很多技术，如音视频编解码、网络连接管理、媒体数据实时传输等，还需要提供一组易用的API给开发者使用。这些技术组合在一起，就是WebRTC技术架构，如图1所示。

图1 WebRTC技术架构

WebRTC技术架构的顶层分为两个部分：

一部分是Web API，一组JavaScript接口，由W3C维护，开发人员可以使用这些API在浏览器中创建实时通信应用程序。

另一部分是适用于移动端及桌面开发的libwebrtc，即使用WebRTC C++源码在Windows、Android、iOS等平台编译后的开发包，开发人员可以使用这个开发包打造原生的WebRTC应用程序。

第二层是WebRTC C ++ API，它是Web API和libwebrtc的底层实现。该层包含了连接管理、连接设置、会话状态和数据传输的API。基于这些API，浏览器厂商可以方便地加入对WebRTC的支持。WebRTC规范里没有包含信令协议，这部分需要研发人员依据业务特点自行实现。

WebRTC支持的音频编码格式有OPUS和G.711，同时还在音频处理层实现了回音消除及降噪功能。WebRTC支持的视频编码格式主要有VP8和H264（还有部分浏览器支持VP9及H265格式），WebRTC还实现了Jitter Buffer防抖动及图像增强等高级功能。

在媒体传输层，WebRTC在UDP之上增加了3个协议。

■数据包传输层安全性协议（DTLS）用于加密媒体数据和应用程序数据。

■安全实时传输协议（SRTP）用于传输音频和视频流。

■流控制传输协议（SCTP）用于传输应用程序数据。

WebRTC借助ICE技术在端与端之间建立P2P连接，它提供了一系列API，用于管理连接。WebRTC还提供了摄像头、话筒、桌面等媒体采集API，使用这些API可以定制媒体流。

如何学习WebRTC技术？

WebRTC技术包含了音视频编解码技术、传输技术、流媒体服务器技术等，涵盖了音视频处理和传输的方方面面。这些技术中任意一个都能成为独立的课题，都值得花大量时间深入研究。除此之外，理解WebRTC相关API，还必须掌握现代Web技术，尤其是ES6、Promise等语法知识。可见，学习WebRTC技术需要掌握大量的预备知识，这对于初学者来说有一定的门槛。

《WebRTC技术详解：从0到1构建多人视频会议系统》是一本能够降低国内技术人员使用WebRTC的门槛，帮助研发人员更好地将WebRTC技术应用到产品中的书。本书系统地涵盖WebRTC的技术内容，剥离层层技术面纱，将WebRTC以一种易于理解的形式完整呈现给国内技术人员。

本书特色

■全面涵盖WebRTC 1.0规范。

■详细讲解WebRTC底层技术。

■结合示例演示WebRTC API的使用。

■从零起步实现高效、实时的信令系统。

■使用WebRTC技术从0到1打造开源视频会议系统。

作者介绍

栗伟，资深音视频技术专家，在该领域有多年实践经验，对WebRTC有非常深入的研究。曾任职于中科院计算所、CC视频，任职期间利用WebRTC技术开发了直播、在线课堂、视频会议等商业产品，并发用户数达到500万。开源社区的积极参与者，在GitHub上开源了视频会议项目WiLearning，免费供中小企业使用。

目录

●第1章　WebRTC概述1

1.1　WebRTC的历史1

1.2　WebRTC的技术架构2

1.3　WebRTC的网络拓扑3

1.4　Simulcast联播4

1.5　可伸缩视频编码5

1.6　WebRTC的兼容性5

1.7　其他直播技术6

1.8　统一计划与Plan B8

1.9　本章小结9

●第2章　本地媒体10

2.1　媒体流10

2.1.1　构造媒体流11

2.1.2　MediaStream属性11

2.1.3　MediaStream方法11

2.1.4　MediaStream事件14

2.2　媒体轨道15

2.2.1　MediaStreamTrack属性15

2.2.2　MediaStreamTrack方法17

2.2.3　MediaStreamTrack事件20

2.3　媒体约束22

2.3.1　约束类型22

2.3.2　数据类型与用法23

2.3.3　通用约束25

2.3.4　视频约束25

2.3.5　音频约束25

2.3.6　屏幕共享约束26

2.3.7　图像约束26

2.3.8　约束的advanced属性27

2.4　媒体设备28

2.4.1　WebRTC隐私和安全28

2.4.2　获取摄像头与话筒29

2.4.3　共享屏幕30

2.4.4　查询媒体设备31

2.4.5　监听媒体设备变化33

2.5　从canvas获取媒体流34

2.6　从媒体元素获取媒体流34

2.7　播放媒体流35

2.8　录制媒体流36

2.8.1　构造MediaRecorder36

2.8.2　MediaRecorder属性37

2.8.3　MediaRecorder方法39

2.8.4　MediaRecorder事件42

2.9　示例45

2.9.1　代码结构45

2.9.2　获取图片像素数据46

2.9.3　替换视频背景47

2.10　本章小结48

●第3章　传输技术49

3.1　RTP49

3.2　RTCP52

3.3　SRTP/SRTCP54

3.4　TLS/DTLS55

3.5　SDP55

3.6　ICE57

3.7　搭建STUN/TURN服务器63

3.8　本章小结65

●第4章　连接管理66

4.1　WebRTC建立连接的过程66

4.1.1　会话描述信息RTCSession-Description69

4.1.2　pending状态与current状态70

4.1.3　ICE候选者RTCIceCandidate70

4.2　RTCPeerConnection接口72

4.2.1　构造函数RTCPeerConnection73

4.2.2　连接配置RTCConfiguration74

4.2.3　RTCPeerConnection接口的属性76

4.2.4　RTCPeerConnection接口的方法82

4.2.5　RTCPeerConnection接口的事件90

4.3　完美协商模式94

4.3.1　SDP冲突问题95

4.3.2　使用完美协商模式95

4.3.3　再谈ICE重启97

4.4　示例98

4.4.1　运行示例98

4.4.2　使用WebSocket99

4.4.3　创建RTCPeerConnection的时机100

4.5　本章小结102

●第5章　RTP媒体管理103

5.1　WebRTC编解码104

5.2　RTCPeerConnection RTP扩展110

5.2.1　RTCPeerConnection扩展方法111

5.2.2　RTCPeerConnection扩展事件113

5.3　传输媒体流114

5.3.1　无流轨道115

5.3.2　有流轨道115

5.4　RTP收发管理116

5.4.1　RTCRtpTransceiver属性117

5.4.2　RTCRtpTransceiver方法118

5.5　RTP发送器118

5.5.1　RTCRtpSender属性119

5.5.2　RTCRtpSender方法119

5.6　RTP接收器123

5.6.1　RTCRtpReceiver属性123

5.6.2　RTCRtpReceiver方法123

5.7　DTLS传输层126

5.7.1　RTCDtlsTransport属性126

5.7.2　RTCDtlsTransport方法127

5.7.3　RTCDtlsTransport事件127

5.8　ICE传输层128

5.8.1　RTCIceTransport属性128

5.8.2　RTCIceTransport方法130

5.8.3　RTCIceTransport事件132

5.9　使用DTMF134

5.9.1　RTCDTMFSender属性134

5.9.2　RTCDTMFSender方法135

5.9.3　RTCDTMFSender事件135

5.10　RTC错误处理136

5.11　通话的挂起与恢复137

5.11.1　通话挂起137

5.11.2　通话恢复138

5.12　示例139

5.12.1　 动态设置视频码率140

5.12.2　 使用VP9和H264141

5.12.3　使用虚拟背景144

5.13　本章小结145

●第6章　信令服务器146

6.1　使用Node.js147

6.2　使用TypeScript156

6.3　使用Express164

6.4　使用Socket.IO173

6.5　实现信令服务器179

6.6　实现信令客户端186

6.7　示例189

6.8　本章小结191

●第7章　数据通道192

7.1　SCTP192

7.2　RTCPeerConnection数据通道扩展接口196

7.3　RTCSctpTransport199

7.4　RTCDataChannel200

7.5　带内协商与带外协商206

7.6　文字聊天与文件传输206

7.7　本章小结216

●第8章　统计数据217

8.1　统计数据入口217

8.2　RTCStats及其扩展219

8.3　实时码率监测241

8.3.1　使用Chart.js242

8.3.2　获取码率数据244

8.4　本章小结247

●第9章　移动端WebRTC248

9.1　原生应用与混合应用248

9.2　原生开发环境249

9.2.1　Android原生开发环境249

9.2.2　iOS原生开发环境250

9.3　WebView251

9.4　Cordova252

9.4.1　编译环境253

9.4.2　全局配置config.xml254

9.4.3　应用程序行为preference258

9.4.4　应用程序图标icon261

9.4.5　简单的WebRTC移动应用264

9.4.6　调试Cordova应用267

9.5　Ionic Framework268

9.5.1　安装与使用269

9.5.2　开发工具269

9.6　基于Ionic的WebRTC移动应用270

9.6.1　使用模板创建应用程序271

9.6.2　首页组件272

9.6.3　连接管理服务275

9.6.4　视频与聊天组件281

9.6.5　构建Android应用程序283

9.6.6　构建iOS应用程序285

9.7　本章小结286

●第10章　从0到1打造多人视频会议系统287

10.1　整体设计287

10.2　媒体服务器289

10.2.1　OWT289

10.2.2　Kurento289

10.2.3　Janus290

10.2.4　Mediasoup291

10.2.5　媒体服务器的选择291

10.3　Mediasoup信令交互过程293

10.4　服务器端实现294

10.4.1　房间与参与者295

10.4.2　管理与监控接口296

10.5　客户端实现298

10.5.1　发布媒体流298

10.5.2　订阅媒体流301

10.5.3　共享桌面303

10.5.4　共享本地媒体303

10.5.5　文档及白板304

10.5.6　文字聊天307

10.6　传输质量监控308

10.7　从网络故障中恢复309

10.8　本章小结310

上下滑动查看

WebRTC降低了实时通信技术的门槛，使得之前只有互联网巨头才能掌握的实时通信技术得以普及，使得我们能够在家远程办公，孩子们能够“停课不停学”。相信在5G普及之后，WebRTC还会迎来更加蓬勃的发展。

可以预见，未来将有更多技术人员学习并应用WebRTC，希望本书能够帮助大家轻松踏入WebRTC的技术殿堂！

扫码关注【华章计算机】视频号

每天来听华章哥讲书

更多精彩回顾



书讯 | 5月书讯（下）| 5天小长假，一起读新书书讯 | 5月书讯（上）| 5天小长假，一起读新书资讯 | DB-Engines 4月数据库排名：Redis有望甩掉“千年老七”？书单 | 8本书助你零基础转行数据分析岗干货 | 如何构建和推送容器镜像收藏 | 数据仓库分层存储技术揭秘上新 | 银行一线专家经验总结，全面揭示银行运维架构点击阅读全文购买