JSFiddle - React, Tailwind, and code Playground

HTML

<video id="vid" controls autoplay></video>
<button id="stop_btn" disabled>stop</button>

JavaScript

async function doit() {
  const gUMStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
  const audioStream = new MediaStream(gUMStream.getAudioTracks());
  const chunks = [];
  const recorder = new MediaRecorder(audioStream);
  recorder.ondataavailable = e => chunks.push(e.data);
  recorder.start();
  stop_btn.onclick = e => {
    recorder.stop();
    gUMStream.getTracks().forEach(t => t.stop());
    audioStream.getTracks().forEach(t => t.stop());
  };
  recorder.onstop = e => exportMedia(new Blob(chunks));
  vid.srcObject = gUMStream;
  stop_btn.disabled = false;
}
function exportMedia(blob) {
  const aud = new Audio(URL.createObjectURL(blob));
  aud.controls = true;
  document.body.appendChild(aud);
  document.body.removeChild(vid);
}
doit()
  .then(e=>console.log("recording"))
  .catch(console.error);