随着互联网高速发展,以及即将到来的5G时代,WebRTC作为前端互动直播和实时音视频的利器,也是将前端开发者们不可错过的学习领域。如果你现在只是听过而已,那你可能要好好学习一番。
1、什么是WebRTC?
WebRTC 全称是(Web browsers with Real-Time Communications (RTC)
大概2011年,谷歌收购了 GIPS,它是一个为 RTC 开发出许多组件的公司,例如编解码和回声消除技术。Google 开源了 GIPS 开发的技术,并希望将其打造为行业标准。
收购花了一大笔钱,谷歌说开源就开源,确实不得不佩服,但显然对于Googl来说,打造音视频的开源生态有着更大的价值。“浏览器 + WebRTC”就是 Google 给出的一个答案。其愿景就是可以在浏览器之间快速地实现音视频通信。
发展至今日,简单来说:WebRTC是一个免费、开放的项目。使web浏览器通过简单的JavaScript api接口实现实时通信功能。
2、WebRTC与架构
一般谈WebRTC架构都会拿出这张图,WebRTC从上往下架构依次是:
Web API层:面向开发者提供标准API(javascirpt),前端应用通过这一层接入使用WebRTC能力。
C++ API层:面向浏览器开发者,使浏览器制造商能够轻松地实现Web API方案。
音频引擎(VoiceEngine):音频引擎是一系列音频多媒体处理的框架,包括从视频采集卡到网络传输端等整个解决方案。
-
iSAC/iLBC/Opus等编解码。
-
NetEQ语音信号处理。
-
回声消除和降噪。
视频引擎(VideoEngine): 是一系列视频处理的整体框架,从摄像头采集视频、视频信息网络传输到视频显示整个完整过程的解决方案。
-
VP8编解码。
-
jitter buffer:动态抖动缓冲。
-
Image enhancements:图像增益。
传输(Transport):传输 / 会话层,会话协商 + NAT穿透组件。
-
RTP 实时协议。
-
P2P传输 STUN+TRUN+ICE实现的网络穿越。
硬件模块:音视频的硬件捕获以及NetWork IO相关。
3、WebRTC的重要的类和API
Network Stream API
3.1 MediaStream(媒体流)和 MediaStreamTrack(媒体轨道)
这个类并不完全属于WebRTC的范畴,但是在本地媒体流获取,及远端流传到vedio标签播放都与WebRTC相关。 MS 由两部分构成: MediaStreamTrack 和 MediaStream。
-
MediaStreamTrack 媒体轨,代表一种单类型数据流,可以是音频轨或者视频轨。
-
MediaStream 是一个完整的音视频流。它可以包含 >=0 个 MediaStreamTrack。它主要的作用就是确保几个媒体轨道是同步播放。
3.2 Constraints 媒体约束
关于MediaStream,还有一个重要的概念叫做: Constraints(约束)。它是用来规范当前采集的数据是否符合需要,并可以通过参数来设置。
// 基本
const constraint1 = {
"audio": true, // 是否捕获音频
"video": true // 是否捕获视频
}
// 详细
const constraint2 = {
"audio": {
"sampleSize": 8,
"echoC