观感度：????????????????????

口味：干锅虾球

烹饪工夫：10min

本文已收录在前端食堂同名仓库Github github.com/Geekhyt，欢迎光临食堂，如果感觉酒菜还算可口，赏个 Star 对食堂老板来说是莫大的激励。

在上个系列专栏前端音视频的那些名词中，咱们对比特率、帧率、分辨率、容器格局以及编码格局有所理解，如果还没看过的同学请点击上方链接自行跳转。

明天，咱们来一起学习一下 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

或者参考卡神的这篇文章：WebRTC：会话形容协定SDP

网络协商

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 的通信原理。这些基础知识和概念是须要咱们牢记的，大家要记牢～

参考

  • 《从 0 打造音视频直播零碎》 李超
  • 《WebRTC 音视频开发 React+Flutter+Go 实战》 亢少军
  • https://webrtc.github.io/webrtc-org/architecture/
  • https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API
  • https://www.w3.org/TR/webrtc/

❤️爱心三连击

1.如果你感觉食堂酒菜还合胃口，就点个赞反对下吧，你的赞是我最大的能源。

2.关注公众号前端食堂，吃好每一顿饭！

3.点赞、评论、转发 === 催更！