将捕获的视频保存到 Electron 中的文件

Question

我想将从网络摄像头捕获的视频保存到本地文件。到目前为止，我已经能够：

1. 创建一个流 getUserMedia
2. 封装流 RecordRTC
3. 从 RecordRTC

我不知道如何将视频保存到文件中。调用save()上RecordRTC让我下载的视频文件，但我想要的一切，以对的NodeJS进一步处理发生。无论如何，该文件是可播放的。我试图将 blob 和 dataURL 写入文件，但该文件无法播放。

Answer 1

在 Chromium 和 Electron 中实现的MediaRecorder类可以支持您的用例。将媒体保存为文件不仅是可能的，而且可以说是微不足道的：

const recorder = new MediaRecorder(await navigator.mediaDevices.getUserMedia());
const blob_reader = new FileReader();
const storage_stream = require("fs").createWriteStream(path);
const blobs = [];
blob_reader.addEventListener("load", ev => {
    storage_stream.write(Buffer.from(ev.currentTarget.result));
    if(blobs.length) ev.currentTarget.readAsArrayBuffer(blobs.shift());
});
recorder.addEventListener("dataavailable", ev => {
    if(blob_reader.readyState != 1) blob_reader.readAsArrayBuffer(ev.data);
    else blobs.push(ev.data);
});

除了我认为将Blob对象转换为ArrayBuffer等价物的技术上可消耗和不希望（但必要）的步骤之外，这与 API 实现本身一样有效——JavaScript 机器本身在这里没有繁重的工作。

对上述代码段的备注和解释：

• 在您通过调用该MediaRecorder.start方法实际启动媒体记录器之前，不会有任何操作。请注意，如果需要，该代码段可以与多个生成的 blob 一起使用 - 使用start1 秒的时间片（第一个参数）可能是一个好主意，具体取决于。这样的时间片允许您进行适当的数据流传输，而不是获得存储在进程内存中的潜在巨大的单个 blob 编码视频流（如果您省略timeslice参数 to就会得到start）。
• 一旦start发出调用（使用时间片），生成的文件将开始“在磁盘上”增长，具体取决于时间片值和中间缓冲区的长度。
• 一个MediaRecorder对象，作为编码媒体的一部分，会生成blob，出于某种原因，这些blob不是很多其他 API 的“可消费”，因此我们必须将它们转换为可消费的东西，在这种情况下，更多的对象方便我们ArrayBuffer上课。
• 由于将 blob 转换为数组缓冲区是异步的，因此我们有一个 blob 队列，该队列在FIFO基础上进行适当转换。
• require("fs")给我们一个 Node.js 模块，“fs”不是一个在你的 Web 浏览器中可用的模块，至少不是根据我知道的 Web 标准草案。然而，这是允许我们将结果数组缓冲区转储到文件中的模块。
• 可能不显眼的表达Buffer.from(...)不仅仅是在这里看到Buffer的——Web API 空间中没有类，它是一个 Node.js 类，能够将 an 包装ArrayBuffer为视图（无数据复制）。这是必要的，因为您不能直接将 anArrayBuffer写入文件流。
• 由媒体记录器对象生成的数据串联是一个有效的媒体容器（相对于记录器对象的 MIME 类型），因此只需将这些数据传递给流，当然，如果以正确的顺序完成，就足以让我们有效的媒体容器文件（例如 a.webm或 an .mp4）。
• 然而，生成的文件是所谓的传输流——某些视频播放器可能能够也可能无法可靠或有效地查找数据。ffmpeg但是，可以通过索引这些文件并相应地修补它们来对这些文件进行简单的后处理。我认为这样的步骤是可选的——像上面的代码片段生成的那样，传输流没有任何本质上的错误。
• path传递给createWriteStream上面的属性/变量表示要将视频保存到的文件的路径。

我已经在 Windows 10 上使用 3.0.4 版本的 Electron 测试了该代码段。

另一种将媒体保存为文件的方法——有趣的是，它也适用于相当现代的 Web 浏览器——是将记录器提供的 blob 连接成一个 blob，让用户使用URL.createObjectURL方法。然而，我认为这种方法和上面说明的方法在功能或能力上并不​​相同——我对如何在不同的用户代理中实现 blob 不是 100% 有信心——无论是由物理/虚拟 RAM 支持例如——媒体文件可能会变得非常大，如果包含在 blob 中并通过 URL 引用，则这些文件需要完整地存储在 RAM 中，这是潜在的潜在资源耗尽故障。相比之下，零散地编写文件不应该自然受到这种限制。不管怎样，我把createObjectURL一个练习的应用留给读者，它应该是相当微不足道的，其他一切都到位了。