JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<video controls>

  <source src="https://rr4---sn-25glen7r.googlevideo.com/videoplayback?expire=1641426423&ei=l9nVYYXcJcr8W_C4mrgP&ip=217.69.0.141&id=o-AI3-DACXeH64lJAqhfz5g6hlKL-oXqqVetRO62KESrwj&itag=22&source=youtube&requiressl=yes&mh=2m&mm=31%2C26&mn=sn-25glen7r%2Csn-h5q7knes&ms=au%2Conr&mv=m&mvi=4&pl=24&initcwndbps=470000&vprv=1&mime=video%2Fmp4&ns=89dG9Hf8Ylv360z4bCrOJwUG&cnr=14&ratebypass=yes&dur=921.646&lmt=1637108685215006&mt=1641404470&fvip=4&fexp=24001373%2C24007246&c=WEB&txp=5535432&n=EcE5CH4E5jt4ODcp&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cns%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRQIgcJ0P3_qIciOzgdnX4NUQYC-ICmADRVi7dIE4e_tzlSICIQCJx3pZ9hbMDX0WXvCk2XqRdKEdOqhdx9wK4DjEAlDqZQ%3D%3D&lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpl%2Cinitcwndbps&lsig=AG3C_xAwRQIhAJiGgAcJbwzcfrkNm9NacgnlYXtNsoTIqiCC3LRWh7cAAiAgl9VLxEACjtZEL1eSGD6mMZBjQNMh9ItF5cf58WLgqg%3D%3D"
  type="video/mp4">
  <source src="../media/elephants-dream-medium.webm" type="video/webm">
</video>

<button id="snap" onclick="snap()">Take screenshot</button>
<button id="paste2">copy </button>



<canvas id="cv"></canvas>
<input id="imgtxt" type="text">

<canvas style="border:1px solid grey;" id="my_canvas" width="300" height="300"></canvas>

CSS

video,
	canvas {
	  width: 640px;
	}
	
	article,
	aside,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
	  display: block;
	}
	
	video,
	canvas {
	  border: 1px solid #000;
	}
	
	button {
	  margin-top: 10px;
	}
	
	footer {
	  font-size: 11px;
	  color: #aaa;
	  margin-top: 10px;
	}
	
	small {
	  color: #aaa;
	  font-size: 11px;
	  display: block;
	}
	
	a {
	  color: #aaa;
	  text-decoration: none;
	}

JavaScript

// 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 required width as 100 pixels smaller than the actual video's width
	  w = video.videoWidth - 100;
	  // Calculate the height based on the video's width and the ratio
	  h = parseInt(w / ratio, 10);
	  // Set the canvas width and height to the values just calculated
	  canvas.width = w;
	  canvas.height = h;
	}, false);

	// Takes a snapshot of the video
	function snap() {
	  // Define the size of the rectangle that will be filled (basically the entire element)
	  context.fillRect(0, 0, w, h);
	  // Grab the image from the video
	  context.drawImage(video, 0, 0, w, h);



	}

var CLIPBOARD = new CLIPBOARD_CLASS("my_canvas", true);

/**
 * image pasting into canvas
 * 
 * @param string canvas_id canvas id
 * @param boolean autoresize if canvas will be resized
 */
function CLIPBOARD_CLASS(canvas_id, autoresize) {
	var _self = this;
	var canvas = document.getElementById(canvas_id);
	var ctx = document.getElementById(canvas_id).getContext("2d");
	var ctrl_pressed = false;
	var reading_dom = false;
	var text_top = 15;
	var pasteCatcher;
	var paste_mode;

	//handlers
	document.addEventListener('keydown', function (e) {
		_self.on_keyboard_action(e);
	}, false); //firefox fix
	document.addEventListener('keyup', function (e) {
		_self.on_keyboardup_action(e);
	}, false); //firefox fix
	document.addEventListener('paste', function (e) {
		_self.paste_auto(e);
	}, false); //official paste handler

	//constructor -...