iOS设备<video>调用getUserMedia时背景出现黑色矩形如何解决

问题根因 #

该黑色块是iOS Safari WebKit内核针对video元素的默认渲染占位问题，你尝试的修改背景、调整尺寸、设置overflow没有命中核心触发逻辑。

可行修复方案 #

1. 新增object-fit属性适配容器

强制视频内容按你设定的尺寸填充video容器，避免多余占位区域渲染为黑色：

#localVideo {
  /* 按需选择属性值：cover裁剪多余部分撑满容器，contain完整显示视频不裁剪 */
  object-fit: cover;
  background: none !important;
}

2. 显式约束宽高避免自动计算溢出

你当前代码仅指定了video的宽度为150，未设置高度，iOS会默认按照采集到的视频流比例（通常为4:3/16:9）计算高度，超出预期的区域就会显示黑色，可通过外层容器约束尺寸：

<div style="width: 150px; height: 150px; overflow: hidden;">
  <video autoplay playsinline muted id="localVideo" style="width: 100%; height: 100%;"></video>
</div>

3. 开启GPU加速规避渲染异常

部分iOS版本的WebKit渲染video时存在图层异常，强制开启GPU渲染即可解决：

#localVideo {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

修复后的完整代码 #

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .video-wrap {
            width: 150px;
            height: 150px;
            overflow: hidden;
        }
        #localVideo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: none !important;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    </style>
    <script>
        window.addEventListener('load', async () => {
            try {
                const localVideo = document.getElementById('localVideo');
                localVideo.srcObject = await navigator.mediaDevices.getUserMedia({video: true});
            } catch {
                alert('Please allow camera and microphone access.');
            }
        });
    </script>
</head>
<body>
    <div class="video-wrap">
        <video autoplay playsinline muted id="localVideo"></video>
    </div>
</body>
</html>

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