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