【问题标题】:Write file to disk from blob in electron application在电子应用程序中将文件从 blob 写入磁盘
【发布时间】:2017-04-22 17:15:43
【问题描述】:

我正在创建一个 Electron 应用程序,在其中我正在从网络摄像头和桌面记录数据,在记录会话结束时,我想将数据保存到后台的文件中。我不知道如何将数据从 blob 直接写入文件。有什么建议么? 以下是我当前对 MediaRecord Stop 事件的处理。

this.mediaRecorder.onstop = (e) => {                                      
       var blob = new Blob(this.chunks,                                      
                           { 'type' : 'video/mp4; codecs=H.264' });                                                       
       var fs = require('fs');                                               
       var fr = new FileReader();                                            
       var data = null;                                                      
       fr.onload = () => {                                                   
           data = fr.result;                                                 
           fs.writeFile("test.mp4", data, err => {                           
               if(err) {                                                     
                   return console.log(err);                                  
               }                                                             
               console.log("The file was saved!");                           
           });                                                               
       };                                                                    
       fr.readAsArrayBuffer(blob);                                           
   }                          

【问题讨论】:

    标签: javascript node.js electron


    【解决方案1】:

    您可以使用FileReaderBuffer 来做到这一点。

    在渲染器进程中,将事件发送到主进程以将文件与缓冲区一起保存:

    function saveBlob(blob) {
        let reader = new FileReader()
        reader.onload = function() {
            if (reader.readyState == 2) {
                var buffer = new Buffer(reader.result)
                ipcRenderer.send(SAVE_FILE, fileName, buffer)
                console.log(`Saving ${JSON.stringify({ fileName, size: blob.size })}`)
            }
        }
        reader.readAsArrayBuffer(blob)
    }
    

    取回确认:

    ipcRenderer.on(SAVED_FILE, (event, path) => {
        console.log("Saved file " + path)
    })
    

    (SAVE_FILE 和 SAVED_FILE 是包含事件名称的静态字符串)

    在主进程中:

    ipcMain.on(SAVE_FILE, (event, path, buffer) => {
        outputFile(path, buffer, err => {
            if (err) {
                event.sender.send(ERROR, err.message)
            } else {
                event.sender.send(SAVED_FILE, path)
            }
        })
    })
    

    输出文件来自'fs-extra'

    首选在主进程中处理节点操作。请参阅 Electron 安全建议。

    如果您不想使用主进程,您可以使用'electron-remote' 创建后台进程来写入文件。此外,您可以在后台进程中调用ffmpeg,将文件压缩/编码为不同的格式。

    【讨论】:

    • 抱歉来晚了。但是直到今天才有时间尝试您的解决方案。它运行良好,谢谢。我在输出文件中只有一个问题。当我尝试使用任何视频播放器播放它时,它没有正确显示视频的长度,它只显示它有 1 秒的视频,即使 1 秒结束它也会继续完整播放视频。但我不能前进,如果视频后退,如果你明白我的意思。
    • 是的,我也有同样的问题。我不确定为什么会这样。熟悉编解码器及其播放的人可以解释一下。我最终使用 ffmpeg 将其重新渲染为 mp4,然后正确显示。
    • 持续时间问题是 MediaRecorder 的问题。如果您使用 ffmpeg 进行转码,它应该会自行纠正。
    • 请发布变量 SAVE_FILE 和 SAVED_FILE 的内容
    • @JetersonMirandaGomes 这些是任意的,您可以指定任何您想在进程间通信中用于事件名称的字符串,请参阅electronjs.org/docs/api/ipc-main 了解更多信息
    猜你喜欢
    • 1970-01-01
    • 2022-01-20
    • 1970-01-01
    • 1970-01-01
    • 2012-11-01
    • 2022-11-29
    • 2015-11-23
    • 2020-07-15
    相关资源
    最近更新 更多