WebRTC 全称为:Web Real-Time Communication。它是为了解决 Web 端无法捕获音视频的能力,并且提供了 peer-to-peer(就是浏览器间)的视频交互。实际上,细分看来,它包含三个部分: MediaStream:捕获音视频流RTCPeerConnection:传输音视频流(一般用在 peer-to-peer 的场景)RTCDataChannel: 用来上传音视频二进制数据(一般用到流的上传) 但通常,peer-to-peer 的场景实际上应用不大。对比与去年火起来的直播业务,这应该才是 WebRTC 常常应用到的地方。那么对应于 Web 直播来说,我们通常需要两个端: 主播端:录制并上传视频观众端:下载并观看视频 这里,我就不谈观众端了,后面另写一篇文章介绍(因为,这是在是太多了)。这里,主要谈一下会用到 WebRTC 的主播端。 简化一下,主播端应用技术简单可以分为:录制视频,上传视频。大家先记住这两个目标,后面我们会通过 WebRTC 来实现这两个目标。 WebRTC 基本了解 WebRTC 主要由两个组织来制定。 Web Real-Time Communications (WEBRTC) W3C 组织:定义浏览器 APIReal-Time Communication in Web-browsers (RTCWEB) IETF 标准组织:定义其所需的协议,数据,安全性等手段。 当然,我们初级目标是先关心基本浏览器定义的 API 是啥?以及怎么使用? 然后,后期目标是学习期内部的相关协议,数据格式等。这样循序渐进来,比较适合我们的学习。 WebRTC 对于音视频的处理,主要是交给 Audio/Vidoe Engineering 处理的。处理过程为:
![](https://i-blog.csdnimg.cn/blog_migrate/dd57639cedf411f0676fe04d22daf736.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/fec08f030d44b1e1c63ad7374f7ec91b.jpeg)
音频:通过物理设备进行捕获。然后开始进行降噪,消除回音,抖动/丢包隐藏,编码。视频:通过物理设备进行捕获。然后开始进行图像增强,同步,抖动/丢包隐藏,编码。 最后通过 mediaStream Object 暴露给上层 API 使用。也就是说 mediaStream 是连接 WebRTC API 和底层物理流的中间层。所以,为了下面更好的理解,这里我们先对 mediaStream 做一些简单的介绍。 MediaStream MS(MediaStream)是作为一个辅助对象存在的。它承载了音视频流的筛选,录制权限的获取等。MS 由两部分构成: MediaStreamTrack 和 MediaStream。 MediaStreamTrack 代表一种单类型数据流。如果你用过会声会影的话,应该对轨道这个词不陌生。通俗来讲,你可以认为两者就是等价的。MediaStream 是一个完整的音视频流。它可以包含 >=0 个 MediaStreamTrack。它主要的作用就是确保几个轨道是同时播放的。例如,声音需要和视频画面同步。 这里,我们不说太深,讲讲基本的 MediaStream 对象即可。通常,我们使用实例化一个 MS 对象,就可以得到一个对象。// 里面还需要传递 track,或者其他 stream 作为参数。 // 这里只为演示方便 let ms = new MediaStream();我们可以看一下 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": &