Saving DesktopCapturer to file in Electron since Buffer() deprecated

Question

Hello I have already read and attempted the thread: Saving desktopCapturer to video file in Electron

This is what I have so far:

const { desktopCapturer } = require('electron')
var fs = require('fs');

function startRecording(){
    desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
    for (const source of sources) {
        if (source.name === 'Entire Screen') {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({
                audio: false,
                video: {
                    mandatory: {
                    chromeMediaSource: 'desktop',
                    chromeMediaSourceId: source.id,
                    minWidth: 1280,
                    maxWidth: 1280,
                    minHeight: 720,
                    maxHeight: 720
                    }
                }
                })
                handleStream(stream)
            } catch (e) {
                handleError(e)
            }
            return
        }
    }})
}

function handleStream(stream) {
    recorder = new MediaRecorder(stream);
    blobs = [];
    recorder.ondataavailable = function(event) {
        blobs.push(event.data);
    };
    recorder.start();
}

function stopRecording() {
    recorder.stop();
    console.log(blobs);
    toArrayBuffer(new Blob(blobs, {type: 'video/webm'}), function(ab) {
        var buffer = toBuffer(ab);
        var file = `./videos/example.webm`;
        fs.writeFile(file, buffer, function(err) {
            if (err) {
                console.error('Failed to save video ' + err);
            } else {
                console.log('Saved video: ' + file);
            }
        });
    });
}

function handleUserMediaError(e) {
    console.error('handleUserMediaError', e);
}

function toArrayBuffer(blob, cb) {
    let fileReader = new FileReader();
    fileReader.onload = function() {
        let arrayBuffer = this.result;
        cb(arrayBuffer);
    };
    fileReader.readAsArrayBuffer(blob);
}

function toBuffer(ab) {
    let buffer =  Buffer.alloc(ab.byteLength);
    let arr = new Uint8Array(ab);
    for (let i = 0; i < arr.byteLength; i++) {
        buffer[i] = arr[i];
    }
    return buffer;
}

// Record for 3.5 seconds and save to disk
startRecording();
setTimeout(function() { stopRecording() }, 3500)

I just want to save the recorded video to a file. The file ends up being empty when it saves. I have been stuck at this awhile and would appreciate any advice. Thank you

Answer 1

Welp I stumbled upon this thread: Saving desktopCapturer to video file from Electron app

and changed my stopRecording() function to :

function stopRecording() {
    const save = () =>{
        toArrayBuffer(new Blob(blobs, {type: 'video/webm'}), function(ab) {
            var buffer = toBuffer(ab);
            var file = `./videos/example.webm`;
            fs.writeFile(file, buffer, function(err) {
                if (err) {
                    console.error('Failed to save video ' + err);
                } else {
                    console.log('Saved video: ' + file);
                }
            });
        });
    }
    recorder.onstop = save;
    recorder.stop();

}

and it seems to be working. Cool!