How To Take An Image From The Webcam In Html

Question

I just want to know how to take an image from the webcam using javascript and create that image onto a web page. I have seen other ways to do so, but none of them explain how to use it. Could Somebody Explain How To Do It?

Answer 1

Initially the canvas element's display is set to none. Only the video frame is visible. When the user clicks on CAPTURE then the canvas is shown and video element is shown. The button content changes to RETAKE.

working demo at codepen capture image using javascript

 (function() { var streaming = false, video = document.querySelector('#video'), canvas = document.querySelector('#canvas'), buttoncontent = document.querySelector('#buttoncontent'), photo = document.querySelector('#photo'), startbutton = document.querySelector('#startbutton'), width = 320, height = 0; navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); navigator.getMedia({ video: true, audio: false }, function(stream) { if (navigator.mozGetUserMedia) { video.mozSrcObject = stream; } else { var vendorURL = window.URL || window.webkitURL; video.src = vendorURL.createObjectURL(stream); } video.play(); }, function(err) { console.log("An error occured! " + err); } ); video.addEventListener('canplay', function(ev) { if (!streaming) { height = video.videoHeight / (video.videoWidth / width); video.setAttribute('width', width); video.setAttribute('height', height); canvas.setAttribute('width', width); canvas.setAttribute('height', height); streaming = true; } }, false); function takepicture() { video.style.display = "none"; canvas.style.display = "block"; startbutton.innerText= "RETAKE"; canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(video, 0, 0, width, height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data); } startbutton.addEventListener('click', function(ev) { if(startbutton.innerText==="CAPTURE") { takepicture(); } else { video.style.display = "block"; canvas.style.display = "none"; startbutton.innerText= "CAPTURE"; } ev.preventDefault(); }, false); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <video id="video"></video> <canvas id="canvas" style="display:none;"></canvas> <div id="buttoncontent"> </div> <button id="startbutton">CAPTURE</button>