Javascript 如何在录制过程中以分块方式同时下载MediaRecorder文件

我正在尝试使用

MediaRecorder

api创建一个简单的记录示例。使用此选项，我正在检查使用时间片下载捕获视频（

mediaRecorder.start（10000）

）

当捕获数据（每10秒）

ondataavailable

事件触发并使用此事件时，我将当前数据转换为blob并启动下载过程

`

`

一切正常，并在一定时间内下载。。问题是我只能播放第一个下载的文件（10秒）。其余的文件，它看起来像黑屏我无法发挥作为wll

问题的原因是什么？如何解决

let媒体记录器；
让记录下来的斑点；
const recordButton=document.querySelector（'button#record'）；
recordButton.addEventListener（'单击'，（）=>{
如果（recordButton.textContent===“开始录制”）{
startRecording（）；
}否则{
停止录制（）；
recordButton.textContent='开始录制'；
}
});
函数HandleData可用（事件）{
如果（event.data&&event.data.size>0）{
const blobData=新Blob（[event.data]{
键入：“视频/webm”
});
下载（blobData）；
recordedBlobs.push（事件数据）；
}
}
函数下载（blobData）{
常量url=window.url.createObjectURL（blobData）；
常量a=document.createElement（'a'）；
a、 style.display='none'；
a、 href=url；
a、 下载='test.webm'；
文件.正文.附件（a）；
a、 单击（）；
设置超时（（）=>{
文件.body.removeChild（a）；
window.URL.revokeObjectURL（URL）；
}, 100);
}
函数startRecording（）{
recordedBlobs=[]；
让选项={
mimeType:'video/webm；codecs=vp9，opus'
};
试一试{
mediaRecorder=新的mediaRecorder（window.stream，选项）；
}捕获（e）{
console.error（'创建MediaRecorder时出现异常：'，e）；
errorMsgElement.innerHTML=`创建MediaRecorder时发生异常：${JSON.stringify（e）}`；
返回；
}
recordButton.textContent='停止录制'；
mediaRecorder.onstop=（事件）=>{
日志（'记录器停止：'，事件）；
log（'Recorded blob:'，Recorded blob）；
};
mediaRecorder.ondataavailable=handleDataAvailable；
mediaRecorder.start（10000）；
}
函数stopRecording（）{
mediaRecorder.stop（）；
常量blobData=新Blob（记录的Blob{
键入：“视频/webm”
});
下载（blobData）
}
函数handleSuccess（流）{
window.stream=流；
const gumvide=document.querySelector（'video#gum'）；
gumVideo.srcObject=流；
}
异步函数初始化（约束）{
试一试{
const stream=wait window.navigator.mediaDevices.getUserMedia（约束）；
无柄成功（流）；
}捕获（e）{
警报（e）；
}
}
初始化({
音频：{
回声消除：{
精确：错误
}
},
视频：{
宽度：1280，
身高：720
}
});

开始录音
因为该记录的元数据仅在启动时第一次记录，其余部分仅与该部分一起工作。
试着把所有的部分组合起来，播放唱片。
确实如此。MediaRecorder只提供一个媒体文件。每个
dataavailable
事件都会将该文件的一部分传递给Javascript代码，而不是独立的媒体文件。要播放MediaRecorder为您制作的内容，必须首先将所有块连接在一起。
 function handleDataAvailable(event) {
        if (event.data && event.data.size > 0) {
            const blobData = new Blob([event.data], { type: 'video/webm' });
            download(blobData);
            recordedBlobs.push(event.data);
        }
    }

    function download(blobData) {
        const url = window.URL.createObjectURL(blobData);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = 'test.webm';
            document.body.appendChild(a);
            a.click();
            setTimeout(() => {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            }, 100);
    }