Search code examples
htmlcsswebrtchtml5-video

Black rectangle behind <video> element

I'm using navigator.mediaDevices.getUserMedia and displaying the local media with a <video> element. It works fine, except on my iPhone I see a black rectangle behind the video. How can I hide/remove the black rectangle?

Some things I've tried:

  • Adjusting size of the video element
  • background: transparent and background-color: transparent
  • overflow: hidden

But none worked. My iPhone is running iOS 15.0.2, but it was happening on iOS 14 as well.

black rectangle ios

Full source:

<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>
Solution

  • This is likely a known regression in iOS 15.0 which is fixed in 15.1: https://bugs.webkit.org/show_bug.cgi?id=229792