iOS Safari下navigator.mediaDevices.getUserMedia无法启动摄像头问题求助

问题根因及修复方案 #

• 1. iOS Safari 对getUserMedia的调用有安全限制：必须由用户主动交互事件（如click/touchstart）触发，你当前代码是页面加载后自动执行的匿名异步函数，会被Safari静默拦截，无报错也不会返回媒体流，这是最核心的问题。
• 2. 设备ID获取逻辑存在语法错误：你使用findIndex筛选后置摄像头，该方法返回的是数组索引值（数字类型），而非设备对象，后续.deviceId取值必然为undefined，导致摄像头参数传入异常。
• 3. 未授权状态下设备信息为空：在用户未授予摄像头权限前，navigator.mediaDevices.enumerateDevices()返回的视频输入设备label字段为空，你通过label.includes("Back")匹配后置摄像头的逻辑在首次授权场景下完全失效。
• 4. 部分iOS版本要求带autoplay属性的video元素必须同时设置muted属性才能正常播放媒体流，即使你没开启音频轨道。

修复后的代码示例 #

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
  <title>getUserMedia to canvas</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <button id="startBtn">启动摄像头</button>
  <video playsinline autoplay muted></video>
  <script src="./index.js" ></script>
</body>
</html>

// index.js
const video = document.querySelector('video');
const startBtn = document.getElementById('startBtn');

startBtn.addEventListener('click', async () => {
  try {
    // 先请求基础摄像头权限，拿到授权后再枚举设备信息
    const tempStream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { width: 720 } });
    // 授权后枚举设备才能拿到正确的label字段
    const devices = (await navigator.mediaDevices.enumerateDevices()).filter(v => v.kind === 'videoinput');
    // 用find而非findIndex获取设备对象
    const backDevice = devices.find(v => v.label.includes("Back")) || devices[0];
    const stream = await navigator.mediaDevices.getUserMedia({ 
      audio: false, 
      video: { width: 720, deviceId: backDevice.deviceId } 
    });
    // 关闭临时申请的流
    tempStream.getTracks().forEach(track => track.stop());

    console.log(`stream: ${stream.id.substring(0, 4)}\nactive: ${stream.active}`);
    alert(`stream: ${stream.id.substring(0, 4)}\nactive: ${stream.active}`);
    
    video.srcObject = stream;
  } catch (err) {
    console.log(`err: ${err.name}: ${err.message}`);
    alert(`err: ${err.name}: ${err.message}`);
  }
});

如果不需要强制指定后置摄像头，可以简化逻辑，跳过设备枚举步骤，直接在video参数里指定facingMode: 'environment'调用后置摄像头，兼容性更好：

const stream = await navigator.mediaDevices.getUserMedia({ 
  audio: false, 
  video: { width: 720, facingMode: 'environment' } 
});

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