JSFiddle - React, Tailwind, and code Playground

HTML

<video id="v" autoplay controls style="width:160px;height:120px;"></video>
<video autoplay controls src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>

JavaScript

var drawing = false;
async function setupCanvasDrawing(c) {
  drawing = true;
  const length = c.width/6;
  const side = c.width/8;
  let ctx = c.getContext("2d");
  let start = performance.now();
  while (drawing) {
    let t = await new Promise(r => requestAnimationFrame(r));
    let rad = ((t - start) % 1000) / 1000 * 2 * Math.PI;
    let x = length * Math.cos(rad) // radians to x coordinate of top left corner
          + c.width/2; // offset to center of canvas
    let xCorner = x - side/2;
    let y = length * Math.sin(rad) // radians to x coordinate of top left corner
          + c.height/2; // offset to center of canvas
    let yCorner = y - side/2;
    
    // Background
    ctx.fillStyle = "aquamarine";
    ctx.fillRect(0, 0, c.width, c.height);
    
    // Line
    ctx.beginPath();
    ctx.moveTo(c.width/2, c.height/2);
    ctx.lineWidth = 1;
    ctx.lineTo(x, y);
    ctx.stroke();
    
    // Square
    ctx.fillStyle = "crimson";
    ctx.fillRect(xCorner, yCorner, side, side);
  }
}
function createCanvasTrack() {
  let c = document.createElement("canvas");
  c.getContext("2d");
  setupCanvasDrawing(c);
  return c.captureStream().getTracks()[0];
}
function createOscillatorTrack() {
  let ac = new AudioContext();
  let osc = ac.createOscillator();
  osc.start();
  let gain = ac.createGain();
  gain.gain.value = 0.1;
  let dest = ac.createMediaStreamDestination();
  osc.connect(gain).connect(dest);
  return dest.stream.getTracks()[0];
}

let test = async () => {
  let vt = createCanvasTrack();
  let at = createOscillatorTrack();
  v.srcObject = new MediaStream([vt, at]);
};
test().then(() => console.info("Done"), e => console.error(e));