JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset=utf-8>
	<title>HTML5 Video and Canvas: Video screenshot</title>
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->	
	<link rel="stylesheet" href="video-canvas.css" />
</head>
<body>
	<video  controls>

    
            <source src="https://rr2---sn-a5msen7l.googlevideo.com/videoplayback?expire=1641433607&ei=p_XVYdG0Dsj0yQXBkKigDw&ip=138.199.59.42&id=o-APtaxSm9aVf-a8ktsGhYEcmTsn4Vk4HD45pXP_ve0bld&itag=22&source=youtube&requiressl=yes&vprv=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=933.535&lmt=1641394024893077&fexp=24001373,24007246&c=ANDROID&txp=4432434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRAIgeCCUexUn549ouvJ2Mg2Q1N4Z7VLIr8TYb50jIDIxf6YCIFn50A9cVQf6vcY7otc2Rh4HH-rGx2ndEwTME_iLuO8w&rm=sn-5uh5o-f5f67l&req_id=135d76de178ea3ee&redirect_counter=2&cm2rm=sn-f5fk7l&cms_redirect=yes&mh=eu&mip=174.26.13.154&mm=34&mn=sn-a5msen7l&ms=ltu&mt=1641411634&mv=m&mvi=2&pl=16&lsparams=mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhAPchkpyjul9MQVK-HN_vFJh-35KYl1sYqvj1toV_YLxdAiAboJ4VoA4Iy8eW4Oh3dA1CNO5BA1CPc7-9waehGT-Ieg%3D%3D" type="video/mp4">

	</video>
	<canvas></canvas>
	<footer>
	</footer>
	<button id="snap" onclick="snap()">Take screenshot</button>
  
  	<button id="snap" onclick="getImgData()">Get Image Data</button>

	<script>
		// Get handles on the video and canvas elements
		var video = document.querySelector('video');
		var canvas = document.querySelector('canvas');
		// Get a handle on the 2d context of the canvas element
		var context = canvas.getContext('2d');
		// Define some vars required later
		var w, h, ratio;
		
		// Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
		video.addEventListener('loadedmetadata', function() {
			// Calculate the ratio of the video's width to height
			ratio = video.videoWidth / video.videoHeight;
			// Define the...