JSFiddle - React, Tailwind, and code Playground

HTML

<video src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm" controls crossorigin></video>
<button disabled>stop recording</button>

CSS

video { max-height: 150px; }

JavaScript

const input = document.querySelector("video");
const stop_btn = document.querySelector("button");
input.onplaying = (evt) => {
  input.onplaying = null;
  console.clear();
  const stream = input.captureStream ? input.captureStream() : input.mozCaptureStream();
  stream.getVideoTracks().forEach( (track) => {
    track.stop();
    stream.removeTrack( track );
  } );
  const data = [];
  const recorder = new MediaRecorder( stream, { mimeType: "audio/webm" } );
  recorder.ondataavailable = (evt) => data.push( evt.data );
  recorder.onstop = (evt) => exportFile( new Blob( data ) );
  
  stop_btn.onclick = (evt) => recorder.stop();
  stop_btn.disabled = false;
  recorder.start();  
};
console.log( "play the video to start recording" );


function exportFile( blob ) {
  const anchor = document.createElement("a");
  anchor.download = "file.webm";
  anchor.href = URL.createObjectURL( blob );
  anchor.textContent = "download recorded file";
  stop_btn.replaceWith( anchor );
  input.src = anchor.href;
  console.log( "video element now playing recoded file" );
}