Capture Photo From Camera using Javascript

javascript
Published on January 2, 2021

Still photos can be captured from a camera using a combination of MediaDevices & Canvas APIs :

  • 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.

Demo

Click to see demo

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.

Related

Comments
Loading Comments