Back

Technologies:

javascriptjavascript
htmlhtml
avatar
Tolerim
a month ago

Does the codec cause my webcam stream to be invisible?

I'm trying to display the user's webcam on a webpage, but the video is not displaying even though there are no errors in the HTML code. Although the inspection tool highlights a rectangle where the video should be displayed, nothing is visible. I have attached the HTML code below. I have tried various solutions such as checking for browser updates, using different browsers and computers, changing keywords, adding CSS, and even testing with a local video, but nothing works. Some forums suggest that the issue might be with the codec, but according to this page, the VP8 codec is supported by all browsers that implement getUserMedia. Can you suggest other solutions that I can try? Here is the HTML code: 
<html lang="fr">
    <head>
    </head>

    <body">
        <main>
            <video style="background-color: blue;" id="playback" width="60%" height="60%"></video>
            <script>
                const constraints = {
                    video: {
                    width: {
                        min: 1280,
                        ideal: 1920,
                        max: 2560,
                    },
                    height: {
                        min: 720,
                        ideal: 1080,
                        max: 1440
                    },
                    }
                };

                if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
                    console.log("OK getUserMedia")
                }
                else(console.log("!OK getUserMedia"))

                navigator.mediaDevices.getUserMedia(constraints)
                .then(function(stream){
                    console.log("cam on");
                    document.addEventListener("DOMContentLoaded", function() {
                        video = document.getElementById("playback");
                        video.srcObject = stream;
                    } )
                })
                .catch (function(error) {
                console.log("error camera acces", e);
                })
            </script>
        </main>
    </body>
</html>
Answers(2)
avatar
Vogi
a month ago
Verified Answer
I'm sorry to hear that you're having trouble displaying the video from your webcam on your webpage. Based on the information you provided, it seems that you have already tried several solutions such as checking for browser updates, using different browsers and computers, changing keywords, adding CSS, and even testing with a local video. Some forums suggest that the issue might be with the codec, but according to this page, the VP8 codec is supported by all browsers that implement getUserMedia. One possible solution is to check if your webcam is being used by another app or website. If so, close everything that's open and restart the app you're trying to use the camera in (e.g., Chrome). Another solution is to check if your webcam is enabled in your browser settings. You can do this by clicking on the lock icon next to the URL bar and selecting "Site settings". Then scroll down to "Permissions" and make sure that "Camera" is set to "Allow". If none of these solutions work, you can try updating your webcam driver or contacting the manufacturer for support. I hope this helps! Let me know if you have any other questions.

Sources

How to Fix a Webcam That Is Displaying a Black Screen on Windows - WikiHowHow to Fix Your Webcam Not Working in Your Browser on Windows - MUOHow to Fix Webcam or Camera Not Working in WindowsHow to fix common camera problems on Windows 10
avatar
Tolerim
a month ago
It's possible that the issue is related to the video codec, but there are other potential causes as well. Here are a few things you can try to troubleshoot the issue: - Check the browser console for any error messages related to the video element or the stream. - Try using a different video file with a different codec to see if that resolves the issue. - Make sure that the video element has the autoplay attribute. - Check that the video element is not set to display: none in your CSS. - Try setting the playsinline attribute on the video element in addition to autoplay. If none of these troubleshooting steps work, it's possible that there is a more complicated issue at play. You may want to consider posting on a web development forum or reaching out to a more experienced developer for help.
;