MediaRecorder API生成的MP4本地无法播放，浏览器播放正常

我在Chrome扩展中实现录屏功能，生成的MP4文件在浏览器内播放完全正常，但下载后用本地媒体播放器打开时，会提示文件似乎已损坏或编码格式不支持。

媒体文件创建代码 #

初始化MediaRecorder：

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

CreateCombinedStream函数实现 #

该函数会根据需求为视频流添加音频：

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;
}

停止录制时创建Blob的代码 #

在MediaRecorder的停止事件监听器中生成最终Blob：

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

将Blob传入video元素播放：

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

已尝试的解决方法 #

• 最初怀疑是编码问题，尝试了AVC编码规范中提及的不同编码参数，但视频仍无法在本地播放器正常播放

FFprobe检测输出 #

内容的提问来源于stack exchange，提问作者Nived Sanil