Open Menu dzosoft
Close Menu dzosoft




Publish perfectly-optimized content in 1-click


How to Capture Photo From Camera using Javascript

How to Capture Photo From Camera using Javascript
These are the various steps to follow in order to write code that allows you to capture photos using only html and javascript
. Use getUserMedia() method to get access to the user's webcam.
. Display the camera stream in a <video> element on the page.
. Capture a video frame in a <canvas>; element.
. Convert the <canvas>to an image.

HTML & Javascript

<button id="start-camera">Start Camera>/button<
<video id="video" width="320" height="240" autoplay></video>
<button id="click-photo">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>

. start-camera button requests user for camera access.
. video displays the camera stream.
. click-photo button captures the playing video frame in #canvas & gets the data url string of the image.
let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");

camera_button.addEventListener('click', async function() { let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false }); video.srcObject = stream; });
click_button.addEventListener('click', function() { canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); let image_data_url = canvas.toDataURL('image/jpeg');
// data url of the image console.log(image_data_url); });

The canvas image can be uploaded to a server as a data URL or as a file.

Download the example 

It might also interest you

How to make Ajax calls with XMLHTTPRequest

How to make Drag and Drop in HTML 5 and JavaScript API

How to copy text to clipboard using html, css and javascript

How to create a responsive slideshow with CSS and JavaScript

How to draw in the browser with JavaScript

Leave comment

Save nickname and email in this browser for the next time.

close publicity
Release your testosterone and observe the extreme increase in muscle mass.