浏览器MediaRecorder API – video控制不工作/标头设置不正确？

我试图在浏览器中录制一个摄像头video，并保存在节点服务器上。

MediaRecorder API的方法

// CLIENT // Init MediaRecorder with camera stream recorder = new MediaRecorder(...) // Serialize data and send it to backend recorder.ondataavailable = (event) => { const reader = new FileReader(); reader.readAsArrayBuffer(event.data); reader.onloadend = function (event) { socket.emit('message', reader.result); }; } // BACKEND // Receive data and append it to the file client.on('message', (data) => { fs.appendFileSync(filePath + fileName + videoFileExtension, data); ... } 

问题

在浏览器中第一次播放video时，向前和向后的控件不起作用。 一旦播放，控件就可以了。

假设

我的假设是头被破坏了。

题

任何想法如何修复由MediaRecorder捕获的videostream并传输到NodeJS？ 或者如何在video文件中正确地保存数据块，以便控制工作？

Answer 1

以下是两个可能的解决scheme

• 运行ffmpeg -fflags +genpts -i video.webm -r 24 mynew.mp4将webm转换为mp4 ，这将修复头文件。 然后，您可以以类似的方式转换回webm 。

• 隐藏video – 将<video />标记的持续时间手动设置为实际持续时间 – Chrome将跳转到最后并修复标题，控件现在可以正常工作。 显示video并重播（已更正的标题和控件）。

---

我采取了第一种方法 – 转换为mp4 。