MediaRecorder 'ondataavailable' 事件未触发

Posted 2023-05-08

【中文标题】MediaRecorder \'ondataavailable\' 事件未触发

【英文标题】：MediaRecorder 'ondataavailable' event not firingMediaRecorder 'ondataavailable' 事件未触发

【发布时间】：2020-07-13 06:21:32

【问题描述】：

这是我的完整代码，用于显示和实时录制音频和视频（然后将 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 没有被触发/调用。这里可能是什么问题？

【参考方案1】：

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

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

【参考方案2】：

解决办法是设置

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

【参考方案3】：

根据文档 (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) 的解决方案：使用 MediaRecorder.start("time in milliseconds") 在指定的时间间隔触发“dataavailable”事件和/或使用setTimeout(MediaRecorder.requestData(), "time in milliseconds")。我有一个 jsFiddle 示例 here（不完整的代码，仅检查控制台消息）。

【讨论】：

你的意思是在 jsFiddle 上工作而不是在浏览器上工作？ jsFiddle 不也是在浏览器中运行的吗？

@quarks，没关系。我编辑了我的答案。事实证明，从我的服务器加载的代码有很小（但很重要）的差异。我修好了，让它工作了。