AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home HTML & CSS

Accessing Webcam and Capture Image using HTML5 and JavaScript

Accessing Webcam and Capture Image using HTML5 and JavaScript

Lakshika Mathur by Lakshika Mathur
December 30, 2019
Reading Time: 3 mins read
0
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

RELATED POSTS

Like Dislike Rating System with jQuery, Ajax, and PHP

Star Rating System with jQuery, Ajax, PHP, and MySQL

Confirmation Before Closing of Tab/Browser using 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

Tags: Accessing WebcamJavaScript
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Like Dislike Rating System with jQuery, Ajax, and PHP
jQuery & AJAX

Like Dislike Rating System with jQuery, Ajax, and PHP

January 6, 2020
739
Star Rating System with jQuery, Ajax, PHP, and MySQL
jQuery & AJAX

Star Rating System with jQuery, Ajax, PHP, and MySQL

January 6, 2020
162
Confirmation Before Closing of Tab/Browser using JavaScript
JavaScript

Confirmation Before Closing of Tab/Browser using JavaScript

January 2, 2020
496
Build an HTML5 Video Player with Custom Controls
HTML & CSS

Build an HTML5 Video Player with Custom Controls

January 2, 2020
87
Create a Digital Clock with Date using JavaScript
JavaScript

Create a Digital Clock with Date using JavaScript

January 2, 2020
182
Form Validation using jQuery Validation Plugin
jQuery & AJAX

Form Validation using jQuery Validation Plugin

January 2, 2020
34
Next Post
One Time Temporary Download Link with Expiration in PHP

One Time Temporary Download Link with Expiration in PHP

How to Backup MySQL Database using PHP

How to Backup MySQL Database using PHP

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version