前端音视频之WebRTC初探

今天，我们来一起学习一下 WebRTC，相信你已经对这个前端音视频网红儿有所耳闻了。

WebRTC Web Real-Time Communication 网页即时通信

WebRTC 于 2011 年 6 月 1 日开源，并在 Google、Mozilla、Opera 等大佬们的支持下被纳入 W3C 推荐标准，它给浏览器和移动应用提供了即时通信的能力。

WebRTC 优势及应用场景

优势

• 跨平台(Web、Windows、MacOS、Linux、iOS、Android)

• 实时传输

• 音视频引擎

• 免费、免插件、免安装

• 主流浏览器支持

• 强大的打洞能力

应用场景

在线教育、在线医疗、音视频会议、即时通讯工具、直播、共享远程桌面、P2P网络加速、游戏(狼人杀、线上KTV)等。

WebRTC 整体架构

拉回来，我们看一看 WebRTC 的整体架构，我用不同的颜色标识出了各层级所代表的含义。

• Web 应用

• Web API

• WebRTC C++ API

• Session Management 信令管理

• Transport 传输层

• Voice Engine 音频引擎

• Video Engine 视频处理引擎

我们再来看下核心的模块：

Voice Engine 音频引擎

VoIP 软件开发商 Global IP Solutions 提供的 GIPS 引擎可以说是世界上最好的语音引擎，谷歌大佬一举将其收购并开源，也就是 WebRTC 中的 音频引擎。

• iSAC：WebRTC 音频引擎的默认编解码器，针对 VoIP 和音频流的宽带和超宽带音频编解码器。

• iLBC：VoIP 音频流的窄带语音编解码器。

• NetEQ For Voice：针对音频软件实现的语音信号处理元件。NetEQ 算法是自适应抖动控制算法以及语音包丢失隐藏算法，能够有效的处理网络抖动和语音包丢失时对语音质量产生的影响。

• Acoustic Echo Canceler：AEC，回声消除器。

• Noise Reduction：NR，噪声抑制。

Video Engine 视频处理引擎

VPx 系列视频编解码器是 Google 大佬收购 ON2 公司后开源的。

• VP8：视频图像编解码器，WebRTC 视频引擎默认的编解码器。

• Video Jitter Buffer：视频抖动缓冲器模块。

• Image Enhancements：图像质量增强模块。

WebRTC 通信原理

媒体协商

媒体协商也就是让双方可以找到共同支持的媒体能力，比如双方都支持的编解码器，这样才能实现彼此之间的音视频通信。

SDP Session Description Protocal

媒体协商所交换的数据就是 SDP，说是协议，其实 SDP 并不是一个真正的协议，它就是一种描述各端“能力”的数据格式。

上图所示就是 SDP 的一部分，详细内容请参考：SDP: Session Description Protocol

网络协商

ICE Interactive Connectivity Establishment 互动式连接建立

想要建立连接，我们要需要拿到双方 IP 和端口的信息，在当下复杂的网络环境下，ICE 统一了各种 NAT 穿越技术(STUN、TURN)，可以让客户端成功地穿透远程用户与网络之间可能存在的各类防火墙。

STUN、TURN

STUN：简单 UDP 穿透 NAT，可以使位于 NAT(或多重 NAT) 后的客户端找出自己的公网 IP 地址，以及查出自己位于哪种类型的 NAT 及 NAT 所绑定的 Internet 端口。

我们知道，NAT 主要有以下四个种类：

• 完全锥型 NAT

• IP 限制锥型

• 端口限制锥型

• 对称型

前三种都可以使用 STUN 穿透，而面对第四种类型，也是大型公司网络中经常采用的对称型 NAT ，这时的路由器只会接受之前连线过的节点所建立的连线。

那么想要处理这种网络情况，我们就需要使用 TURN (中继穿透 NAT) 技术。

TURN 是 STUN 的一个扩展，其主要添加了中继功能。在 STUN 服务器的基础上，再添加几台 TURN 服务器，如果 STUN 分配公网 IP 失败，则可以通过 TURN 服务器请求公网 IP 地址作为中继地址，将媒体数据通过 TURN 服务器进行中转。

信令服务器 Signal Server

拿到了双方的媒体信息(SDP)和网络信息(Candidate)后，我们还需要一台信令服务器作为中间商来转发交换它们。

信令服务器还可以实现一些 IM 功能，比如房间管理，用户进入、退出等。

小结

本文我们了解了 WebRTC 优势及应用场景、WebRTC 的整体架构及主要模块构成以及 WebRTC 的通信原理。这些基础知识和概念是需要我们牢记的，大家要记牢～

如果想深入了解 WebRTC 音视频开发，欢迎阅读《WebRTC音视频开发：React Flutter Go 实战》一书。

点击链接了解详情并购买

本书从基本概念、基础应用和综合案例系统介绍WebRTC技术的原理与应用，提供了前后端整体解决方案：PC-Web端使用的是React技术，后端使用的是Golang技术，移动端使用的是Flutter技术。

结合一对一视频通话案例，帮助读者快速上手，深入理解WebRTC的各种功能，并快速搭建自己的应用。

主要内容包括：WebRTC技术发展历史、应用场景、整体架构，WebRTC通话原理，Web开发环境搭建，HTML5项目简介，访问设备的设置，音视频设备的设置，音视频的录制，结合React+Flutter+Go技术开发音视频应用的案例。

精彩抢先看

更多精彩回顾

书讯 |10月书讯（下）| 双节同庆，读书正当时

书讯 |10月书讯（上）| 双节同庆，读书正当时

资讯 |DB-Engines 10月数据库排名：“三大王”无人能敌，PostgreSQL紧随其后

上新 | “深入浅出”《Head First Kotlin程序设计》
书单 | 开学季——计算机专业学生必读的10本畅销经典

干货 | 当Nginx遇到重定向

收藏 | 为什么数字中台是企业应用新基建？

视频 | 大佬出镜推荐不可不读系列——程序员陈彼得

赠书 | 【第27期】10本网络安全方向好书，让你挑花眼...

点击阅读全文购买