将视频 blob 保存到文件系统电子/节点 js答案

【问题标题】：Save video blob to filesystem electron/node js将视频 blob 保存到文件系统电子/节点 js
【发布时间】：2016-10-19 17:26:11
【问题描述】：

在我的电子应用程序中，用户可以使用 MediaRecorder API 从他们的网络摄像头录制视频。

当用户点击“停止录制”按钮时，我会得到一个录制的视频。

我想做的是将此 blob 转换为真正的 webm 视频并将其写入用户的文件系统，例如：

fs.writeFile(localdir + '\\video.webm', videoBlob); // does not work

下面的示例适用于我从网络摄像头获取的 base64 图像快照，但我无法使其适用于我获取的视频 blob。

多谢赐教！

【问题讨论】：

标签： javascript node.js video electron

【解决方案1】：

创建一个视频块。 chunks 是来自 MediaRecorder 实例的 ondataavailable 的 event.data 数组

var blob = new Blob(chunks, {
    type: 'video/webm'
})

将 blob 读取为 ArrayBuffer，并使用它来创建 Buffer。将缓冲区保存为文件。

var reader = new FileReader()
reader.onload = function(){
    var buffer = new Buffer(reader.result)
    fs.writeFile(path, buffer, {}, (err, res) => {
        if(err){
            console.error(err)
            return
        }
        console.log('video saved')
    })
}
reader.readAsArrayBuffer(blob)

【讨论】：

我也必须在这里投反对票，因为虽然这确实是显而易见的解决方案，但它会强制将 Blob 数据读入内存，当您有几个小时时，这可能并不完全温和视频（Blob 可能会或可能不会自己驻留在内存中，具体取决于浏览器的决定，如果没有，这样做会将其放入 RAM）。
@JohnWeisz IMO 这是一个极端情况。无论如何，我很乐意看到您的解决方案

【解决方案2】：

FileReader 的替代方法是通过 Blob 的 arrayBuffer 方法实现基于 Promise 的方法：

async function saveFile() {

    const blob = new Blob(chunks, {
        type: 'video/webm'
    })


    const buffer = Buffer.from( await blob.arrayBuffer() );

    fs.writeFile('video.webm', buffer, () => console.log('video saved!') );

}

【讨论】：

如何使用 puppeteer 的暴露功能做到这一点？似乎将 blob 或数组缓冲区发送到公开的函数不起作用，因为参数是 JSON.strigified。 blob.text() 可以将其发送到暴露函数，但我不确定以后如何将其保存为视频文件。我所有的努力都以损坏的视频文件告终：/

【解决方案3】：

您需要使用 FileReader 将 blob 内容作为数组读取，然后创建一个 Buffer 实例。

我无法让音频正常工作:(

【讨论】：