WebCam ISSUE on browser

0

Hi I want to use webcam using HTML by serving through flask (python) My approach is working on my pc but on EC2 when I access it using Public IPv4 DNS, it does not show video and gives error as

Code for html:

<!DOCTYPE html> <html> <head> <title>User Webcam Feed</title> </head> <body> <h1>Your Webcam Feed</h1> <video id="video" width="640" height="480" autoplay></video>
<script>
    // Check if getUserMedia is supported
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // Access user media
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function(stream) {
                // Get video element
                var video = document.getElementById('video');
                // Set the source of the video element to the stream
                video.srcObject = stream;
            })
            .catch(function(error) {
                console.error('Error accessing webcam:', error);
            });
    } else {
        console.error('getUserMedia is not supported in this browser.');
    }
</script>
</body> </html>

Enter image description here

asked 2 months ago256 views
1 Answer
1

Hi,

When a browser downloads HTML/JavaScript/CSS files that need access the local media devices (such as the camera or microphone) it will use the device's local APIs. However, most browsers will block these API calls if the files were delivered over an unencrypted connection, i.e., via HTTP since these could be malicious.

The main cause of this issue could be that you are hosting your static HTML, JavaScript, and CSS files on an EC2 instance without using HTTPS. To resolve this, you should switch to using HTTPS when hosting these static files. Once you make the switch to HTTPS, the browser-based access to the local media devices should work as expected.

Thanks, Rama

profile pictureAWS
EXPERT
answered 2 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions