JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" controls></video><br/>
<button id="button">Capture</button> <br/><br/>
<canvas id="canvas"></canvas> <br/><br/>

CSS

video {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

JavaScript

let opThumb = {
	canvas: document.getElementById('canvas').getContext('2d'),
  video: document.getElementById('video'),
  button: document.getElementById('button'),
  events: {
  	thumb: () => opThumb.canvas.drawImage(video, 0, 0, video.videoWidth, video.videoHeight),
  },
}
opThumb.button.addEventListener('click', opThumb.events.thumb);