WebRTC
一、发展历程
名称源自网页实时通信(Web Real-Time Communication)的缩写,是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输,支持网页浏览器进行实时语音对话或视频对话。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下,创建点对点(Peer-to-Peer)的数据分享和电话会议成为可能。它是谷歌2010年5月以6820万美元收购拥有编解码、回声消除等技术的Global IP Solutions公司而获得的一项技术。该项目是由GIPS项目和libjingle项目融合而成。其中GIPS部分主要提供媒体的处理的功能。libjingle项目部分主要提供P2P传输部分的功能。2011年5月开放了工程的源代码,与相关机构 IETF 和 W3C 制定行业标准,组成了现有的 WebRTC 项目,在行业内得到了广泛的支持和应用,成为下一代视频通话的标准。

    ​ WebRTC是一个开源项目,旨在使得浏览器能为实时通信(RTC)提供简单的JavaScript接口。说的简单明了一点就是让浏览器提供JS的即时通信接口。这个接口所创立的信道并不是像WebSocket一样,打通一个浏览器与WebSocket服务器之间的通信,而是通过一系列的信令,建立一个浏览器与浏览器之间(peer-to-peer)的信道,这个信道可以发送任何数据,而不需要经过服务器。并且WebRTC通过实现MediaStream,通过浏览器调用设备的摄像头、话筒,使得浏览器之间可以传递音频和视频。

二、浏览器兼容

可以在浏览器打开网址: https://html5test.com/ 来测试浏览器对WebRTC的支持情况:
三、应用场景
WebRTC的点对点方式能够运用在很多场景:
社交平台,如视频聊天室应用
远程实时监控
远程学习,如在线教育、在线培训
远程医疗,如在线医疗
人力资源和招聘,如在线面试
会议和联系中心之间的协作,如客户服务、呼叫中心
Web IM,如web qq
游戏娱乐,如双人对战游戏(如象棋这种双人对战游戏,每一步的数据服务器时不关心的,所以完全可以点对点发送)
屏幕共享
人脸检测识别
虚拟现实
市场调研
金融服务
其它即时通信业务

四、 直播领域所用协议的现状及其优缺点比较

协议
优点
缺点
HTTP FLV
实时性和RTMP相等; 相比于RTMP省去了一些协议交互时间,首屏时间更短,可拓展的功能更多; 将RTMP封装在HTTP协议之上的,可以更好的穿透防火墙等
不支持双向互动;目前在网页上只能用flash或者插件的方式解码播放,而且flash在cpu和内存上都是占用很高。
RTMP
(实时消息传输协议)
CDN 支持良好,主流的 CDN 厂商都支持;协议简单,在各平台上实现容易,PC flash原生支持;支持双向互动;实时性很好;防HTTP下载。
基于TCP,传输成本高,在弱网环境丢包率高的情况下问题显著;不支持浏览器推送;Adobe 私有协议,Adobe已经不再更新; 需要访问1935端口,国内网络情况的恶劣程度,并不是每个网络防火墙都允许1935包通过;目前在网页上只能用flash或者插件的方式解码播放,而且flash在cpu和内存上都是占用很高。
HLS
(HTTP Live Streaming)
跨平台,支持度高,H5浏览器支持比较好,可以直接打开播放;IOS、安卓原生支持;技术实现简单。
延迟性比较大。
WebRTC
W3C 标准,主流浏览器支持程度高;Google 在背后支撑,并在各平台有参考实现;底层基于 SRTP 和 UDP,弱网情况优化空间大;可以实现点对点通信,通信双方延时低。
传统CDN没有ICE、STUN、TURN及类似的服务提供。

五、 WebRTC 的核心组件
音视频引擎:OPUS、VP8 / VP9、H264
传输层协议:底层传输协议为 UDP
媒体协议:SRTP / SRTCP
数据协议:DTLS / SCTP
P2P 内网穿透:STUN / TURN / ICE / Trickle ICE
信令与 SDP 协商:HTTP / WebSocket / SIP、 Offer Answer 模型
六、WebRTC架构图

架构图颜色标识说明:
(1)紫色部分是Web开发者API层;
(2)蓝色实线部分是面向浏览器厂商的API层(也就是红色框标内模块);
(3)蓝色虚线部分浏览器厂商可以自定义实现。
将WebRTC架构图分解为内部结构简化图和协议栈后如下:
WebRTC内部结构
图1为 WebRTC 内部结构简化图,最底层是硬件设备,上面是音频捕获模块和视频捕获模块。中间部分为音视频引擎。音频引擎负责音频采集和传输,具有降噪、回声消除等功能。视频引擎负责网络抖动优化,互联网传输编解码优化。在音视频引擎之上是 一套 C++ API,在 C++ 的 API 之上是提供给浏览器的Javascript API。
图2是 WebRTC 涉及到的协议栈,WebRTC 核心的协议都是在右侧基于 UDP 基础上搭建起来的。其中:
ICE、STUN、TURN 用于内网穿透, 解决了获取与绑定外网映射地址,以及 keep alive 机制。DTLS 用于对传输内容进行加密,可以看做是 UDP 版的 TLS。由于 WebRTC 对安全比较重视,这一层是必须的。
SRTP 与 SRTCP 是对媒体数据的封装与传输控制协议。
SCTP 是流控制传输协议,提供类似 TCP 的特性,SCTP 可以基于 UDP 上构建,在 WebRTC 里是在 DTLS 协议之上。
RTCPeerConnection 用来建立和维护端到端连接,并提供高效的音视频流传输。
RTCDataChannel 用来支持端到端的任意二进制数据传输。
七、WebRTC浏览器API
WebRTC实现了多个Web API接口,其中三个重要的Web API分别是:
MediaStream:通过MediaStream的API能够通过设备的摄像头及话筒获得视频、音频的同步流。
RTCPeerConnection:RTCPeerConnection是WebRTC用于构建点对点之间稳定、高效的流传输的组件。
RTCDataChannel:RTCDataChannel使得浏览器之间(点对点)建立一个高吞吐量、低延时的信道,用于传输任意数据。
这里大致介绍一下这三个API
2. MediaStream (aka getUserMedia)
MediaStream API为WebRTC提供了从设备的摄像头、话筒获取视频、音频流数据的功能.
3. W3C标准
详见:https://w3c.github.io/mediacapture-main/getusermedia.html
4. 如何调用?
可以通过navigator.getUserMedia()这个方法来调用,这个方法接受三个参数:
一个约束对象(constraints object),这个后面会单独讲。
一个调用成功的回调函数,如果调用成功,传递给它一个流对象。
一个调用失败的回调函数,如果调用失败,传递给它一个错误对象。

八、测试demo>

GetUserMedia实例

备注:https://showmecode.jd.com/hr (https://coding.jd.com/geek-team/geek-serve.git) 九、WebRTC服务提供商: 国外: https://xirsys.com https://tokbox.com/developer/ https://cloud.aculab.com/documents/webrtcdemo https://www.twilio.com/webrtc http://www.frafos.com/webrtc/ http://www.sightcall.com/ 国内: 声网:https://www.agora.io/cn/ 融云:http://www.rongcloud.cn/ 亲加云:http://www.gotye.com.cn/ 环信:https://www.easemob.com/ 野狗通信云:https://www.wilddog.com/

十、参考资料
https://webrtc.org/
https://www.w3.org/TR/webrtc/
https://github.com/bovinphang/WebRT
https://github.com/Tinywan/WebRTC-tutorial