这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

先看定义！

WebRTC是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点的数据分享和电话会议成为可能。

这是一个比较底层的浏览器API，并且各家浏览器支持度还有实现方法并不相同

相比较传统的，两个用户通过服务器传输数据的方法，webrtc可以不借助服务器，在浏览器直接建立一个联系。

webrtc有三种常用的数据结构：

MediaStream: 音视频流的获取
RTCPeerConnection: 音视频数据的通信
RTCDataChannel: 除音视频数据之外的任何其它数据

先来看第一种吧

MediaStream

既然还是音视频流的获取，就要涉及到摄像头和麦克风了

我们用navigator.mediaDevices.getUserMedia方法来从浏览器获取音视频流。这个方法返回一个Promise，在执行的时候，会向用户索要权限，如果用户小里小气的不给或者设备不支持，就跟其他Promise一样执行reject，反之则resolve一个MediaStream。

这个方法的参数是一个对象，简便的写法是：

{ audio: true, video: true }

当然我们也可以对一些具体的参数进行配置，比如视频尺寸什么的：

{
  audio: true,
  video: {
    width: { min: 1024, ieda: 1280, max: 1920 },
    height: { min: 576, ideal: 720, max: 1080 },
    frameRate: { max: 60 }
  }
}

上面的意思是：视频宽度最小1024*576，最理想是1280*720，最大不能超过1920*1080

浏览器会优先使用满足条件的摄像头（比如有好几个摄像头的时候）

如果不满足上面的条件，会reject

frameRate用来描述帧率，使用受限带宽传输时，低帧率可能更适宜。

也可以用facingMode: "user" or "environment"来指定使用前置摄像头还是后置摄像头，facingMode: { exact: "user" or "environment" }来强制指定使用哪个摄像头（user是前置，environment是后置，两个二选一）

那来看个例子吧！

会索要摄像头权限和麦克风权限，记得通过一下（需要点右上角“在马上掘金”打开，掘金阅读这里这个小窗似乎不行）

WebRTC（一）MediaStream

MediaStream