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 没有被触发/调用。这里可能是什么问题？

【问题讨论】：

标签： javascript html5-video html5-audio

【解决方案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，没关系。我编辑了我的答案。事实证明，从我的服务器加载的代码有很小（但很重要）的差异。我修好了，让它工作了。