WebRTC 直播时代

1、前言

---

WebRTC 全称为：Web Real-Time Communication。它是为了解决 Web 端无法捕获音视频的能力，并且提供了 peer-to-peer（就是浏览器间）的视频交互。实际上，细分看来，它包含三个部分：

• MediaStream:捕获音视频流

• RTCPeerConnection:传输音视频流（一般用在 peer-to-peer 的场景）

• RTCDataChannel: 用来上传音视频二进制数据（一般用到流的上传）

但通常，peer-to-peer 的场景实际上应用不大。对比与去年火起来的直播业务，这应该才是 WebRTC 常常应用到的地方。那么对应于 Web 直播来说，我们通常需要两个端：

• 主播端：录制并上传视频

• 观众端：下载并观看视频

这里，我就不谈观众端了，后面另写一篇文章介绍（因为，这是在是太多了）。这里，主要谈一下会用到 WebRTC 的主播端。 简化一下，主播端应用技术简单可以分为：录制视频，上传视频。大家先记住这两个目标，后面我们会通过 WebRTC 来实现这两个目标。

2、WebRTC 基本了解

---

WebRTC 主要由两个组织来制定。

• Web Real-Time Communications (WEBRTC) W3C 组织：定义浏览器 API

• Real-Time Communication in Web-browsers (RTCWEB) IETF 标准组织：定义其所需的协议，数据，安全性等手段。

当然，我们初级目标是先关心基本浏览器定义的 API 是啥？以及怎么使用？ 然后，后期目标是学习期内部的相关协议，数据格式等。这样循序渐进来，比较适合我们的学习。

WebRTC 对于音视频的处理，主要是交给 Audio/Vidoe Engineering 处理的。处理过程为：

• 音频：通过物理设备进行捕获。然后开始进行降噪，消除回音，抖动/丢包隐藏，编码。

• 视频：通过物理设备进行捕获。然后开始进行图像增强，同步，抖动/丢包隐藏，编码。

最后通过 mediaStream Object 暴露给上层 API 使用。也就是说 mediaStream 是连接 WebRTC API 和底层物理流的中间层。所以，为了下面更好的理解，这里我们先对 mediaStream 做一些简单的介绍。

MediaStream

MS（MediaStream）是作为一个辅助对象存在的。它承载了音视频流的筛选，录制权限的获取等。MS 由两部分构成： MediaStreamTrack 和 MediaStream。

• MediaStreamTrack 代表一种单类型数据流。如果你用过会声会影的话，应该对轨道这个词不陌生。通俗来讲，你可以认为两者就是等价的。

• MediaStream 是一个完整的音视频流。它可以包含 >=0 个 MediaStreamTrack。它主要的作用就是确保几个轨道是同时播放的。例如，声音需要和视频画面同步。

这里，我们不说太深，讲讲基本的 MediaStream 对象即可。通常，我们使用实例化一个 MS 对象，就可以得到一个对象。

// 里面还需要传递 track，或者其他 stream 作为参数。

// 这里只为演示方便

letms=newMediaStream();

复制代码

我们可以看一下 ms 上面带有哪些对象属性：

• active[boolean]:表示当前 ms 是否是活跃状态（就是可播放状态）。

• id[String]: 对当前的 ms 进行唯一标识。例如：“f61641ec-ee78-4317-9415-58acac066a4d”

• onactive: 当 active 为 true 时，触发该事件

• onaddtrack: 当有新的 track 添加时，触发该事件

• oninactive: 当 active 为 false 时，触发该事件

• onremovetrack: 当有 track 移除时，触发该事件

它的原型链上还挂在了其他方法，我挑几个重要的说一下。

• clone(): 对当前的 ms 流克隆一份。该方法通常用于对该 ms 流有操作时，常常会用到。

前面说了，MS 还可以其他筛选的作用，那么它是如何做到的呢？ 在 MS 中，还有一个重要的概念叫做: Constraints。它是用来规范当前采集的数据是否符合需要。因为，我们采集视频时，不同的设备有不同的参数设置。常用的为：

{

"audio": true, // 是否捕获音频

"video": { // 视频相关设置

"width": {

"min": "381", // 当前视频的最小宽度

"max": "640"

},

"height": {

"min": "200", // 最小高度

"max": "480"

},

"frameRate": {

"min": "28", // 最小帧率

"max": "10"

}

}

}

那我怎么知道我的设备支持的哪些属性的调优呢？ 这里，可以直接使用 navigator.mediaDevices.getSupportedConstraints() 来获取可以调优的相关属性。不过，这一般是对 video 进行设置。了解了 MS 之后，我们就要开始真正接触 WebRTC 的相关 API。我们先来看一下 WebRTC 基本API。

WebRTC 的常用 API 如下，不过由于浏览器的缘故，需要加上对应的