MediaRecorder not saving properly in Electron

Question

I am trying to record my screen using media Recorder API using electron like this. I have a start function which starts recording the screen. I use the electron API for this. and a stop function to stop recording using MediaRecorder API from - https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder.

Currently it stops after 7 seconds.

This is how it looks like.

    var electron = require('electron');

var SECRET_KEY = 'test.html';

 var recorder;
  var blobs = [];

 console.log("its loading");

function startRecording() {
var title = document.title;
document.title = SECRET_KEY;

console.log("Started Recording");
electron.desktopCapturer.getSources({ types: ['window', 'screen'] }, function(error, sources) {
    if (error) throw error;
    for (let i = 0; i < sources.length; i++) {
        let src = sources[i];
        if (src.name === SECRET_KEY) {
            console.log("its passing");
            document.title = title;

            navigator.webkitGetUserMedia({
                audio: false,
                video: {
                    mandatory: {
                        chromeMediaSource: 'desktop',
                        chromeMediaSourceId: src.id,
                        minWidth: 800,
                        maxWidth: 1280,
                        minHeight: 600,
                        maxHeight: 720
                    }
                }
            }, handleStream, handleUserMediaError);
            return;
        }
    }
});
}

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

 function stopRecording() {

recorder.stop();
toArrayBuffer(new Blob(blobs, { type: "video/webm" }), function(ab) {
    var buffer = toBuffer(ab);
    var file = `./SavedVideos/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 = new Buffer(ab.byteLength);
let arr = new Uint8Array(ab);
for (let i = 0; i < arr.byteLength; i++) {
    buffer[i] = arr[i];
}
return buffer;

}

 var startbutton = document.getElementById('start');
 var stopbutton = document.getElementById('stop');

 // startbutton.onclick = startRecording();
 // stopbutton.onclick = stopRecording();

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

The code is passing without any error. But when I open the video which is saved using VLC, it has 0 bytes and it doesn't start.

How can fix this ?

Exact same issue here without any respond as well https://stackoverflow.com/questions/49208343/saving-desktopcapturer-to-video-file-from-electron-app — BT101, Mar 12 '18 at 14:43

score 0 · Accepted Answer · answered May 04 '18 at 13:46

You didn't wait for value to come in stopReocoring. You need to change your stopRecording function to following:

function stopRecording() {
    var save = function() {
        console.log(blobs);
        toArrayBuffer(new Blob(blobs, {type: 'video/webm'}), function(ab) {
            console.log(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();
}

MediaRecorder not saving properly in Electron

1 Answers1