WebRTC简单入门与实践

　　一、前言
　　WebRTC技术已经广泛在各个行业及场景中被应用，但对多数开发者来说，实时音视频及相关技术却是比较不常接触到的。
　　做为一名Web开发者，WebRTC这块的概念着实花了不少时间才搞明白，一是WebRTC本身有较多的独有概念，二是虽然带Web字样，但依赖底层概念和网络却是Web开发很少接触到的；
　　本篇文章以0经验音视频开发者视角，类比常用的Web技术，期望帮助您简单入门WebRTC技术，耐心看完本篇文章，你将：了解什么是WebRTC掌握WebRTC通话原理利用ChromedebugWebRTC应用
　　适合阅读对象：Web开发，有js基础，对WebRTC感兴趣的同学二、使用示例
　　没有接触过WebRTC技术的同学，可以先体验下ZEGO的GoEnjoy产品，里面包含了WebRTC在浏览器中的标准使用方案，包括不限于：设备检测、兼容性检测、弱网断网应对策略等，应用是免费的，可戳示例Demo传送门
　　在进入正文之前，让我们先对它有个基本的印象吧！
　　三、简单介绍
　　体验完Demo后，有必要再了解一下技术的发展历史、应用场景等，这些能让我们知道它为什么优秀，哪方面优秀，有哪些缺点等。
　　程序员经常用到5W1H分析法，那么本文就按照这个思路给大家做一下介绍：
　　What
　　WebRTC（WebRealTimeCommunication），一个可以让用户用自己流量实现音视频实时通信的框架（APIs），支持浏览器（Firefox、Chrome、safari）以及iOS、Android原生系统。
　　When
　　2017年12月成为W3C草案，国内微信浏览器19年下半年才支持，国内手机自带浏览器目前还有不少兼容问题，2021年1月26日，成为W3C正式标准。
　　Who
　　2011年Google收购多个子项目（GIPS，On2，VPx），成立了现在的WebRTC项目，目前是Google的一个开源项目。
　　Where
　　可应用在社交娱乐教育工具等需要实时音视频高效沟通的场景，例如：最近很火的元宇宙。
　　Why
　　W3C标准，开源，插件化，整体效果佳。
　　How
　　也是本文重中之中，最终的目的也是让大家能知道如何使用。
　　在正式代码讲解之前，有一些概念需要先普及一下（您也可以先看完代码后，再回来看这个段落，加深理解。）：
　　MediaStream：流媒体对象，音视频数据的一种封装格式，挂载到video或audio标签上播放；
　　RTCPeerConnection：会话控制，网络和媒体信息收发，作用类似http对象；
　　SDP：主要用于两个会话实体之间的媒体协商，作用类似http中的配置项。
　　结合下图类比会更容易理解：
　　四、前置思考问题
　　在讲解代码前，还需要思考以下几个问题，否则会不清楚为什么代码中需要交换SDP，cadidate等（您也可以先看完代码后，再回来看这个段落，加深理解）。
　　【更多音视频学习资料，点击链接Q链接免费领取，先码住不迷路】
　　双方使用浏览器通信，浏览器能力，网络情况等不一致会对通信有很大影响，一起思考下下面2个问题：1、视频编码能力不一样？
　　peerA和peerB是视频互动的两边浏览器，他们通讯前必须在视频编码能力上先达成一致，如下图，最终协商出共同的H264，如果无法达成一致，则通讯失败。
　　2。电脑之间，大多数是在某个局域网中，需要NAT（NetworkAddressTranslation，网络地址转换），因此并不能直接通信
　　显示情况如下图：
　　通俗一点比喻：阿宅今年30了（不是我，不要乱猜）被父母逼婚，他只能求助媒婆，才可能被另一个阿宅认识。
　　媒婆解决阿宅社恐问题，NAT也需要一种方式绕过，双方才能建立通信，我们需要用到STUN和TURN。五、代码讲解
　　终于到我们的代码讲解部分了，下面的代码会按照推流段顺序，分阶段讲解每个步骤所需要用到的API（如果你是直接看代码，建议看完后再回去看第三、四Part的介绍，理解会更加深刻）。
　　步骤一：创建数据源
　　localStream作为发送端本地预览画面：创建数据源constlocalStreamawaitnavigator。mediaDevices。getUserMedia（｛video：true，audio：true，｝）；显示数据源，localVideo是html中的video标签localVideo。srcObjectlocalStream；
　　步骤二：创建发送数据实例
　　用于发送步骤一中创建的数据：本地实例constpc1newRTCPeerConnection（）；对端实例constpc2newRTCPeerConnection（）；
　　步骤三：配置实例
　　做这一步的目的是为了交换两端的信息：icecandidate和SDP
　　icecandidate：包含通信协议（TCPUDP）和通信IP，STUN和TURN协议中描述网络信息的格式规范，解决双方网络链接问题；
　　SDP：浏览器能力，包括不限于音视频编码格式，带宽，流控策略等；解决前置思考中，双方能力不匹配问题，通过交换双方SDP浏览器会自动选择双方都支持的视频编码格式。告诉对端，本端地址pc1。addEventListener（icecandidate，async（e）｛发送给对端对端添加本端地址if（e。candidate）｛awaitpc2。addIceCandidate（e。candidate）；｝｝）；pc2。addEventListener（icecandidate，async（e）｛发送给本端本端添加对端地址if（e。candidate）｛awaitpc1。addIceCandidate（e。candidate）；｝｝）；创建本端SDP，告诉本端浏览器支持哪些能力constofferawaitpc1。createOffer（）；pc1。setLocalDescription（offer）；创建远端SDP，告诉远端浏览器支持哪些能力constanswerawaitpc2。createAnswer（）；pc2。setLocalDescription（answer）；发送远端SDP给本端接收远端sdp，告诉远端浏览器支持哪些能力pc1。setRemoteDescription（answer）；接收客户端sdp，告诉远端浏览器支持哪些能力pc2。setRemoteDescription（offer）；
　　步骤四：发送数据localStream。getTracks（）。forEach（（track）pc1。addTrack（track，localStream））；
　　【更多音视频学习资料，点击链接Q链接免费领取，先码住不迷路】
　　步骤五：完整精简版Typescript代码
　　注意，这里使用的typescript编写，实际运行需要先转成js。constpc1newRTCPeerConnection（）；pc1。addEventListener（icecandidate，async（e）｛if（e。candidate）｛awaitpc2。addIceCandidate（e。candidate）；｝｝）；pc1。addEventListener（iceconnectionstatechange，（e）｛console。log（pc1：iceconnectionstatechange，e）；｝）；constpc2newRTCPeerConnection（）；pc2。addEventListener（icecandidate，async（e）｛if（e。candidate）｛awaitpc1。addIceCandidate（e。candidate）；｝｝）；pc2。addEventListener（iceconnectionstatechange，（e）｛console。log（pc2：iceconnectionstatechange，e）；｝）；pc2。addEventListener（track，（e）｛if（e。streams。length0）｛remoteVideo。srcObjecte。streams〔0〕；｝｝）；constremoteVideodocument。querySelector（remoteVideo）asHTMLVideoElement；constlocalVideodocument。querySelector（localVideo）asHTMLVideoElement；asyncfunctionpushStream（answer：RTCSessionDescriptionInit）｛pc1。setRemoteDescription（answer）；｝asyncfunctionpullStream（offer：RTCSessionDescriptionInit）：Promisevoid｛pc2。setRemoteDescription（offer）；constanswerawaitpc2。createAnswer（）；pc2。setLocalDescription（answer）；console。warn（answer，answer）；pushStream（answer）；｝window。onloadasync（）｛constlocalStreamawaitnavigator。mediaDevices。getUserMedia（｛video：true，audio：true，｝）；localVideo。srcObjectlocalStream；localStream。getTracks（）。forEach（（track）pc1。addTrack（track，localStream））；constofferawaitpc1。createOffer（）；pc1。setLocalDescription（offer）；console。warn（pc1offer，offer）；pullStream（offer）；｝；六、应用举例
　　学习完理论知识，接下来我们一起再实践下，加深对知识的理解通过Chrome浏览器debugWebRTC应用。学会debug既可以加深理解，也是后续写代码必不可少的技能，千万不少跳过这一步哦：
　　1、点击打开示例DEMO
　　2、另打开一个tab页面，输入：chrome：webrtcinternals
　　3、DEMO中输入相关信息开始直播，切回到2中的tab页面，如下图：
　　蓝色部分：对应的是代码中SDP的处理过程
　　绿色部分：对应的是网络链接情况
　　4、继续下来，可以看到推流中实时数据变化：
　　蓝色部分：拉流实时数据，包括分辨率，码率，丢包率等
　　绿色部分：推流实时数据，包括分辨率，码率，丢包率等
　　更多字段理解，可戳这里进行深入学习：IdentifiersforWebRTCsStatisticsAPI七、结尾
　　随着硬件网络的更新换代，我们经历了由文字图片视频载体变更的过程。随着5G的普及，音视频技术融于无形正在成为现实，WebRTC作为其中最重要框架之一，浏览器的支持成熟度也在快速完善当中
　　版权声明：本文为CSDN博主ZEGO即构科技的原创文章，遵循CC4。0BYSA版权协议，转载请附上原文出处链接及本声明。
　　原文链接：https：blog。csdn。netzego0616articledetails123420765
　　程序员音视频开发WebRTC