JSFiddle - React, Tailwind, and code Playground

by fguillen

HTML

<!doctype html>

<html lang="en">
  <head>
    <meta charset=utf-8>
    <title>Testing MediaRecorder</title>
    <link rel="stylesheet" href="./style.css">
  </head>

  <body>
    <div id="video-wrapper">
      <video controls></video>
    </div>

    <button id="init-full-stream-button">Init Stream</button>
    <button id="connect-screen-button" disabled="true">Connect screen</button>
    <button id="connect-mic-button" disabled="true">Connect mic</button>
    <button id="start-recording-button" disabled="true">Start Recording</button>
  </body>

  <script src="./script.js"></script>
</html>

CSS

#video-wrapper {
  position: relative;
  width: 500px;
}

#video-wrapper video {
  width: 100% !important;
  height: auto !important;
}

#start-recording-button {
  background-color: brown;
}

JavaScript

let audioCtx;
let audioDestination;
let fullStream;
let isRecording = false;
const videoElement = document.querySelector("#video-wrapper video");

function initFullStream() {
  fullStream = new MediaStream();

  // Add track for fullAudio
  audioCtx = new AudioContext();
  audioDestination = audioCtx.createMediaStreamDestination();
  const fullAudioTrack = audioDestination.stream.getAudioTracks()[0];
  fullStream.addTrack(fullAudioTrack);

  console.log("fullStream created");
}

async function connectMic() {
  const micStream =
    await navigator.mediaDevices.getUserMedia({
      video: false,
      audio: true
    });
  console.log("micStream.getAudioTracks().length: ", micStream.getAudioTracks().length);

  const micSource = audioCtx.createMediaStreamSource(micStream);
  micSource.connect(audioDestination);

  console.log("Mic connected");
}

async function connectScreen() {
  // Getting screenStream
  const screenStream =
    await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });

  // Screen Stream
  console.log("screenStream.getVideoTracks()[0]: ", screenStream.getVideoTracks()[0]);
  fullStream.addTrack(screenStream.getVideoTracks()[0]);
}

function playStream() {
  videoElement.srcObject = fullStream;
  // videoElement.muted = false;
  videoElement.play();
}

function playBlob(blob) {
  const videoURL = window.URL.createObjectURL(blob);
  videoElement.pause();
  videoElement.srcObject = null;
  videoElement.src = videoURL;
  videoElement.muted = false;
  videoElement.play();
}

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

  // Set up MediaRecorder
  const recordedChunks = [];
  const mediaRecorder = new MediaRecorder(fullStream, { mimeType: "video/webm" });
  mediaRecorder.ondataavailable = (event) => {
    console.log("MediaRecorder.ondataavailable(): ", event.data);
    recordedChunks.push(event.data);
  };

  mediaRecorder.onstop = () => {
    console.log("MediaRecorder.onstop(): ",...