All About Computer Science and Technology




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>

<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);
});

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);
});