WebRTC 入门与实践（非常详细）从零底子入门到精通，看完这一篇就够了 ...

一、前言

WebRTC 技能已经广泛在各个行业及场景中被应用，但对多数开发者来说，实时音视频及相关技能却是比较不常接触到的。
做为一名 Web 开发者，WebRTC 这块的概念着实花了不少时间才搞明白，一是 WebRTC 本身有较多的独有概念，二是固然带“Web”字样，但依赖底层概念和网络却是 Web 开发很少接触到的；
本篇文章以 0 履历音视频开发者 视角，类比常用的 Web 技能，渴望资助您简单入门 WebRTC 技能，耐心看完本篇文章，你将：

• 了解什么是 WebRTC
  
• 掌握 WebRTC 通话原理
  
• 使用 Chrome debug WebRTC 应用
  

适合阅读对象：Web开发，有 js 底子，对 WebRTC 感兴趣的同学
二、使用示例

没有接触过 WebRTC 技能的同学，可以先体验下 ZEGO 的 GoEnjoy 产品，里面包含了 WebRTC 在欣赏器中的标准使用方案，包括不限于：设备检测、兼容性检测、弱网断网应对战略等，应用是免费的，可戳—>示例 Demo 传送门
在进入正文之前，让我们先对它有个根本的印象吧！

图 1
三、简单介绍

体验完 Demo 后，有必要再了解一下技能的发展汗青、应用场景等，这些能让我们知道它为什么良好，哪方面良好，有哪些缺点等。
程序员经常用到 5W1H 分析法，那么本文就按照这个思路给大家做一下介绍：
What

WebRTC（Web Real-Time Communication），一个可以让用户用本身流量 实现音视频实时通信的框架（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 中的配置项。
  

联合下图类比会更容易理解：

图2
四、前置思索问题

在讲解代码前，还必要思索以下几个问题，否则会不清晰为什么代码中必要互换 SDP，cadidate等（您也可以先看完代码后，再回来看这个段落，加深理解）。
两边使用欣赏器通信，欣赏器能力，网络环境等不同等会对通信有很大影响，一起思索下下面 2 个问题：
1、视频编码能力不一样？
peer-A 和 peer-B 是视频互动的两边欣赏器，他们通讯前必须在视频编码能力上先告竣同等，如下图，终极协商出共同的H264，假如无法告竣同等，则通讯失败。

图3
2 电脑之间，大多数是在某个局域网中，必要 NAT（Network Address Translation，网络地址转换），因此并不能直接通信 ；
表现环境如下图：

图4
通俗一点比喻： 阿宅今年 30 了（不是我，不要乱猜）被父母逼婚，他只能求助媒婆，才可能被另一个阿宅认识。
媒婆解决阿宅社恐问题，NAT 也必要一种方式绕过，两边才华建立通信，我们必要用到 STUN 和 TURN。
五、代码讲解

终于到我们的代码讲解部分了，下面的代码会按照推流段顺序，分阶段讲解每个步骤所必要用到的API（假如你是直接看代码，建议看完后再归去看第三、四 Part 的介绍，理解会更加深刻）。
步骤一：创建数据源

localStream 作为发送端本地预览画面：

1. // 创建数据源
2. const localStream = await navigator.mediaDevices.getUserMedia({
3. video: true,
4. audio: true,
5. });
6. // 显示数据源，localVideo 是 html 中的 video 标签
7. localVideo.srcObject = localStream;

复制代码

步骤二：创建发送数据实例

用于发送步骤一中创建的数据：

1. // 本地实例
2. const pc1 = new RTCPeerConnection();
3. // 对端实例
4. const pc2 = new RTCPeerConnection();

复制代码

步骤三：配置实例

做这一步的目标是为了互换两端的信息**：icecandidate** 和 SDP

• icecandidate：包含通信协议(TCP/UDP)和通信IP，STUN和TURN协议中描述网络信息的格式规范，解决两边网络链接问题；
  
