[Answered ]-Capturing An Image From The Computer's Camera And Saving It

by

1👍

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);
});
<h2>Capture Photo From Camera using Javascript</h2>
<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>
👤KATHEESKUMAR

0👍

From the camera a stream is captured (if user agrees) and fed to the video input. Then, when you choose, the canvas takes snapshot of the video (drawImage(video)) and draws on itself. The same <canvas> has a method that converts itself to an image (or a DataURL of one). That data is fed as a src of the image element.

These are 3 of the magic lines.

context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);

If you want to store the image on the server, you can use the data string that is a base64 encoding of the image. Not efficient but it’s a text. the <img> is not used for this purpose.

👤IT goldman

Leave a comment