5G时代必学的WebRTC音视频通话技术
什么是WebRTC
◼ WebRTC（Web Real-Time Communication）是 Google于2010以6829万美
元从 Global IP Solutions 公司购买，并于2011年将其开源，旨在建立一个互联
网浏览器间的实时通信的平台，让 WebRTC技术成为 H5标准之一。
WebRTC时代来临
所有主要的浏览器的兼容
WebRTC现在得到了所有主要浏览器的支持和采用，包括谷歌Chrome、
苹果Safari、Mozilla Firefox 、QQ浏览器、360浏览器和Microsoft Edge。
IE支不支持webrtc？
威胁传统音视频提供商 声网（跨国，跨印度）、即构科技、融云
一波新的会议供应商正在使用WebRTC技术来勇闯互联网，对传统音视频提供
商给予了致命的一击。
WebRTC可靠性和易用性（声网在web端调用的是标准的API（WebRTC api） W3C）
WebRTC通过web浏览器普及会议体验，支持点击开始，并消除了额外软件的麻烦，
从而使这种体验成为可能。
WebRTC应用案例
教育行业解决方案
互动电商解决方案
企业视频协作/OA办公解决方案
WebRTC浏览器支持检测
1.是否是H5支持的平台：https://cloud.tencent.com/document/product/647/16863。
2.能力检测能否通过：https://sxb.qcloud.com/webrtc-samples/abilitytest/index.html。
WebRTC发展前景
WebRTC虽然冠以“web”之名，但并不受限于传统互联网应用或浏览
器的终端运行环境。实际上无论终端运行环境是浏览器、桌面应用、
移动设备（Android或iOS）还是IoT设备，只要IP连接可到达且符
合WebRTC规范就可以互通。
全球领先的技术研究和咨询公司Technavio最近发布了题为“全球网络
实时通讯（WebRTC）市场，2017-2021”的报告。报告显示，2017-
2021年期间，全球网络实时通信（WebRTC）市场将以34.37％的年
均复合增长率增长，增长十分迅速。增长主要来自北美、欧洲及亚
太地区。
WebRTC框架
IE
edge
Chrome Opera
Firefox
Safari
WebRTC通话原理
首先思考的问题：
两个不同网络环境的（具备摄像头/麦克风多媒体设备的）客户端（浏览器或
APP），要实现点对点的实时音视频对话，难点在哪里？
哪部分问题需要我们解决，哪部分问题由Google解决。
音视频编解码能力沟通
网络传输数据
如何发现对方
WebRTC通话原理-1媒体协商-音视频编解码
彼此要了解
对方支持的媒体格式
比如：Peer-A端可支持VP8、H264多种编码格式，而Peer-B端支持VP9、H264，要保
证二端都正确的编解码，最简单的办法就是取它们的交集H264
注：有一个专门的协议 ，称为Session Description Protocol (SDP)，可用于描述上述这类信
息，在WebRTC中，参与视频通讯的双方必须先交换SDP信息，这样双方才能知根知底，而
交换SDP的过程，也称为"媒体协商"。
WebRTC通话原理-2网络协商（1）
彼此要了解对方的网络情况，这样才有可能找到一条相互通讯的链路
理想的网络情况是每个浏览器的电脑都是私有公网IP，可以直接进行点对点连接。
WebRTC通话原理-2网络协商（2）
实际情况是：我们的电脑和电脑之前或大或小都是在某个局域网中，需要NAT
（Network Address Translation，网络地址转换）。
WebRTC通话原理-网络协商（3）
NAT（Network Address Translation，网络地址转换）。
WebRTC通话原理-STUN（1）
STUN（Session Traversal Utilities for NAT，NAT会话穿越应用程序）是一种网络
协议，它允许位于NAT（或多重NAT）后的客户端找出自己的公网地址(ip+port)，
查出自己位于哪种类型的NAT之后以及NAT为某一个本地端口所绑定的Internet端
端口。
WebRTC通话原理-STUN（2）
使用一句话说明STUN做的事情就是：告诉我你的公网IP地址+端口是什么。
问题是：STUN并不是每次都能成功的为需要NAT的通话设备分配IP地址的，P2P
在传输媒体流时，使用的本地带宽，在多人视频通话的过程中，通话质量的好坏
往往需要根据使用者本地的带宽确定。
那么怎么办？TURN可以很好的解决这个问题。
WebRTC通话原理-TURN（1）
TURN的全称为Traversal Using Relays around NAT，是STUN/RFC5389的一个拓展，主要
添加了Relay功能。如果终端在NAT之后， 那么在特定的情景下，有可能使得终端无
法和其对等端（peer）进行直接的通信，这时就需要公网的服务器作为一个中继，
对来往的数据进行转发
WebRTC通话原理-TURN（2）
在STUN分配公网IP失败后，可以通过TURN服务器请求公网IP地址作为中继地址。
这种方式的带宽由服务器端承担，在多人视频聊天的时候，本地带宽压力较小。
以上是WebRTC中经常用到的2个协议，STUN和TURN服务器我们使用coturn开源
项目来搭建。
补充：ICE（ Interactive Connectivity Establishment，交互式连接建立）
跟STUN和TURN不一样，ICE不是一种协议，而是一个框架（Framework），它整
合了STUN和TURN。coturn开源项目集成了STUN(打洞)和TURN(中继)的功能。
网络信息：放在 candidate
WebRTC通话原理- 3 媒体协商+ +商 网络协商 数据的交换通道
从上面1/2点我们知道了2个客户端协商媒体信息(SDP)和网络信息(candidate)，那怎
么去交换？是不是需要一个中间商去做交换？所以我们需要一个信令服务器
（Signal server）（房间服务器）转发彼此的媒体信息和网络信息。
WebRTC通话原理- 3 媒体协商+ + 网络协商数据的交换通道
访问到的局域网），借助信令服务器，就可以实现上面提到的SDP媒体信息及
Candidate网络信息交换。
信令服务器不只是交换 媒体信息sdp和网络信息candidate，比如：
（1）房间管理
（2）人员进出房间
WebRTC通话原理总结
媒体协商
网络协商（每个客户端是有多个 映射地址）
媒体协商+网络协商数据的交换通道
信令服务器的开发：SDP/Candidate的交互，房间维护。
AppRTC
WebRTC API
1.MediaStream — MediaStream用来表示一个媒体数据流（通过getUserMedia
接口获取），允许你访问输入设备，如麦克风和 Web摄像机,该 API 允许从其中
任意一个获取媒体流。
WebRTC APIs
1.RTCPeerConnection — RTCPeerConnection 对象允许用户在两个浏览器之间
直接通讯 ，你可以通过网络将捕获的音频和视频流实时发送到另一个 WebRTC
端点。使用这些 Api，你可以在本地机器和远程对等点之间创建连接。它提供了连
接到远程对等点、维护和监视连接以及在不再需要连接时关闭连接的方法。
Web版本：调用JS API
WebRTC通话原理-4 一对一通话
对于WebRTC应用开发人员而言，
主要是关注RTCPeerConnection类，
我们以
（1）信令设计；
（2）媒体协商；
（3）加入Stream/Track；
（4）网络协商
四大块继续讲解通话原理
WebRTC通话信令基本设计
采用json封装格式
• join 加入房间
• resp-join 当join房间后发现房间已经存在另一个人时则返回另一个人的uid；如
果只有自己则不返回
• leave 离开房间，服务器收到leave信令则检查同一房间是否有其他人，如果有
其他人则通知他有人离开
• new-peer 服务器通知客户端有新人加入，收到new-peer则发起连接请求
• peer-leave 服务器通知客户端有人离开
• offer 转发offer sdp
• answer 转发answer sdp
• candidate 转发candidate
有兴趣了解更多音视频 webrtc FFmpeg 流媒体方面的朋友可以扫码加群获取学习资料
5G时代必学的WebRTC音视频通话技术相关推荐
- 流媒体服务器开发——SRS 4.0与WebRTC音视频通话丨音视频开发丨嵌入式开发丨FFmpeg丨iOS音视频开发
SRS 4.0与WebRTC音视频通话 1. 音视频高薪岗位都需要什么技能点 2. WebRTC的技术点分析 3. SRS 4.0如何使用WebRTC 视频讲解如下,点击观看: 流媒体服务器开发--S ...
- 低延时直播技术优化实践，画质增强技术应用实践，云剪辑架构设计与演进，Web端音视频通话技术探索...
快直播,低延时直播技术优化实践 Topic <腾讯云快直播低延时播放质量优化实践> 费伟 腾讯云 专家工程师 随着直播行业的快速发展,特别是在疫情的影响下,各种低延时直播需求得到了爆发性 ...
- iOS下WebRTC音视频通话（一）
在iOS下做IM功能时,难免都会涉及到音频通话和视频通话.QQ中的QQ电话和视频通话效果就非常好,但是如果你没有非常深厚的技术,也没有那么大的团队,很难做到QQ那么快速和稳定的通话效果. 但是利用We ...
- 在centos8环境下用asterisk18配置pjsip和webrtc音视频通话教程(一)
记录一下2021年采用asterisk18配置pjsip分机和webrtc音视频的教程,测试采用浏览器WebRTC呼叫软电话sip分机,WebRTC接听之间的拨号和内部SIP分机和浏览器WebRTC分 ...
- 极致体验，解密微信背后的音视频通话技术
近两年,音视频技术展现了迅猛的发展势头,在短视频.直播.在线会议.教育等行业都有亮眼的应用案例,已经逐渐成为新时代互联网的基础设施之一,从而使得市场对于视频研发人才的需求越来越旺盛. 最直观的感受就是 ...
- 音视频通话：腾讯云 webRTC音视频通话的使用
最近项目中用到关于视频通话的功能,一开始使用腾讯云云直播提供的接口进行web端推流和拉流,但苦于获取不到音频,而且那个web推流用的flash谷歌在12月份就不支持了.所以我们最终确定使用webrtc ...
- WebRTC音视频通话（二）简单音视频通话
本篇不详细介绍websocket,只针对websocket整合rtc. 一.简单说下webrtc的流程 webrtc是P2P通信,也就是实际交流的只有两个人,而要建立通信,这两个人需要交换一些信息来保 ...
- 在centos8环境下用asterisk18配置pjsip和webrtc音视频通话教程(二)
在上一篇文章,我们介绍了asterisk18在centos8.3环境的编译安装,下面我们继续介绍如何在asterisk18环境中调试成功我们的分机之间通话(包括webrtc). 1) 通过命令 /op ...
- 大数据、云计算、人工智能、机器学习，数字经济时代必学
数字经济时代,大数据.云计算.人工智能.机器学习....每天充斥耳边,当你不去追赶这个时代,就会被时代抛弃. 圣普伦 Simplilearn 专为培养全球IT精英而来,Simplilearn是全球最大 ...
最新文章
- python有序队列_Python 队列
- d3.js图表_如何使用D3.js建立历史价格图表
- 为什么阿里巴巴规定禁止超过三张表 join？
- GAN（Generative Adversarial Network，GAN）模型应用
- python【蓝桥杯vip练习题库】ALGO-87字串统计（暴力）
- C++继承机制下的析构函数
- 贾斯帕马斯基林的故事笔记
- 使用SpringMVC 的MultipartFile文件上传时参数获取的一个坑
- AT2645 [ARC076D] Exhausted?（Hall定理推论/线段树+扫描线）
- JSP EL表达式使用
- 四、MyBatis 框架 Dao 动态代理
- node 创建静态服务器并自动打开浏览器
- Appfuse 教程
- Kubernetes 小白学习笔记（7）--kubernetes的架构与组件-Node组件
- 在html中 标题单元格的标记是,html表格标题标签是什么
- 简单并不粗暴：自学产品的8个方法
- android蓝牙键盘光标,如何将Android手机连接到无线蓝牙鼠标？
- STM 32简单编程实例
- PAT 甲级1121 Damn Single
- 开源免费录屏和直播软件OBS Studio教程（02）