javascript MediaRecorder API 视频没有时间信息，没有音频

Question

我正在使用与 getUserMedia() 和 MediaRecorder API 一起制作的 Chrome 扩展程序来记录用户屏幕并将记录保存为 mp4 视频。我的视频无法在 QuickTime 中打开，它们可以在 VLC 中打开，但是它们没有时间信息，因此无法倒带。

另一个问题是没有音频

这是我正在使用的代码的相关部分：

function startRecording() {
    getScreenConstraints(function(error, screen_constraints) {
        if(error) {
            return alert(error);
        }

        console.log('screen_constraints', screen_constraints);

        navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        navigator.getUserMedia(screen_constraints, function(stream) {
            var video = stream.getVideoTracks()[0];
            var audio = stream.getAudioTracks()[0];
            navigator.getUserMedia({audio: true}, function (s) {
                audio = s.getAudioTracks()[0];
                stream.addTrack(audio);
                recorder = new MediaRecorder(stream);
                recorder.addEventListener('dataavailable', onRecordingReady);
                recorder.addEventListener('stop', onStop);
                recorder.start();
            }, function(error) {
                alert(JSON.stringify(error, null, '\t'));
            });
        }, function(error) {
            alert(JSON.stringify(error, null, '\t'));
        });
    });
}

function onRecordingReady(e) {
    // e.data contains a blob representing the recording
    chunks.push(e.data);
}

function onStop(e) {
    console.log("data available after MediaRecorder.stop() called.");

    var blob = new Blob(chunks, { 'type' : 'video/mp4; codecs=mp4a.40.2' });
    saveData(blob, 'myVideo.mp4');
    console.log("recorder stopped");
}

我尝试使用不同的编解码器，但没有成功

Answer 1

我的视频无法在 QuickTime 中打开，它们可以在 VLC 中打开，但是没有时间信息，因此无法倒带。

这是目前尚无可靠解决方案的浏览器中的一个已知问题。对于 MP4，它与 MOOV atom 的放置有关，而且 MediaRecorder API 已经向您返回了数据，这些数据以后必须被覆盖。

另一个问题是没有音频

目前无法拨打addTrack。您必须使用来自先前 MediaStreams 的轨道数组实例化一个新的 MediaStream。