JSFiddle - React, Tailwind, and code Playground

by fguillen

HTML

<button id="start-button">Start</button>
<button id="stop-button" disabled>Stop</button>
<button id="request-data-button" disabled>Request Data</button>
<pre></pre>

JavaScript

let fullStream;
let counter = 0;
let intervalID;

const log = document.querySelector("pre");
const startButton = document.getElementById("start-button");
const stopButton = document.getElementById("stop-button");
const requestDataButton = document.getElementById("request-data-button");
let recorder;

function initFullStream() {
  // Video Track
  const videoTrack = getVideoTrack();

  // Audio Track
  const audioCtx = new AudioContext();
  const audioDestination = audioCtx.createMediaStreamDestination();
  const oscillator = audioCtx.createOscillator();
  const gainNode = audioCtx.createGain();
  gainNode.gain.value = 0;

  oscillator.connect(gainNode);
  gainNode.connect(audioDestination);

  const audioTrack = audioDestination.stream.getAudioTracks()[0];

  // Full Stream
  fullStream = new MediaStream();
  fullStream.addTrack(videoTrack);
  fullStream.addTrack(audioTrack); // If I comment this line the recording works good
}

function getVideoTrack() {
  const ctx = document.createElement("canvas").getContext("2d");
  const img = new ImageData(300, 150);
  const arr = new Uint32Array(img.data.buffer);
  draw();
  return ctx.canvas.captureStream().getVideoTracks()[0];

  function draw() {
    for (let i = 0; i < arr.length; i++) {
      arr[i] = Math.random() * 0xFFFFFF + 0xFF000000;
    }
    ctx.putImageData(img, 0, 0);
    requestAnimationFrame(draw);
  }
}

function record() {
  console.log("Start recording");

  // Set up MediaRecorder
  recorder = new MediaRecorder(fullStream);
  recorder.ondataavailable = (event) => {
    log.textContent = `(${counter}) produced a Blob of ${event.data.size}bytes\n${log.textContent}`;
    counter++;
  };

  recorder.start(); // ondataavailable each 1 seconds
}

function startRecording() {
  startButton.setAttribute("disabled", true);
  stopButton.removeAttribute("disabled");
  requestDataButton.removeAttribute("disabled");
  initFullStream();
  record();
  
  intervalID = setInterval(requestData, 200);
}

function...