loading

How to Access Webcam and Capture Image from Video with HTML5 using JavaScript

How to Access Webcam and Capture Image from Video with HTML5 using JavaScript

How to Access Webcam and Capture Image from Video with HTML5 using JavaScript

0 Sales

Free

A camera is used to stream footage through the computer in real time. The video stream is viewable, saveable, and shareable over the network. In general, the software is used to access the device's camera and broadcast video. JavaScript API may be used to stream camera video on a webpage without the need for any third-party software.

The getUserMedia() API in HTML5 allows you to use JavaScript to display a preview of the camera footage. HTML5 and JavaScript make it simple for your online application to access a camera and broadcast video. In this article, we'll teach you how to use HTML5 and JavaScript to access the webcam, stream video, and take video images.

getUserMedia() API

The MediaDevices API's getUserMedia() function aids in the creation of a MediaStream containing the desired media kinds. You may utilise the getUserMedia() API to question the user for permission before streaming webcam footage using HTML5.

In this example code, we will use getUserMedia() function to examine webcam video with HTML5 and snap image from camera with HTML5 using JavaScript.

HTML Code

The HTML below integrates the video element and renders the picture on the page.

 - To incorporate a video in a webpage, use the HTML5 video> element.
 - The HTML canvas> element is used to create a camera video snapshot on a webpage.
 - The button (#snap) causes the canvas API to output a video picture.

<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 video streaming procedure through camera on the webpage is handled by the JavaScript listed below.

 - The width and height of the video are determined by the limitations.
 - The getUserMedia() API is initialised by the init() method.
 - The webcam video is streamed in the HTML element by the handleSuccess() function.
 - To draw visuals from the camera feed, the canvas API is utilised. It is useful for capturing a still image from a 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);
});

 

Conclusion

Web browsers may access the computer's web camera by using the getUserMedia API. You may stream, store, and download the video once you have access to the webcam. Here is an example script for accessing the camera, streaming video, and capturing a snapshot of the streaming video. Without any software or plugins, you may quickly install webcam video streaming capabilities on your website. This sample script's functionality may be simply customised to meet your own requirements.

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : Feb 16, 2022

Updated Date : Feb 16, 2022

Ratings

Comments : 0

Downloads : 0