JSFiddle - React, Tailwind, and code Playground

HTML

<video id="videoEle" width="640" height="480" autoplay></video>
<button id="camOnButton">Turn On my webcam</buton>
    <button id="saveImgButton">Save Image</buton>
        <canvas id="canvasEle" width="640" height="480"></canvas>

JavaScript

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.src = 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);
	}

});
var canvas = document.getElementById("canvasEle"),
ctx = canvas.getContext("2d")
document.getElementById("saveImgButton").addEventListener("click",function(){
ctx.drawImage(vidObj, 0, 0, 640, 480);
});