Open Menu dzosoft
Close Menu dzosoft
All About Computer Science and Technology

                twitter instagram facebook pinterest
search on the site
 
 
 

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.
DEMO 
Download the example 
Leave comment
          

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



All about computer science and technology