• SDP：欣赏器能力，包括不限于音视频编码格式，带宽，流控战略等；解决前置思索中，两边能力不匹配问题，通过互换两边 SDP 欣赏器会自动选择两边都支持的视频编码格式。
  

1. // 告诉对端，本端地址
2. pc1.addEventListener('icecandidate', async (e) => {
3. // 发送给对端
4. // 对端添加本端地址
5. if (e.candidate) {
6. await pc2.addIceCandidate(e.candidate);
7. }
8. });
11. pc2.addEventListener('icecandidate', async (e) => {
12. // 发送给本端
13. // 本端添加对端地址
14. if (e.candidate) {
15. await pc1.addIceCandidate(e.candidate);
16. }
17. });
20. // 创建本端SDP,告诉本端浏览器支持哪些能力
21. const offer = await pc1.createOffer();
22. pc1.setLocalDescription(offer);
23. // 创建远端SDP,告诉远端浏览器支持哪些能力
24. const answer = await pc2.createAnswer();
25. pc2.setLocalDescription(answer);
26. // 。。。。发送远端SDP给本端
27. // 接收远端sdp,告诉远端浏览器支持哪些能力
28. pc1.setRemoteDescription(answer);
29. // 接收客户端sdp,告诉远端浏览器支持哪些能力
30. pc2.setRemoteDescription(offer);

复制代码

步骤四：发送数据

1. localStream.getTracks().forEach(
2. (track) => pc1.addTrack(track, localStream)
3. );

复制代码

步骤五：完整精简版Typescript代码

注意，这里使用的 typescript 编写，现实运行必要先转成 js。

1. const pc1 = new RTCPeerConnection();pc1.addEventListener('icecandidate', async (e) => {if (e.candidate) {await pc2.addIceCandidate(e.candidate);}});pc1.addEventListener('iceconnectionstatechange', (e) => {console.log('pc1: iceconnectionstatechange', e);});const pc2 = new RTCPeerConnection();pc2.addEventListener('icecandidate', async (e) => {if (e.candidate) {await pc1.addIceCandidate(e.candidate);}});pc2.addEventListener('iceconnectionstatechange', (e) => {console.log('pc2: iceconnectionstatechange', e);});pc2.addEventListener('track', (e) => {if (e.streams.length > 0) {remoteVideo.srcObject = e.streams[0];}});const remoteVideo = document.querySelector('#remoteVideo') as HTMLVideoElement;const localVideo = document.querySelector('#localVideo') as HTMLVideoElement;async function pushStream(answer: RTCSessionDescriptionInit) {pc1.setRemoteDescription(answer);}async function pullStream(offer: RTCSessionDescriptionInit): Promise<void> {pc2.setRemoteDescription(offer);const answer = await pc2.createAnswer();pc2.setLocalDescription(answer);console.warn('answer', answer);pushStream(answer);}window.onload = async () => {const localStream = await navigator.mediaDevices.getUserMedia({video: true,audio: true,});localVideo.srcObject = localStream;localStream.getTracks().forEach(
2. (track) => pc1.addTrack(track, localStream)
3. );
6. const offer = await pc1.createOffer();pc1.setLocalDescription(offer);console.warn('pc1 offer', offer);pullStream(offer);};

复制代码

六、应用举例

学习完理论知识，接下来我们一起再实践下，加深对知识的理解 —— 通过 Chrome欣赏器 debug WebRTC应用。学会 debug 既可以加深理解，也是后续写代码必不可少的技能，千万不少跳过这一步哦：
1、点击打开示例DEMO
2、另打开一个tab页面，输入: chrome://webrtc-internals/
3、DEMO 中输入相关信息开始直播, 切回到 2 中的 tab 页面，如下图：
蓝色部分：对应的是代码中SDP的处置惩罚过程
绿色部分：对应的是网络链接环境

