Web应用点击按钮检测客户端摄像头（适配IE）的最佳方法

嘿，我来帮你搞定这个摄像头检测的问题～你之前用的是旧版的getUserMedia API，不仅写法繁琐，而且对现代浏览器和IE的支持都不够友好，尤其是IE本身对媒体捕获的支持就很有限。下面给你一套更规范、兼容性更好的实现方式：

核心思路：优先用标准API，兼顾旧版兼容，单独处理IE #

现在W3C的标准API是navigator.mediaDevices.getUserMedia，它返回Promise，异步逻辑处理起来更清晰，而且现代浏览器基本都支持。同时我们也兼容老版本浏览器的前缀API，最后针对IE这种完全不支持的情况做降级提示。

完整代码实现 #

function checkCameraAvailability() {
  // 先检查是否支持标准API
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    return navigator.mediaDevices.getUserMedia({ video: true })
      .then(() => {
        // 能获取到视频流，说明有摄像头且用户授权了
        return true;
      })
      .catch(error => {
        // 捕获错误，区分是无设备还是用户拒绝
        if (error.name === 'NotFoundError') {
          console.log('未检测到摄像头设备');
        } else if (error.name === 'NotAllowedError') {
          console.log('用户拒绝了摄像头权限');
        }
        return false;
      });
  } else {
    // 兼容旧版浏览器的前缀API
    const getUserMedia = navigator.getUserMedia || 
                        navigator.webkitGetUserMedia || 
                        navigator.mozGetUserMedia || 
                        navigator.msGetUserMedia;
    
    if (getUserMedia) {
      return new Promise((resolve) => {
        getUserMedia.call(navigator, { video: true }, 
          () => resolve(true), 
          () => resolve(false)
        );
      });
    } else {
      // IE11及以下完全不支持，直接提示用户
      alert('你的浏览器不支持摄像头检测功能，请升级到Chrome、Edge或Firefox等现代浏览器');
      return Promise.resolve(false);
    }
  }
}

// 按钮点击调用示例
document.getElementById('checkCameraBtn').addEventListener('click', async () => {
  const hasCamera = await checkCameraAvailability();
  if (hasCamera) {
    // 这里写检测到摄像头后的逻辑
    console.log('摄像头可用！');
  } else {
    // 这里写无摄像头或权限被拒绝的逻辑
    console.log('摄像头不可用');
  }
});

几个关键细节： #

• 标准API优先：navigator.mediaDevices.getUserMedia是现在的主流写法，Promise异步比传统的回调更易维护，也不用像你原来那样手动.bind(this)。
• 错误区分：如果需要更精细的处理，可以通过错误的name属性判断是用户拒绝权限（NotAllowedError）还是真的没有摄像头（NotFoundError）。
• IE的特殊处理：IE11及更早的版本完全不支持媒体捕获API，所以只能提示用户升级浏览器，没有其他办法实现检测。
• 环境要求：摄像头检测必须在HTTPS环境下进行（本地localhost除外），现代浏览器会拦截HTTP下的媒体设备访问请求，这点一定要注意！
• 触发时机：一定要在用户主动点击按钮时再调用检测逻辑，不要在页面加载时自动执行，否则会被浏览器的权限拦截机制阻止。

内容的提问来源于stack exchange，提问作者Wakko