JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script  src="https://code.jquery.com/jquery-3.1.1.js"  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="  crossorigin="anonymous"></script>

<body>
	
	<div id="ag_photo_capture_div">
		<div>
			<button class="btn btn-primary" id="ag_photo_capture_button">Capture Photo</button>
			<button class="btn btn-primary" id="ag_photo_clear_button">Clear Photo</button>
		</div>
		<div>
			<video id="ag_photo_live" width="640" height="480" autoplay></video>
			<canvas id="ag_photo_picture" width="640" height="480"></canvas>
			<a id="download">Download as image</a>
		</div>
	</div>
	
		</body>

JavaScript

$( document ).ready(function() {
  //récupération et paramétrage avec la camera
		var video = document.getElementById('ag_photo_live');
		if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
			// Not adding `{ audio: true }` since we only want video now
			navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
				video.src = window.URL.createObjectURL(stream);
				video.play();
			});
		}

		$('#ag_photo_capture_button').on('click',ag_pub_capture_photo);
		$('#ag_photo_clear_button').on('click',ag_pub_clear_photo);
});



		// Elements for taking the snapshot
		var canvas = document.getElementById('ag_photo_picture');
		var context = canvas.getContext('2d');
		var video = document.getElementById('ag_photo_live');
    
    
function ag_pub_clear_photo()
		{
			//$('#ag_photo_picture').clear();
			       
      context.clearRect(0, 0, canvas.width, canvas.height);
      console.log('clear');
      
      //var canvas = $('#ag_photo_picture')[0];
      //canvas.width = canvas.width;
      
		}


function ag_pub_capture_photo()
		{
			// Trigger photo take
			document.getElementById("ag_photo_capture_button").addEventListener("click", function() {
			context.drawImage(video, 0, 0, 640, 480);
		});


function downloadCanvas(link, canvasId, filename) 
		{
			link.href = document.getElementById(canvasId).toDataURL("image/jpeg");
			link.download = filename;
		}

		document.getElementById('download').addEventListener('click', function() 
    {
			downloadCanvas(this, 'ag_photo_picture', 'phototest');
		}, false);
	
	}