Video screen capture using MediaStream API records for full duration in Firefox but not in Chrome

Question

I'm trying to get a screen recording of the browser using the MediaStream API in Javascript. My current method which is in raw Javascript works perfectly for Firefox (it provides me with a ~10sec video of the screen and downloads it) but in Chrome it gives me a video of a single frame - about half a second of footage.

My original code

    var videoEl = document.querySelector('video');
    var stream = videoEl.srcObject;
    var track = stream.getVideoTracks()[0];

    var finalStream = new MediaStream();
    finalStream.addTrack(track);
    this.recorder = new MediaRecorder(finalStream);

    this.recorder.ondataavailable = function(e) {
      var link = document.createElement('a');
      link.setAttribute('href', window.URL.createObjectURL(e.data));
      link.setAttribute('download', 'video_' + Math.floor((Math.random() * 999999)) + '.mp4');
      link.style.display = 'none';

      document.body.appendChild(link);
      link.click();

      document.body.removeChild(link);
    }

    this.recorder.start();
    setTimeout(() => this.recorder.stop(), 10000);

I've also tried using the javascript Blob API but when I use this method Chrome behaves as before and Firefox either records correctly for 10 secs or throws TypeError: stream is null

Blob method

    var videoEl = document.querySelector('video');
    var stream = videoEl.srcObject;
    var track = stream.getVideoTracks()[0];

    var finalStream = new MediaStream();
    finalStream.addTrack(track);
    this.recorder = new MediaRecorder(finalStream);

    var chunks = [];
    this.recorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }

    this.recorder.onstop = function(e) {
      var link = document.createElement('a');
      link.setAttribute('href', window.URL.createObjectURL(new Blob(chunks)));
      link.setAttribute('download', 'video_' + Math.floor((Math.random() * 999999)) + '.mp4');
      link.style.display = 'none';

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

    this.recorder.start();
    setTimeout(() => {this.recorder.stop()}, 10000);

I expect that it will record about 10secs and then download the file.

I get the correct result in Firefox but in Chrome I get the less than a second of footage.