WebRTC音视频开发：React Flutter Go实战

【*篇　基本概念】

1.1　WebRTC是什么2

1.2　WebRTC整体架构4

2.1　概述7

2.2　媒体协商8

2.3　网络协商11

2.4　连接建立的流程15

【第二篇　基础应用】

3.1　开发环境搭建18

3.1.1　Node安装18

3.1.2　VSCode安装19

3.2　新建示例工程20

3.2.1　package.json配置21

3.2.2　babel支持24

3.2.3　webpack配置24

3.2.4　首页模板文件26

3.2.5　全局样式27

3.2.6　入口文件28

3.2.7　主组件及路由28

4.1　概述31

4.2　获取用户媒体数据32

4.3　打开摄像头33

4.4　打开麦克风35

4.5　截取视频38

4.6　共享屏幕41

4.7　视频滤镜45

5.1　概述49

5.2　分辨率概述50

5.3　分辨率设置51

5.4　音量检测57

5.5　设备枚举60

5.6　设置综合示例67

6.1　概述77

6.2　媒体流78

6.3　MediaStreamTrack79

6.4　流与轨道API测试81

6.5　捕获Video媒体流85

6.6　捕获Canvas媒体流88

6.6.1　浏览器兼容性88

6.6.2　创建画布88

6.6.3　Canvas坐标系88

6.6.4　绘制API89

6.6.5　画板示例90

7.1　媒体录制原理95

7.1.1　创建录制对象95

7.1.2　常用API97

7.1.3　录制事件97

7.2　录制音频97

7.3　录制视频103

7.3.1　约束条件的区别103

7.3.2　播放器的区别103

7.3.3　miniType的区别103

7.3.4　录制视频示例104

7.4　录制屏幕109

7.5　录制Canvas113

8.1　概述118

8.2　连接建立的过程119

8.3　连接建立示例122

8.3.1　视频清晰度自适应130

8.3.2　提议/应答信息131

8.3.3　Candidate信息131

8.4　将Video发送至远端132

8.5　流方式同步白板138

9.1　概述146

9.2　数据通道的概念147

9.3　发送文本消息147

9.4　发送文件154

9.4.1　FileReader155

9.4.2　读取数据156

9.4.3　发送文件示例157

10.1　Windows环境搭建167

10.2　MacOS环境搭建173

10.3　App方案选取178

10.4　Flutter示例工程178

10.5　权限设置184

10.5.1　iOS平台设置184

10.5.2　Android平台设置184

10.6　项目配置185

10.7　入口程序186

11.1　概述189

11.2　GetUserMedia190

11.3　屏幕共享195

11.4　控制设备200

11.5　连接建立206

11.5.1　媒体约束206

11.5.2　连接约束207

11.5.3　SDP约束207

11.5.4　手机旋转方向207

11.5.5　连接建立示例207

11.6　数据通道215

【第三篇　综合案例】

12.1　通话流程224

12.2　技术框架226

12.3　WebSocket226

12.4　信令设计228

13.1　Go开发环境搭建230

13.1.1　Windows环境搭建230

13.1.2　MacOS环境搭建231

13.2　开发工具232

13.3　后端工程介绍232

13.3.1　TURN服务器运行232

WebRTC是一个支持在网页浏览器中进行实时语音对话或视频对话的解决方案。它于2011年6月1日开源并在Google、Mozilla、Opera的支持下被纳入万维网联盟的W3C推荐标准。

笔者近10年来一直从事远程教育系统的开发工作，擅长电子白板、文字聊天、用户列表、一对一/一对多/多对多视频通话、共享桌面、音视频会控、文档共享、文档转换、同步播放点播视频、流媒体转发、媒体录制、流媒体集群等相关技术。*初实现此产品前端使用Flash，流媒体使用FMS（Flash Media Server）方案，这些技术在Web端可以满足需求，但到了移动端就表现得不理想了，主要是性能不佳。另外，Flash使用的协议是RTMP，在互动方面，延迟及回声问题很难解决。Flash支持的另外一个协议RTMFP由于使用不广泛，*终没有采用。不过总体来说，Flash在PC-Web端的表现还是不错的。

在WebRTC出现之前，Flash RTMP是在网页端进行RTC的主要选择。但是老旧平台的使用情况已经出现了衰退，并且安全问题也愈发严重。随着HTML5的发展，Flash Player已经系统地从浏览器中慢慢移出了，Chrome和Firefox已经要求用户提供额外的使用Flash的确认信息，目前Chrome会在后台中阻止Flash的加载。

