<video> 元素后面的黑色矩形

Question

我正在使用 navigator.mediaDevices.getUserMedia 并使用 <video> 元素显示本地媒体。它工作正常，除了在我的 iPhone 上，我看到视频后面有一个黑色矩形。我怎样才能 hide/remove 黑色矩形？

我尝试过的一些事情：

正在调整视频元素的大小
background: transparent 和 background-color: transparent
overflow: hidden

但是 none 奏效了。我的 iPhone 是运行 iOS 15.0.2，但它也在 iOS 14 上发生。

完整来源：

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    <video autoplay playsinline muted id="localVideo" width=150></video>
</body>

</html>

Answer 1

这可能是 iOS 15.0 中的一个已知回归，它已在 15.1 中修复： https://bugs.webkit.org/show_bug.cgi?id=229792

<video> 元素后面的黑色矩形

Black rectangle behind <video> element

html

css

webrtc

html5-video