JSFiddle - React, Tailwind, and code Playground

HTML

<video id="videoElement"  autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" style="display:none" ></canvas>

CSS

#videoElement {
        width: 100%;
        /*height: auto;*/
        height: 375px;
        background-color: #fff;
    }

    /* untuk ukuran 1080px kebawah */
    @media screen and (max-width: 1024px) {
        #videoElement {
            height: auto;
        }
    }

    /* untuk ukuran layar 700px kebawah */
    @media screen and (max-width: 780px) {
        #videoElement {
            /*height: auto;*/
            height: 300px;
        }
    }

JavaScript

// Grab elements, create settings, etc.
	var video = document.getElementById('videoElement');
	
	// Get access to the camera!
	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();
	    });
	}
	
	// Elements for taking the snapshot
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	var video = document.getElementById('videoElement');
	
	// Trigger photo take
	document.getElementById("snap").addEventListener("click", function() {
	  var cann=	context.drawImage(video, 0, 0, 640, 480); //draw canvas
    //then convert canvas to image so i can obtain dataurl
    //and pass it to another function using AJAX
	  var img= convertCanvasToImage(cann);
    console.log(img);
	});
	
// Converts canvas to an image
function convertCanvasToImage(canvas) 
{
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}