如何让JavaScript设备摄像头访问代码兼容多浏览器及移动端？

我来帮你搞定这个跨平台兼容性问题！你的现有代码存在几个不符合现代Web标准的细节，导致只能在特定浏览器生效。下面是优化后的完整实现方案：

核心问题分析 #

你的代码里用到的vendorUrl.createObjectURL(stream)已经被Web标准弃用，现代浏览器（包括移动端）都推荐直接用srcObject属性绑定媒体流。另外还有几个容易被忽略的兼容性要点：

• 部分旧浏览器需要API前缀兼容处理
• 移动端和现代桌面浏览器（除本地开发环境）强制要求HTTPS协议
• 移动端必须通过用户主动交互（比如点击按钮）触发权限请求，不能自动执行

优化后的兼容代码 #

function startCamera() {
  const video = document.getElementById('video');
  
  // 处理媒体设备API的兼容前缀
  navigator.mediaDevices = navigator.mediaDevices || 
    ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
      getUserMedia: function(constraints) {
        return new Promise(function(resolve, reject) {
          (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, constraints, resolve, reject);
        });
      }
    } : null);

  // 检查浏览器是否支持媒体设备API
  if (!navigator.mediaDevices) {
    alert('当前浏览器不支持摄像头访问功能');
    return;
  }

  // 请求摄像头和麦克风权限
  navigator.mediaDevices.getUserMedia({ 
    video: true, 
    audio: true 
  })
  .then(function(stream) {
    // 现代浏览器直接使用srcObject绑定流，替代已弃用的createObjectURL
    if ('srcObject' in video) {
      video.srcObject = stream;
    } else {
      // 兼容极少数旧浏览器的降级方案
      video.src = window.URL.createObjectURL(stream);
    }
    video.play().catch(err => {
      console.error('视频播放失败:', err);
      alert('无法启动视频播放，请检查浏览器权限设置');
    });
  })
  .catch(function(err) {
    // 更详细的错误提示，方便调试和用户排查
    console.error('摄像头访问失败:', err);
    switch(err.name) {
      case 'NotAllowedError':
        alert('你拒绝了摄像头/麦克风权限，请在浏览器设置中开启');
        break;
      case 'NotFoundError':
        alert('未检测到可用的摄像头或麦克风设备');
        break;
      default:
        alert('摄像头访问出错: ' + err.message);
    }
  });
}

// 必须绑定到用户点击事件，满足移动端权限触发要求
document.getElementById('startBtn').addEventListener('click', startCamera);

关键注意事项 #

• HTTPS要求：除了本地开发的localhost，上线环境必须使用HTTPS协议，否则现代浏览器（包括移动端）会直接拒绝摄像头权限请求
• 用户交互触发：移动端浏览器禁止自动调用摄像头权限，必须让用户主动点击按钮等操作来触发startCamera函数
• 视频元素配置：确保HTML中的<video>元素添加playsinline属性（移动端需要），并设置合适的宽高：

<video id="video" width="640" height="480" playsinline></video>
<button id="startBtn">启动摄像头</button>

• 错误处理优化：替换原来简单的alert("no")，根据不同错误类型给出针对性提示，帮助用户快速定位问题

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