Question

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

使用getUserMedia
使用RecordRTC
从RecordRTC

我无法弄清楚如何将视频保存到文件中。在save()上调用RecordRTC可以让我下载视频文件，但我想在nodejs中发生所有事情以便进一步处理。无论如何，该文件都是可播放的。我试图将blob和dataURL写入文件，但该文件无法播放。

Answer 1

我从未使用过RecordRTC。使用本机（JavaScript）MediaRecorder API进行记录我写了sample

Answer 2

在Chromium中实现的MediaRecorder类以及因此在Electron中实现的类可以单独支持您的用例，除了将媒体写入本地文件的部分。据我所知，使用任何标准化的Web API都无法实现后一种功能，但是由于Electron嵌入了Node.js，因此不仅可以实现，而且可以说是微不足道的：

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

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

上面的代码段的注释和解释

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

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

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

2 个答案:

上面的代码段的注释和解释