Accessing Webcam and Capture Image using HTML5 and JavaScript

The use of a webcam is to play any video in real-time through the computer. Therefore you can view, save, and share the video stream through the network and also capture the image. In general, you can use the software to access webcam and stream video. So, you can also Access it and Capture Image using HTML5 and JavaScript

The getUserMedia() method in HTML5 will display a preview of the webcam video using JavaScript. So, 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 explain to you how to get through this and capture the image of the video using HTML5 and JavaScript.

getUserMedia() API

The getUserMedia() method of MediaDevices API helps to create a MediaStream that contains the requested media types. Therefore, you can use getUserMedia() API to prompt dialogue to get authorization from the user and stream webcam video using HTML5.

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

SEE ALSO: jQuery UI Autocomplete with Images and Custom HTML in PHP

HTML Code

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

• Firstly, use the HTML5 <video> element to embed a video in a webpage.
• Secondly, use the HTML <canvas> element to draw a snapshot.
• At last, the button (snap) triggers the canvas API so that you can generate an image of the video.

<!-- 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 given script will handle 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 video in the HTML element.
• Use the canvas API to draw graphics from the stream.

'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);
});

SEE ALSO: Verify Email Address and Check if Email is Real using PHP

Conclusion

Firstly, with the help of getUserMedia API, you can access the computer’s web camera through web browsers. Therefore, once you got access to the webcam, you can stream, save, and download the video. Secondly, here we have offered you the example script to get through the webcam, stream video, and capture snaps of the streaming video. At last, you can quickly implement the webcam video streaming functionality on the website without any software or plugins. 

Also, read our previous blog- Autocomplete Textbox with Multiple Selection using jQuery in PHP