判断浏览器摄像头被禁用

Question

环境：
通过<input type="file" accept="image/*" /> 调用摄像头，配合onchange事件实现图片压缩上传。

需求：
在用户禁用浏览器调用相机权限时，提示用户开启权限。

问题：
如何判断浏览器被禁止调用摄像头？

Answer 1

既然没有人来回答，我就先在这里抛砖引玉。下面所描述的现象是在微信内置浏览器环境

[navigator.mediaDevices.getUserMedia]

作用： 会弹出是否允许调用摄像头的对话框
优点： 可以捕获到用户调用媒体是否成功
缺点：

1. 不兼容ios
2. 弹出是否允许调用摄像头的对话框不能自定义或者隐藏

下面是项目中代码

// html

<input type="file" accept="image/* captuer="camera" id="upImg">

// js

document.getElementById('upImg').addEventListener('click', clickHandle, false);
document.getElementById('upImg').addEventListener('click', changeHandle, false);

var changeHandle = function() {
 // 进行图片压缩与上传
}

var clickHandle = function() {
  if(navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
  }

  if(navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function(constraints) {
      var getUserMedia = (navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia);
    if(!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this 
    browser'));
  }

    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
    }
  }
  // 如果用户许可，调用then，如果用户拒绝或者出错调用catch
  navigator.mediaDevices.getUserMedia(constraints).then(()=>{
    // 当用户点击对话框中允许调用相机按钮执行的事件
  }).catch(()=>{
    // 当用户点击对话框中禁止按钮，或者其他错误
  })
}

现在的状况就是，当相机权限禁止，不会弹出对话框，会执行catch事件。当相机权限打开，会弹出对话框，点击禁止，会执行catch

以上内容参考于
MediaDevices.getUserMedia()
Detecting Camera Permission Dialog in Browser