JSFiddle - React, Tailwind, and code Playground

HTML

<div id="previewVideo">
Preview Video
</div>

JavaScript

var count = 0;
const options = {
  mimeType: 'video/webm'
};
const recordedChunks = [];

const handleSuccess = function(stream) {

  const mediaRecorder = new MediaRecorder(stream, options);

  mediaRecorder.addEventListener('dataavailable', function(e) {
    console.log("data available triggered " + count++);
    if (e.data.size > 0) {
      recordedChunks.push(e.data);
    }
  });

  mediaRecorder.addEventListener('stop', function(e) {
    console.log("Stop called.");
    var url = URL.createObjectURL(recordedChunks);
    var elem = window.getElementById("previewVideo");
    elem.src = url;
    elem.play();
  });

  mediaRecorder.start(100);
}

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
}).then(handleSuccess).catch( function(error) {
   console.log(error.message);
});