Day10 获取摄影机及麦克风的访问权限

上一篇我们使用 getUserMedia 来获取使用者装置权限，不过他的实际功能如其名，是用来取得使用者的媒体流(Media stream)，里面包含了要求的影音轨(Track)。

语法

var promise = navigator.mediaDevices.getUserMedia(constraints);

如果 getUserMedia 成功(使用者允许使用权限)则可以通过 Promise 获得 MediaStream 物件，也就是说我们可以从使用者的镜头、麦克风取得影音的资料了！

若是使用者拒绝我们访问设备或是访问的设备不可使用则 reject 返回 PermissionDeniedError 或 NotFoundError 等错误。

参数

从刚刚的语法中可以看到， getUserMedia 需要带入一个参数 constraints ，其中包含 video 及 audio ，这个结构可以指定我们要收集音讯或是视讯，例如只收集视讯：

const contrains = {
    video: true,
    audio: false
};

难道只有这样？

不！我们还可以通过更进阶的条件(MediaTrackConstraints)去设定，例如我们的应用是上音乐课视讯可能较不重要：

const contrains = {
  video: {
    frameRate: 15,
    width: 640,
    height: 360,
  },
  audio: {
    noiseSuppression: false,
    autoGainControl: false
  }
};

视讯的 FPS 设定为15，宽高设定为 640 x 360，为了收集乐器的声音关闭噪音消除及自动增益的功能。

安全

作为可能涉及重大隐私问题的 API，通过 MediaDevices.getUserMedia() 取得使用者媒体权限时，只有以下情况会成功：

1. 使用 localhost
2. 使用 HTTPS 保护的网域
3. 使用 file:// 协议打开的文件

其他情况会失败回传 undefined。