Access Webcam and Capture Image from Video with HTML5 using JavaScript

A webcam is used to steam the video in real-time through the computer. The video stream can view, save, and share through the network. Generally, the software is used to access webcam and stream video in the device. You can use JavaScript API to steam webcam video on the webpage without any third-party software.

The getUserMedia() method in HTML5, helps to display a preview of the webcam video using JavaScript. If your web application needs to access webcam and stream video, you can easily do it with HTML5 and JavaScript. In this tutorial, we will show you how to access the webcam, streaming the video, and capture the image of the video using HTML5 and JavaScript.

getUserMedia() API

The getUserMedia() method of MediaDevices API helps to produce a MediaStream containing the requested media types. You can use getUserMedia() API to prompt dialog to get permission from the user and stream webcam video using HTML5.

In this example code, we will use getUserMedia() method to preview webcam video with HTML5 and take picture from webcam with HTML5 using JavaScript.

HTML Code

The following HTML embeds the video element and draws the image on the webpage.

• The HTML5 <video> element is used to embed a video in a webpage.
• The HTML <canvas> element is used to draw a snapshot of the webcam video on a webpage.
• The button (#snap) trigger the canvas API to generate an image of the video.

<p><span id="errorMsg"></span></p>
    
<!-- Stream video via webcam -->
<div class="video-wrap">
    <video id="video" playsinline autoplay></video>
</div>

<!-- Trigger canvas web API -->
<div class="controller">
    <button id="snap">Capture</button>
</div>

<!-- Webcam video snapshot -->
<canvas id="canvas" width="640" height="480"></canvas>

JavaScript Code

The following JavaScript handles the video streaming process via webcam on the webpage.

• The constraints define the width and height of the video.
• The init() function initialize the getUserMedia() API.
• The handleSuccess() function stream the webcam video in the HTML element.
• The canvas API is used to draw graphics from the webcam stream. It helps to capture still picture from webcam video.

'use strict';

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById("snap");
const errorMsgElement = document.querySelector('span#errorMsg');

const constraints = {
    audio: true,
    video: {
        width: 1280, height: 720
    }
};

// Access webcam
async function init() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleSuccess(stream);
    } catch (e) {
        errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
    }
}

// Success
function handleSuccess(stream) {
    window.stream = stream;
    video.srcObject = stream;
}

// Load init
init();

// Draw image
var context = canvas.getContext('2d');
snap.addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
});

Build a HTML5 Video Player with Custom Controls

Conclusion

Using getUserMedia API, you can access the computer’s web camera through web browsers. Once you got access to the webcam, you can stream, save, and download the video. Here we have provided the example script to access the webcam, stream video, and capture a snapshot of the streaming video. You can easily implement the webcam video streaming functionality on the website without any software or plugins. The functionality of this example script can be enhanced easily as per your needs.