問題描述

我正在創(chuàng)建一個 Electron 應(yīng)用程序，在其中我正在從網(wǎng)絡(luò)攝像頭和桌面記錄數(shù)據(jù)，在記錄會話結(jié)束時，我想將數(shù)據(jù)保存到后臺的文件中.我不知道如何將數(shù)據(jù)從 blob 直接寫入文件.有什么建議?以下是我當(dāng)前對 MediaRecord Stop 事件的處理.

I am creating an Electron Application in which I am recording data from webcam and desktop, at the end of the recording session, I want to save the data to a file in the background. I do not know how to write the data from a blob to a file directly. Any suggestions? Below is my current handling for MediaRecord Stop event.

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);                                           
   }                          

推薦答案

您可以使用 FileReader 和 Buffer 來完成.

You can do it using FileReader and Buffer.

在渲染器進程中，將事件發(fā)送到主進程以將文件與緩沖區(qū)一起保存:

In the renderer process, send the event to the main process to save the file with the buffer:

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)
}

取回確認(rèn):

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

(SAVE_FILE 和 SAVED_FILE 是包含事件名稱的靜態(tài)字符串)

(SAVE_FILE and SAVED_FILE are static strings containing event name)

在主進程中:

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)
        }
    })
})

outputFile 來自 'fs-extra'

outputFile is from 'fs-extra'

首選在主進程中處理節(jié)點操作.請參閱 Electron 安全建議.

Handling node operations in main process is preferred. See Electron Security suggestions.

如果你不想使用主進程，你可以使用 'electron-remote' 創(chuàng)建后臺進程來寫入文件.此外，您可以在后臺進程中調(diào)用 ffmpeg 將文件壓縮/編碼為不同的格式.

If you do want to not use main process, you can use 'electron-remote' to create background processes to write the file. Additionally, you can invoke ffmpeg in the background process to compress/encode the file into different format.

這篇關(guān)于在電子應(yīng)用程序中將文件從 blob 寫入磁盤的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！