笔者目前开发远程教育、视频会议、视频会诊等项目时使用的是WebRTC技术。笔者还参与了WebRTC音视频的开源PION/ION项目，以及Flutter React Go WebRTC的视频会议项目。作为项目的主要维护者，希望对WebRTC技术的发展起到推动作用。另外，笔者参与的Flutter-WebRTC客户端插件项目，也为WebRTC技术在客户端提供了一个跨全平台的解决方案，这里感谢好友段维伟工程师对此领域做出的突出贡献。

写作本书的目的是想分享WebRTC知识（因为WebRTC确实优秀），想在为WebRTC社区做点贡献的同时也为我们的产品打下坚实的技术基础。在写作本书的过程中，笔者查阅了大量的资料，使得知识体系扩大了不少，收获良多。

【本书主要内容】

本书采用由浅入深的方式介绍WebRTC音视频开发技术，分为三篇，共15章，主要内容如下。

【阅读建议】

本书是一本基础入门加实战的书籍，既有基础知识，又有丰富的示例，包括详细的操作步骤，实操性强。由于WebRTC涉及的概念众多且不易理解，所以本书采用理论介绍加小案例实战的方式，这样会增强读者信心，在轻松掌握基础理论的同时掌握其用法。

本书提供了前后端整体解决方案。PC-Web端使用的是React技术，后端使用的是Golang技术，移动端使用的是Flutter技术。建议读者补充一下这方面的基础知识。

对于WebRTC基础部分，建议首先把书中涉及的小例子一个一个运行起来，在熟悉了API后再查看官方文档加深印象。对于一对一视频通话案例，建议首先理解其总体架构，然后运行案例查看效果，然后再分别看各个端的实现过程。

本书详细介绍WebRTC音视频开发技术，本书系统介绍WebRTC技术的原理与应用，涵盖：WebRTC技术发展历史、应用场景、整体架构，WebRTC通话原理，Web开发环境搭建，HTML5项目简介，访问设备的设置，音视频设备的设置，音视频的录制，结合React Flutter Go技术开发音视频应用的案例等。

分为三篇，共15章，主要内容包括：

基本概念篇（第1~2章），介绍WebRTC技术发展历史，分析WebRTC整体架构及其核心API，分析WebRTC通话原理，介绍媒体协商、网络协商等基本概念，介绍NAT、SDP、ICE、STUN以及TURN协议；

基础应用篇（第3~11章），介绍WebRTC技术的方方面面，如访问设备、音视频设置、媒体流与轨道、媒体录制、连接建立过程以及数据通道等，帮助读者快速掌握WebRTC的常用接口；

综合案例篇（第12~15章），通过一个一对一的视频通话案例，将前面所学知识串起来，案例的客户端实现了画面渲染、声音控制、视频控制、大小视频展示等功能，服务器端实现了信令处理服务器以及中转数据服务器等。

亢少军 捷智云视频会议系统联合创始人，从事流媒体技术研发工作多年，对于Android、iOS等开发技术有比较深入的研究和应用，作为主要程序员开发了多个应用项目，涉及医疗、交通、银行等领域。

13.4　依赖库管理234

13.5　工具库235

13.6　项目配置文件237

13.7　入口程序238

13.8　Socket服务240

13.9　P2P信令服务244

13.10　用户和会话信息248

13.11　房间管理及信令处理248

13.11.1　房间管理249

13.11.2　信令处理249

13.11.3　合并逻辑并测试252

14.1　登录组件258

14.2　本地视频组件259

14.3　远端视频组件262

14.4　信令实现263

14.5　P2P客户端278

14.6　视频通话测试285

15.1　登录组件287

15.2　生成Id290

15.3　约束条件291

15.4　请求TurnServer292

15.5　ICE配置293

15.6　封装WebSocket294

15.7　定义状态297

15.8　信令实现298

15.9　P2P客户端312

15.10　整体测试318

1）本书从全栈角度系统介绍WebRTC技术的原理与应用，手把手教你学习音视频技术，涉及视频通话及视频会议的众多功能点，如语音视频通信、共享桌面、电子白板、文件传输、音频录制、视频录制、屏幕录制、白板录制等。

2）本书是一本入门级实战指南，既有基础知识，又有操作步骤详细的丰富示例，实操性强，可帮助读者在轻松掌握基础理论的同时快速进入应用开发领域。