Question

我正在开发一个屏幕捕获应用程序，并且能够获得ondataavailable事件的工作并获取数据块，然后将其进一步转换为blob，但是当我通过websocket向服务器和服务器发送相同的数据流时，将流另存为webm文件到磁盘，然后再播放该文件，该文件将不播放任何内容。我认为该文件需要一些不确定的元信息。

有什么建议吗？

这是我的JavaScript代码：

socket.emit('message', new Blob([event.data], {type: 'video/webm'}));

服务器保存代码：

fs.writeFile("d://test.webm", data, "binary", function(err) { });

Answer 1

dataavailable事件返回一个 chunk （录音的一部分）并触发多次。一个事件不可能包含整个记录。

将来自多个事件的数据合并到一个chunks数组中，然后在停止记录后，将整个数组合并到一个新的Blob中。这将产生一个对我有用的文件：

const rec = new MediaRecorder(stream), chunks = [];
rec.ondataavailable = e => chunks.push(e.data);
rec.start();
await new Promise(r => setTimeout(r, 10000)); // wait 10 seconds
rec.stop();
await new Promise(r => rec.onstop = r);
const blob = new Blob(chunks);
link.href = URL.createObjectURL(blob);

正在运行的演示：https://jsfiddle.net/jib1/pkc16k9r/

Answer 2

您可以使用RecordRTC

timeSlice：10000， ondataavailable：function（b）{ 每10000秒触发一次，但所有元数据仅在第一个文件中 }

如何从字节数组创建示例WebM文件

2 个答案: