How to Integrate Webcam using JavaScript on HTML5?

Last Updated : 12 Nov, 2024

Integrating a Webcam into a webpage can improve user interaction by allowing features like real-time video for profile picture uploads or identity verification. This can be done using different web technologies, but for simplicity, we’ll use HTML, Bootstrap, JavaScript, and jQuery. These tools make it easy to create a responsive and interactive interface.

Let’s walk through the steps to integrate a webcam into your webpage.

HTML Structure
- Use the <video> tag to display the webcam feed on the webpage.
- Create buttons to start and stop the webcam stream.
Using Bootstrap
- Bootstrap is used for styling the webpage, making it responsive and visually appealing.
- Include Bootstrap’s CSS and JavaScript libraries for layout and buttons.
JavaScript for Webcam Access
- Use the navigator.mediaDevices.getUserMedia API to access the webcam.
- The webcam feed is directed to the <video> tag, and JavaScript controls starting and stopping the stream.
jQuery for Event Handling
- jQuery is used to handle DOM events and start the webcam when the page loads automatically.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <h5 class="card-header h5 text-center">
                        HTML 5 & JS live Cam
                    </h5>
                    <div class="card-body">
                        <div class="booth">
                            <video id="video" width="100%" height="100%" autoplay></video>
                        </div>

                        <div class="text-right">
                            <button class="btn btn-danger" onClick="stopCam()">Stop Cam</button>
                            <button class="btn btn-success" onClick="startCam()">Start Cam</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const stopCam = () => {
            const video = document.getElementById('video');
            const stream = video.srcObject;
            const tracks = stream.getTracks();
            tracks.forEach(track => track.stop());
            video.srcObject = null;
        };

        const startCam = () => {
            const video = document.getElementById('video');
            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(stream => {
                        video.srcObject = stream;
                    })
                    .catch(error => {
                        console.error("Something went wrong!", error);
                    });
            } else {
                console.log("getUserMedia not supported on your browser!");
            }
        };

        $(document).ready(() => {
            startCam();
        });
    </script>
</body>

</html>

Output

Integrate Webcam using JavaScript on HTML5

How to Zoom an Image on Scroll using JavaScript?

gauravkumar105

Improve

Article Tags :

How to Integrate Webcam using JavaScript on HTML5?

Similar Reads

Thank You!

What kind of Experience do you want to share?