Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




A MALE SOLUTION TO PROSTATE PROBLEMS!

Publish perfectly-optimized content in 1-click









 
 
 

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 



It might also interest you


How to make Ajax calls with XMLHTTPRequest

How to make Drag and Drop in HTML 5 and JavaScript API

How to copy text to clipboard using html, css and javascript

How to create a responsive slideshow with CSS and JavaScript

How to draw in the browser with JavaScript


Leave comment
          

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



Loading...     
close publicity
Release your testosterone and observe the extreme increase in muscle mass.