将 MediaRecorder 与 start 指定的时间片参数一起使用的正确方法答案

【问题标题】：Correct way to use MediaRecorder with a time slice argument specified with start将 MediaRecorder 与 start 指定的时间片参数一起使用的正确方法
【发布时间】：2015-01-05 14:49:06
【问题描述】：

阅读此页https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder.start 后，我已经编写了自己的代码：

var mediaConstraint = { video: true, audio: true };
navigator.getUserMedia(mediaConstraint, function(stream) {
    var vendorURL = window.URL || window.webkitURL;
    _video = document.querySelector('#recordingCamera');
    _video.src = vendorURL.createObjectURL(stream);
    _video.play();

    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(3000);
    mediaRecorder.ondataavailable = function(e) {
        var replay = document.querySelector('#replay');
        replay.src = window.URL.createObjectURL(e.data);
        replay.play();
    }
}, function(error){

});

我希望在#recordingCamera 元素显示我相机的内容 3 秒后，我会在 #replay 元素中看到内容重播。
但是#replay 元素只播放前 3 秒。之后，#recordingCamera 元素仍显示摄像机内容，但 #replay 元素不显示其他内容。
检查控制台时，我发现了这些消息：

Media resource blob:http://localhost:8081/634f6237-17a9-475d-89bb-2c6ca0b48eb6 could not be decoded.
Media resource blob:http://localhost:8081/d0b95463-f9bc-4b0f-bd0d-40ae3152181f could not be decoded.
Media resource blob:http://localhost:8081/535ab990-0ee2-4ec0-adac-2d5d6917f6f3 could not be decoded.

ondataavailable 仍然被触发，但数据出现了问题。

我的问题：

这是 Firefox 的错误吗？
如果不是，正确的使用方法是什么带有用 start 指定的时间片参数的 MediaRecorder？

【问题讨论】：

这能回答你的问题吗？ Record 5 seconds segments of audio using MediaRecorder and then upload to the server

标签： javascript webrtc getusermedia mediastream web-mediarecorder

【解决方案1】：

好的，我找到了解决方案，MediaSource API

var mediaSource = new MediaSource();
var replay = document.querySelector('#replay');
replay.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function(e) {
    console.log('sourceopen')
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
});

var mediaConstraint = { video: true, audio: true };
navigator.getUserMedia(mediaConstraint, function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(3000);
    mediaRecorder.ondataavailable = function(e) {
        var fileReader = new FileReader();
        fileReader.onload = function() {
            sourceBuffer.appendBuffer(fileReader.result);
        };
        fileReader.readAsArrayBuffer(e.data);
    }
}, function(error){});

请注意，在 Firefox 中，您需要将 enable-media-source 标志设置为 true。

【讨论】：

您有完整的工作示例吗？我已经根据上面的代码修改了 MediaRecorder WebRTC 示例以使用 MediaSource，但它不起作用。在 Firefox 中 addSourceBuffer 给出错误“不支持操作”（因为默认情况下不支持 WebM 媒体源）。在 chrome 中，它只显示一帧视频。
这看起来像 chrome 中的错误。不时工作且不稳定。这是我的问题：stackoverflow.com/questions/37667075/…

【解决方案2】：

这似乎是 Firefox 中的一个错误。如果您以较小的时间片间隔调用mediaRecorder.start，则无需使用 MediaSource 即可正常播放 blob。 Note that MediaSource was not generally available until Firefox 42，所以你不能指望它可用。

mediaRecorder.start(1000);

【讨论】：