iPhone浏览器Webcam无画面问题：适配苹果设备代码求助

针对你遇到的苹果设备（iOS/macOS Safari）上摄像头黑屏问题，以下是修复后的代码及关键修改说明：

修复后的完整代码 #

<!-- 先确保video元素配置必要属性 -->
<video id="cameraVideo" playsinline autoplay muted></video>
<button id="startCamera">启动摄像头</button>

<script>
const constraints = {
  video: {
    facingMode: 'user' // 可选：明确指定前置摄像头，可改为'environment'使用后置
  }
};

const video = document.getElementById('cameraVideo');
const startBtn = document.getElementById('startCamera');

async function startCamera() {
  try {
    // 检查浏览器支持情况
    if (!navigator.mediaDevices?.getUserMedia) {
      throw new Error('当前浏览器不支持摄像头访问');
    }

    // 请求摄像头权限并获取流
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    
    // 处理srcObject兼容性
    if ('srcObject' in video) {
      video.srcObject = stream;
    } else {
      // 旧版Safari回退方案
      video.src = window.URL.createObjectURL(stream);
    }

    // 确保视频加载完成后播放
    video.onloadedmetadata = () => {
      video.play().catch(err => console.error('视频播放失败:', err));
    };
  } catch (err) {
    console.error('摄像头访问出错:', err.message);
    alert(`无法启动摄像头: ${err.message}`);
  }
}

// 必须通过用户交互触发权限请求
startBtn.addEventListener('click', startCamera);
</script>

关键修改点说明 #

• 视频元素属性配置
  • playsinline：强制视频在页面内播放，避免苹果设备默认的全屏播放行为，这是导致黑屏的常见原因之一
  • autoplay + muted：满足Safari的自动播放政策，无用户交互时，静音视频才能自动播放；若不需要静音，可移除muted但必须在用户交互中调用video.play()
• 用户交互触发权限
  • Safari严格禁止页面加载时自动请求媒体权限，必须在用户主动触发的事件（如点击、触摸）中调用getUserMedia，否则权限会被拦截，导致无视频流输出
• 兼容性优化
  • 简化了媒体设备API的处理，现代浏览器已支持标准navigator.mediaDevices.getUserMedia，无需复杂的前缀兼容
  • 增加srcObject的回退方案，适配部分旧版Safari的流加载方式
• 错误捕获
  • 添加try-catch捕获权限拒绝、设备不支持等异常，方便快速定位问题

额外排查要点 #

1. 确保网站使用HTTPS协议（localhost除外），Safari仅允许安全环境下访问摄像头
2. 检查设备权限：iOS可在「设置->Safari->网站权限」中确认已授权目标网站访问摄像头
3. 避免在iframe中测试：部分场景下iframe会限制媒体权限访问

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