JSFiddle - React, Tailwind, and code Playground

HTML

<button id='btn' class="hidden">
  stop recording
</button>
<input type="file" id="f" accept="video/*">

JavaScript

f.onchange = function() {

  var v = document.createElement('video')
  v.src = URL.createObjectURL(this.files[0])
  v.onloadedmetadata = function() {

    function createCue(begin, end, line, size, caption) {
      var cue = new VTTCue(begin, end, caption);
      cue.line = line || 5;
      cue.size = size || 100;
      return cue
    }
    var track = v.addTextTrack("captions", "abc123", "en");
    track.mode = "showing";
    var overlay = "<c.prompt><b>Hello world<b></c>";

    var currentCue = createCue(0, 1000, null, null, overlay);
    track.addCue(currentCue);

    var stream = v.captureStream ? v.captureStream() : v.mozCaptureStream ? v.mozCaptureStream() : null;
    if (!stream) {
      console.warn('unsupported browser');
    }
    // This will throw a TypeError
    //	stream.addTrack(track);

    // this is not a MediaStreamTrack
    console.log(track);
    // only MediaStreamTracks are here
    console.log(stream.getTracks());

    var recorder = new MediaRecorder(stream);
    recorder.ondataavailable = saveChunks;
    recorder.onstop = exportVideo;
    btn.onclick = function() {
      recorder.stop();
      v.pause();
      document.body.removeChild(v);
    };

    recorder.start();
  }
  v.play();
  document.body.appendChild(v);

};
var chunks = [];

function saveChunks(e) {
  if (e.data.size) {
    chunks.push(e.data);
  }
};

function exportVideo(e) {
  var blob = new Blob(chunks);
  var v1 = document.createElement('video');
  v1.id = 'recorded'
  v1.controls = true;
  v1.src = URL.createObjectURL(blob);
  document.body.appendChild(v1);
  v1.play();
}