JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
  <canvas id="output-canvas" width="640" height="360"></canvas>
  <video id="output-video" width="640" height="360" autoplay></video>
  <br />
  <button type="button" onclick="startCapture()">Start</button>
</body>
</html>

JavaScript

var WIDTH = 640
var HEIGHT = 360
const FPS = 30;

const outputVideo = document.querySelector('#output-video');
const outputCanvas = document.querySelector('#output-canvas');
const outputContext = outputCanvas.getContext('2d');

var outputStream = null;

function startCapture() {

  document.querySelector('button').disabled = true;

  outputStream = outputCanvas.captureStream(FPS);
  outputVideo.srcObject = outputStream;
  console.log('start');

  setInterval(function() {
    if (outputContext.fillStyle === "#0000ff") {
      outputContext.fillStyle = "#00ff00";
    } else {
      outputContext.fillStyle = "#0000ff";
    }
    outputContext.fillRect(0, 0, WIDTH, HEIGHT);
    console.log('render');
  }, 1000);


}