图5
4、继续下来，可以看到推流中实时数据变化：
蓝色部分：拉流实时数据，包括分辨率，码率，丢包率等
绿色部分：推流实时数据，包括分辨率，码率，丢包率等

图6
更多字段理解，可戳这里进行深入学习：Identifiers for WebRTC’s Statistics API
七、末了

随着硬件网络的更新换代，我们经历了由笔墨->图片->视频 载体变更的过程。随着 5G 的普及，音视频技能融于无形正在成为现实，WebRTC 作为其中最重要框架之一，欣赏器的支持成熟度也在快速完善当中，连续学习 WebRTC 技能，关注 ZEGO 即构科技！
附下作者常用的工具，推荐收藏：
1 WebRTC samples. google 官网 demo，包含最新功能
2 MediaDevices - Web APIs | MDN 具体接口介绍
3 WebRTC 1.0: Real-Time Communication Between Browsers（ W3C标准介绍）
题外话

初入计算机行业的人或者大学计算机相关专业毕业生，许多因缺少实战履历，就业随处碰钉子。下面我们来看两组数据：

• 2023届全国高校毕业生预计到达1158万人，就业形势严峻；
  
• 国家网络安全宣传周公布的数据表现，到2027年我国网络安全人员缺口将达327万。
  一方面是每年应届毕业生就业形势严峻，一方面是网络安全人才百万缺口。
  

6月9日，麦可思研究2023年版就业蓝皮书（包括《2023年中国本科生就业陈诉》《2023年中国高职生就业陈诉》）正式发布。
2022届大学毕业生月收入较高的前10个专业
本科计算机类、高职自动化类专业月收入较高。2022届本科计算机类、高职自动化类专业月收入分别为6863元、5339元。其中，本科计算机类专业起薪与2021届根本持平，高职自动化类月收入增长显着，2022届反超铁道运输类专业（5295元）排在第一位。
具体看专业，2022届本科月收入较高的专业是信息安全（7579元）。对比2018届，电子科学与技能、自动化等与人工智能相关的本科专业表现不俗，较五年前起薪涨幅均到达了19%。数据科学与大数据技能虽是近年新增专业但表现亮眼，已跻身2022届本科毕业生毕业半年后月收入较高专业前三。五年前唯一进入本科高薪榜前10的人文社科类专业——法语已退出前10之列。

“没有网络安全就没有国家安全”。当前，网络安全已被提升到国家战略的高度，成为影响国家安全、社会稳定至关重要的因素之一。
网络安全行业特点

1、就业薪资非常高，涨薪快 2021年猎聘网发布网络安全行业就业薪资行业最高人均33.77万！

2、人才缺口大，就业机会多
2019年9月18日《中华人民共和国中央人民当局》官方网站发表：我国网络空间安全人才 需求140万人，而全国各大学校每年造就的人员不到1.5W人。猎聘网《2021年上半年网络安全陈诉》预测2027年网安人才需求300W，现在从事网络安全行业的从业人员只有10W人。

行业发展空间大，岗位非常多
网络安全行业产业以来，随即新增长了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急相应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…
职业增值潜力大
网络安全专业具有很强的技能特性，尤其是掌握工作中的焦点网络架构、安全技能，在职业发展上具有不可替换的竞争优势。
随着个人能力的不断提升，所从事工作的职业价值也会随着自身履历的丰富以及项目运作的成熟，升值空间一起看涨，这也是为什么受大家欢迎的重要缘故原由。
从某种程度来讲，在网络安全范畴，跟大夫职业一样，越老越吃香，由于技能愈加成熟，天然工作会受到重视，升职加薪则是水到渠成之事。
网络安全学习资源分享:

给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小同伴们一点资助！
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
因篇幅有限，仅展示部分资料，朋侪们假如有必要全套《网络安全入门+进阶学习资源包》，必要点击下方链接即可前往获取
**读者福利 |** CSDN大礼包：《网络安全入门&进阶学习资源包》免费分享 **（安全链接，放心点击）**