I am trying to generate an mp4 file from a screen recording done via a chrome extension. The video plays back perfectly on the browser, but when I download the file and play it back locally with a media player it says that the file seems to be corrupted or the codec isn’t supported. This is how I am creating the media file –

const options = {mimeType: 'video/mp4'};
var combined_stream = this.CreateCombinedStream();
this.media_recorder_ = new MediaRecorder(combined_stream, options);

CreateCombinedStream function creates a final video file that adds audio as well to the video stream if required based on an input. This is how it is implemented

VideoRecorder.prototype.CreateCombinedStream = function () {
    var combined_stream = null;
    if (this.need_audio_ && this.audio_tracks_.length) {
        var audioContext = new AudioContext();
        var dest = audioContext.createMediaStreamDestination();
        for (var i = 0; i < this.audio_tracks_.length; i++) {
            var audio = audioContext.createMediaStreamSource(new MediaStream([this.audio_tracks_[i]]));
            audio.connect(dest);
        }
        combined_stream = new MediaStream([this.screen_track_, dest.stream.getAudioTracks()[0]]);
    } else {
        combined_stream = new MediaStream([this.screen_track_]);
    }
    return combined_stream;
}

In the stop event listener of the media recorder, the final blob is created as follows –

var blob = new Blob(chunks, { type: "video/mp4" });

This blob is now passed to a video element

video.src = URL.createObjectURL(blob) + '#t=0.5';

Things tried:

• Initially I thought it was something to do with the codecs, so I tried specifying different codecs as mentioned here AVC Codecs but the video still doesn’t play

FFprobe output –