JSFiddle - React, Tailwind, and code Playground

HTML

<div id="controls">
  <span id="pause_gp">
  <button id="pause">
  pause
  </button>(creates an new video with all the previous content)
  </span>
  <button id="resume">
    resume
  </button>
  <br>
  <button id="stop">
    stop
  </button>
</div>
<div id="stream">
  <p>
    stream
  </p>
  <video id="s_vid"></video>
</div>
<div id="recorded">
  <p>
    recorded
  </p>
</div>

CSS

#controls.recording #resume {
	  display: none;
	}
	#controls:not(.recording) #pause_gp {
	  display: none;
	}

JavaScript

navigator.mediaDevices.getUserMedia({
    video: true
  })
  .then(stream => {
    const s_vid = document.getElementById('s_vid');
    s_vid.srcObject = stream;
    s_vid.play();
    const rec = new MediaRecorder(stream);
    const chunks = [];
    rec.ondataavailable = e => chunks.push(e.data);
    rec.onstop = e => {
      stream.getTracks().forEach(stream => stream.stop());
      exportVid();
    };

    // We should be able to do it, but my FF seems to have an bug with this event...
    //  rec.onpause = exportVid;
    function exportVid() {
      const blob = new Blob(chunks);
      const url = URL.createObjectURL(blob);
      const vid = document.createElement('video');
      vid.src = url;
      vid.controls = true;
      // chrome duration workaround
      vid.play().then(() => {
        vid.currentTime = 10e99;
        vid.onseeked = () => {
          vid.currentTime = 0;
          vid.pause();
          vid.onseeked = null;
        }
      });
      document.getElementById('recorded').appendChild(vid);
    }
    var controls = document.getElementById('controls');
    document.getElementById('pause').onclick = e => {
      rec.requestData();
      rec.pause();
      exportVid();
      controls.classList.toggle('recording');
    };
    document.getElementById('resume').onclick = e => {
      rec.resume();
      controls.classList.toggle('recording');
    }
    document.getElementById('stop').onclick = e => {
      rec.stop();
      controls.classList.remove('recording');
    }
    controls.classList.add('recording');
    rec.start(30);
  })