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

The canvas image can be uploaded to a server as a data URL or as a file.
Download the example 
Leave comment

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

All about computer science and technology