浏览器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的视频？或者如何正确保存数据块以使控件正常工作？

- Lyubomir

---

你好！这是Chrome中一个众所周知的错误；录制媒体的持续时间没有添加到最终文件的头部。不幸的是，这个错误目前被Chromium团队标记为WontFix。然而，有几个解决方法：

• 在后端，使用ffmpeg来修复头部：ffmpeg -i old.webm output.webm
• 在前端，可以使用此答案中的解决方法或使用包ts-ebml。

- ACBM

可能是如何在Chrome中从MediaRecorder录制的音频中添加预定义长度？的重复问题。 - ACBM

Answer 1

这里有两种可能的解决方案

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

• 隐藏视频 - 手动设置 <video /> 标签的持续时间为实际持续时间 - Chrome 将跳到结尾并修复头文件，控件现在将起作用。显示视频并重新播放（已经更正了头文件和控件）。

---

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

- Lyubomir

---

我也遇到了同样的问题，我在浏览器上有MP4格式的视频，但问题仍然存在。 - Dinesh Pathak DK

如何在浏览器上将WebM转换为MP4。 - Dinesh Pathak DK

我的录制视频将生成WebM和MP4格式，但两者都存在相同的问题。 - Dinesh Pathak DK

无法在浏览器上进行转换，需要通过像ffmpeg这样的服务器端进行转换（我建议的第一种解决方案）。 - Lyubomir

我该如何转换？请提供一些代码。 - Dinesh Pathak DK