浏览器MediaRecorder API - 视频控件无法正常工作/标题设置错误？

Question

我尝试在浏览器中录制网络摄像头视频并将流保存在节点服务器上。

使用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);
  ... 
}

问题

第一次在浏览器中播放视频时，前进和后退控件无法正常工作。一旦播放，控制就可以了。

假设

我的假设是标题以某种方式被破坏了。

问题

如何修复MediaRecorder捕获并流式传输到NodeJS的视频？或者如何在视频文件中正确保存数据块以便控制工作？

Answer 1

以下是两种可能的解决方案

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

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

我选择了第一种方法 - 转换为mp4。