JSFiddle - React, Tailwind, and code Playground

HTML

<video id="video"></video>

CSS

#video {
  border: 1px solid black;
}

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    var mediaSource = new MediaSource();
    var constraints = {
        "audio": true,
        "video": {
            "mandatory": {
                "minWidth": 320, "maxWidth": 320,
                "minHeight": 240, "maxHeight": 240
            }, "optional": []
        }
    };
    var sourceBuffer;
    var video = document.querySelector('#video');
    video.src = video.webkitMediaSourceURL;
    mediaSource.addEventListener('sourceopen', function (e) {
        sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp9"');
    }, false);
    video.play();
    navigator.getUserMedia(constraints, function (stream) {
        console.log("stream",stream);
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.ondataavailable = function (e) {
        video.addEventListener('webkitsourceopen', function(e) {
            var reader = new FileReader();
            reader.addEventListener("loadend", function () {
                var arr = new Uint8Array(reader.result);
                sourceBuffer.webkitSourceAppend(arr);
            });
            reader.readAsArrayBuffer(e.data);
        };
        mediaRecorder.start(3000);
        }
    }, function (e) {
        console.log(e)
    });