JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" height="1920" width="1080"></canvas>

JavaScript

// Put event listeners into place
        window.addEventListener("DOMContentLoaded", function() {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                // we don't need to append the video to the document
                video = document.createElement("video"),
                videoObj = 
                navigator.getUserMedia || navigator.mozGetUserMedia ? // our browser is up to date with specs ?
                { 
                video: {
					width: { min: 1280,  max: 1280 },
       				height: { min: 720,  max: 720 },
       				require: ['width', 'height']
                    }
                }:
				{
                    video: {
                        mandatory: {
                            minWidth: 1280,
                            minHeight: 720,
                            maxWidth: 1280,
                            maxHeight: 720
                        }
                    }
                };
                

                errBack = function(error) {
                    console.log("Video capture error: ", error.code); 
                };
            // create a crop object that will be calculated on load of the video
			var crop;
			// create a variable that will enable us to stop the loop.
			var raf;
			
			navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            // Put video listeners into place
                navigator.getUserMedia(videoObj, function(stream) {
                    video.src = URL.createObjectURL(stream);
                    video.onplaying = function(){
						var croppedWidth = ( Math.min(video.videoHeight, canvas.height) / Math.max(video.videoHeight,canvas.height)) * Math.min(video.videoWidth, canvas.width),
						croppedX = ( video.videoWidth - croppedWidth) / 2;
						crop = {w:croppedWidth, h:video.videoHeight, x:croppedX,...