JS调用本地设备

JS 允许通过 navigator.mediaDevices.getUserMedia(options) 直接调用本地的设备，比如麦克风，摄像头等。因为该操作涉及到用户隐私，所以调用的时候会弹框请求权限。

该操作返回一个 Promise 对象，如果调用成功，会resolve 并返回一个 MediaStream 对象给回调函数：

 const options = {
     audio: true //调用本地麦克风
     video: true //调用本地摄像头
 }
 navigator.mediaDevices.getUserDevice(options).then(stream => {
    audio.srcObject = stream;
    audio.onloadedmetadata = () => {
        audio.play();
    }
 })

如果用户拒绝使用麦克风或者摄像头权限，则会reject该请求：

 navigator.mediaDevices.getUserDevice(options).then(stream => {
     ...
 }).catch(error => {
    // 如果用户拒绝权限请求，或者找不到对应的设备，会被catch到
 })

当使用摄像头的时候，还可以自定义相机的分辨率：

 const options = {
     video: {
         width: 1280,
         height: 720
     }
 }

也可以通过指定min、max、ideal 来设置最小、最大以及理想的分辨率，但是需要注意的是如果满足该参数，比如摄像头的最大分辨率是1280*760，但此时设置的height 属性最小分辨率为730，就会抛出 OverconstrainedError ，所以设置自定义参数的时候需要考虑设备是否能满足。

此时有人可能会问，如果我有多个摄像头，对，就是说手机，那调用的是哪一个呢？

当我们指定video的ideal属性的时候，这个优先级最高，系统会默认寻找最接近该值的摄像头。但是我们也可以自己指定手机上是使用前置还是后置的摄像头：

 const isUseFront = true;
 const options = {
     video: {
         facingMode: isUseFront ? 'user' : 'environment'
     }
 }

需要注意的是不是所有的浏览器都支持该API，比如反人类的IE，所以使用的时候还是需要考虑到兼容性的问题。

该API只能通过获取设备使用权，但是无法获取到具体的数据，比如音频数据。当我们需要实时获取到音频输入数据并进行对应操作的时候，这个API还无法满足我们的需求，这时候就需要另一个API：AudioContext 来对音频数据进行操作。对于AudioContext，目前还处于学习阶段，过段时间会有后续更新，敬请期待！