Web前端的WebRTC攻略（一）基础介绍

随着互联网高速发展，以及即将到来的5G时代，WebRTC作为前端互动直播和实时音视频的利器，也是将前端开发者们不可错过的学习领域。如果你现在只是听过而已，那你可能要好好学习一番。

什么是WebRTC？

WebRTC 全称是（Web browsers with Real-Time Communications (RTC)

大概2011年，谷歌收购了 GIPS，它是一个为 RTC 开发出许多组件的公司，例如编解码和回声消除技术。Google 开源了 GIPS 开发的技术，并希望将其打造为行业标准。

收购花了一大笔钱，谷歌说开源就开源，确实不得不佩服，但显然对于Googl来说，打造音视频的开源生态有着更大的价值。“浏览器 + WebRTC”就是 Google 给出的一个答案。其愿景就是可以在浏览器之间快速地实现音视频通信。

发展至今日，简单来说：WebRTC是一个免费、开放的项目。使web浏览器通过简单的JavaScript api接口实现实时通信功能。

---

WebRTC与架构

一般谈WebRTC架构都会拿出这张图，WebRTC从上往下架构依次是：

Web API层：面向开发者提供标准API（javascirpt），前端应用通过这一层接入使用WebRTC能力。

C++ API层：面向浏览器开发者，使浏览器制造商能够轻松地实现Web API方案。

音频引擎（VoiceEngine）：音频引擎是一系列音频多媒体处理的框架，包括从视频采集卡到网络传输端等整个解决方案。

1. iSAC/iLBC/Opus等编解码。
2. NetEQ语音信号处理。
3. 回声消除和降噪。

视频引擎（VideoEngine）： 是一系列视频处理的整体框架，从摄像头采集视频、视频信息网络传输到视频显示整个完整过程的解决方案。

1. VP8编解码。
2. jitter buffer：动态抖动缓冲。
3. Image enhancements：图像增益。

传输（Transport)：传输 / 会话层，会话协商 + NAT穿透组件。

1. RTP 实时协议。
2. P2P传输 STUN+TRUN+ICE实现的网络穿越。

硬件模块：音视频的硬件捕获以及NetWork IO相关。

---

WebRTC的重要的类和API

Network Stream API

1.MediaStream（媒体流）和 MediaStreamTrack（媒体轨道）

这个类并不完全属于WebRTC的范畴，但是在本地媒体流获取，及远端流传到vedio标签播放都与WebRTC相关。 MS 由两部分构成： MediaStreamTrack 和 MediaStream。

• MediaStreamTrack 媒体轨，代表一种单类型数据流，可以是音频轨或者视频轨。
• MediaStream 是一个完整的音视频流。它可以包含 >=0 个 MediaStreamTrack。它主要的作用就是确保几个媒体轨道是同步播放。

2.Constraints 媒体约束

关于MediaStream，还有一个重要的概念叫做: Constraints（约束）。它是用来规范当前采集的数据是否符合需要，并可以通过参数来设置。

// 基本
const constraint1 = {
    "audio": true,  // 是否捕获音频
    "video": true   // 是否捕获视频
}

// 详细
const constr