Capture Image from the Webcam through HTML5
Access User Webcam through HTML5 api. Read Full detail on http://www.attuts.com/webcam-and-video-using-html5-send-video-image-to-server/
HTML
<video id="videoEle" width="640" height="480" autoplay></video>
<button id="camOnButton">Turn On my webcam</buton>
<button id="saveImgButton">Save Image</buton>
JavaScript
// Full tutorial on http://www.attuts.com/webcam-and-video-using-html5-send-video-image-to-server/
var vidObj = document.getElementById("videoEle");
errCallBack = function(error) { // Video Error Handler
console.log("Video error: ", error.code);
};
//Attach Click event with camOnButton
document.getElementById("camOnButton").addEventListener("click",function(){
// check web camera support on clicking camOnButton
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia({"video": true }, function(stream) {
vidObj.srcObject = stream;
/* vidObj.play() */;
}, errCallBack);
} else if(navigator.webkitGetUserMedia) { // For WebKit
navigator.webkitGetUserMedia({ "video": true }, function(stream){
vidObj.src = window.webkitURL.createObjectURL(stream);
vidObj.play();
}, errCallBack);
}
else if(navigator.mozGetUserMedia) { // For Firefox
navigator.mozGetUserMedia({ "video": true }, function(stream){
vidObj.src = window.URL.createObjectURL(stream);
vidObj.play();
}, errCallBack);
}
});