如何让navigator.mediaDevices.getUserMedia({video:true})在移动端生效？

架构老林

2026-7-10

iPhone Safari 相机视频无法渲染问题解决

针对你在iPhone 12/15上遇到的相机权限正常但视频无法渲染的问题，这是Safari iOS的特定媒体播放限制导致的，以下是修改方案：

核心问题原因

Safari iOS对媒体自动播放有严格限制，同时需要特定属性才能让视频内联渲染，即使已获取相机权限也需要满足这些条件。

修改后的代码

HTML（添加关键属性）

<p>Video thing</p>
<video autoplay muted playsinline></video>

muted：Safari要求静音媒体才能自动播放，这是iOS自动播放策略的强制要求
playsinline：强制视频在页面内渲染，避免触发iOS全屏播放器
autoplay：使用无值属性写法，符合HTML标准

JavaScript（优化流约束与播放逻辑）

navigator.mediaDevices.getUserMedia({ 
  video: { 
    facingMode: 'user', // 指定前置摄像头，可按需改为'environment'使用后置
    width: { ideal: 1280 },
    height: { ideal: 720 }
  }
})
.then(function (stream) {
  const videoElement = document.querySelector('video');
  videoElement.srcObject = stream;
  
  // 监听元数据加载，确保播放时机正确
  videoElement.addEventListener('loadedmetadata', () => {
    videoElement.play().catch(err => console.log('播放失败:', err));
  });
})
.catch(function (error) {
  alert(error);
  console.error('相机访问错误:', error);
});

明确视频流约束：指定摄像头方向和理想分辨率，提升iOS设备兼容性
添加loadedmetadata监听：确保视频元数据加载完成后再尝试播放，避免时序问题

CSS（优化背景显示效果）

video {
  position: fixed; /* 作为背景时使用fixed定位铺满屏幕 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  object-fit: cover; /* 保持视频比例，避免拉伸变形 */
}

p {
  color: red;
  position: relative; /* 让文字显示在视频上层 */
  z-index: 1;
  padding: 1rem;
}