MediaRecorder 'ondataavailable' 事件未触发

Question

这是我用于显示和实时录制音频和视频的完整代码（以及稍后将 blob 块上传到服务器）：

$(function () {
    var handleSuccess = function(stream) {

        var player = document.querySelector("#vid-user");
        player.srcObject = stream;

        console.log("Starting media recording")
        var options = {mimeType: 'video/webm'};
        var recordedChunks = [];
        var mediaRecorder = new MediaRecorder(stream, options);

        mediaRecorder.ondataavailable = function(e) {
            console.log("Data available")
            if (e.data.size > 0) {
                recordedChunks.push(e.data);
                var url = URL.createObjectURL(new Blob(recordedChunks));
                console.log("URL: " + url)
            }
        }

        mediaRecorder.start();
    };
    navigator.mediaDevices.getUserMedia({ audio: true, video: true })
        .then(handleSuccess)
})

视频播放正常，但问题是 mediaRecorder.ondataavailable 不是 triggered/called。这里可能是什么问题？

Answer 1

start() 方法采用名为 timeslice 的可选参数。除非您指定该参数，否则 dataavailable 事件仅在您在 MediaRecorder 上调用 stop() 后触发。

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start

Answer 2

解决方法是设置

mediaRecorder.start(1000); // where 1000 is the interval

Answer 3

根据文档的解决方案（https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder): Use MediaRecorder.start("time in milliseconds") to trigger 'dataavailable' event at the specified interval AND/OR use setTimeout(MediaRecorder.requestData(), "time in milliseconds"). I have a jsFiddle example here（不完整的代码，仅检查控制台消息）。

MediaRecorder 'ondataavailable' 事件未触发

MediaRecorder 'ondataavailable' event not firing

javascript

html5-video

html5-audio