iOS 11.3版Chrome中getUserMedia无法获取媒体流问题求助

我之前开发扫码Web应用时也碰到过这个头疼的问题——明明Android Chrome和iOS Safari都正常运行，唯独iOS Chrome掉链子。其实iOS Chrome基于Safari的WebKit内核，但在媒体权限和播放触发逻辑上有特殊限制，你可以试试下面这些针对性方案：

• 精准配置媒体约束
  扫码通常依赖后置摄像头，明确指定facingMode能避免iOS Chrome自动选择前置摄像头的问题；同时关闭不需要的音频权限，减少权限请求的干扰：

  const constraints = {
    video: {
      facingMode: 'environment', // 强制使用后置摄像头
      width: { ideal: 1280 },
      height: { ideal: 720 },
      aspectRatio: 1.77777778 // 可选，保持16:9比例适配扫码框
    },
    audio: false // 不需要音频就明确关闭，避免权限冲突
  };
  

• 确保播放触发来自用户主动交互
  iOS系浏览器（包括Chrome）对自动播放的限制非常严格，video.play()必须由用户的主动操作（比如点击、触摸）触发，不能在页面加载时自动执行。你可以绑定一个按钮来启动扫码流程：

  // 假设页面有个id为start-scan的启动按钮
  document.getElementById('start-scan').addEventListener('click', async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      const video = document.getElementById('scan-video');
      
      // 直接设置DOM属性，比setAttribute更可靠
      video.autoplay = true;
      video.muted = true;
      video.playsinline = true;
      video.controls = false;
  
      video.srcObject = stream;
      
      // 监听元数据加载完成后再播放，避免播放失败
      video.addEventListener('loadedmetadata', async () => {
        try {
          await video.play();
          console.log('视频流已成功启动');
        } catch (playErr) {
          console.error('播放失败:', playErr);
        }
      });
    } catch (mediaErr) {
      console.error('获取媒体设备失败:', mediaErr);
      // 根据错误类型给用户直观提示
      switch(mediaErr.name) {
        case 'PermissionDeniedError':
          alert('请开启摄像头权限后重试');
          break;
        case 'NotFoundError':
          alert('未检测到可用摄像头');
          break;
      }
    }
  });
  

• 替换setAttribute为直接赋值DOM属性
  你之前用setAttribute的方式可能无法被iOS Chrome正确识别，直接给video元素的DOM属性赋值更稳妥，比如video.playsinline = true这种写法，比setAttribute('playsinline', '')的兼容性更好。

• 确认运行环境为HTTPS
  iOS Chrome要求getUserMedia必须在HTTPS环境下运行（localhost除外），如果你的应用在HTTP环境下，摄像头权限会被直接拒绝，导致视频流无法加载。

• 通过错误捕获定位具体问题
  一定要保留错误捕获逻辑，这样能快速区分是权限被拒、设备不可用还是浏览器不支持，方便针对性排查。

这些方案组合起来应该能解决iOS Chrome上的视频流问题，我当时就是靠调整播放触发时机和约束配置搞定的。

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