JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="main">
    <!-- VIDEO PLAYER -->
    <div id="player">
      <video id="live" width="398" height="224" autoplay controls>
        <source src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" />
      </video>
    </div>
    <!-- VIDEO PLAYER -->
    <!-- CANVAS -->
    <div id="work">
      <canvas id="canvas" width="398" height="224"></canvas>
    </div>
    <!-- CANVAS -->
  </div>

JavaScript

var video = document.getElementById("live");
var can = document.getElementById("canvas");

$(function(){
  setInterval(function(){
    drawVideo();
  }, 1000/30);
});

// Videoの映像をCanvasに描画
function drawVideo(){
  can.getContext("2d").drawImage(video, 0, 0, 853, 480, 0, 0, 398, 224);
}