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

我正在使用 navigator.mediaDevices.getUserMedia 以及用 <video> 要素它工作得很好,只是在我的iPhone上,我看到视频后面有一个黑色矩形。如何隐藏/删除黑色矩形?

我尝试过的一些事情:

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

但没有一个奏效。我的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>