我在前端做了一個可以錄製視訊畫面的功能
我現在的做法是錄製完畢後
把所有chunks變成blob然後丟給main-process(node.js)
讓node去做一次寫入
但是一次性的寫入對太大影片是不是會產生問題啊?
如何在錄製開始時
將一個個的chunk丟到electron的main-process(node.js)裡面
當錄製完畢時剛好變成一個影片檔案
另外我一次性寫入
後影片無法撥放
這是electron renderer process前端的code:
let chunks = []
mediaRecorder = new MediaRecorder(stream)
mediaRecorder.addEventListener('dataavailable', function (e) {
chunks.push(e.data) // 取得資料
})
mediaRecorder.addEventListener('stop', function (e) {
var blob = new Blob(chunks, { 'type': 'video/webm; codecs=vp9' })
chunks = [];
let fileName = Date.now();
let reader = new FileReader()
reader.onload = function () {
if (reader.readyState == 2) {
let fileName = Date().now();
var buffer = new Buffer(reader.result)
//丟給nodejs處理寫入
ipcRenderer.send('save-video', fileName, buffer)
}
}
reader.readAsArrayBuffer(blob)
})
這是electron main process nodejs的code負責寫入檔案
ipcMain.on('save-video', async (event, name, buffer) => {
let namepath = defaultPATH + name + ".webm"
//C:\Users\ziv\Pictures\WEBCAM CAPTURE\
fs.writeFile(namepath, buffer, function (err) {
if (err) {
console.error('Failed to save video ' + err);
} else {
console.log('Saved video: ' + namepath);
}
});
})
看看這個能不能用
https://fireship.io/lessons/electron-screen-recorder-project-tutorial/
google keyword:electron video recorder