A very simple and straight forward approach.
<!DOCTYPE html> <html> <head> <title>Capture Using WebCam Implementation using HTML / Javascript</title> </head> <body onload="initilize();"> <h1>Take a snapshot of the current video stream</h1> Click on the Start WebCam button. <button onclick="startCam();">Start WebCam</button> <button onclick="stopCam();">Stop WebCam</button> <button onclick="snapshot();">Take Snapshot</button> <video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video> Screenshots : <canvas id="myCanvas" width="400" height="350"></canvas> </body> </html>
Javascript Code
//-------------------- // GET USER MEDIA CODE //-------------------- navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia ); var video; var webcamStream; function startCam() { if (navigator.getUserMedia) { navigator.getUserMedia ( // constraints { video: true, audio: false }, // successCallback function(localMediaStream) { video = document.querySelector('video'); video.src = window.URL.createObjectURL(localMediaStream); webcamStream = localMediaStream; }, // errorCallback function(err) { alert("The following error occured: " + err); } ); } else { alert("Error! getUserMedia not supported"); } } function stopCam() { webcamStream.stop(); } //--------------------- // TAKE A SNAPSHOT CODE //--------------------- var canvas, ctx; function initilize() { // Get the canvas and obtain a context for // drawing in it canvas = document.getElementById("myCanvas"); ctx = canvas.getContext('2d'); } function snapshot() { // Draws current image from the video element into the canvas ctx.drawImage(video, 0,0, canvas.width, canvas.height); }
Credit goes to scaisedge