Poor quality when using with ElectronJS

[samueleastdev]

Hi,

I am prototyping a screen recorder app using ElectronJS and the webrtc framework, seeing whats possible.

I am using a mac and you can download and see the project I am working on here.

https://github.com/samueleastdev/electronjs-webrtc-screenrecorder-prototype

You can run the project by running.

npm install npm start

I have used the ElectonJS desktopCapturer api to get the current screens and I am outputting these to the dom.

When a screen is clicked I grab the screen id and pass it to getUserMedia the electron capture api doesn't get the size width and height which is annoying so I omit these.

var videoConstraints = {
    video: {
        mandatory: {
            chromeMediaSource: 'screen',
            chromeMediaSourceId: id,
            //minWidth: 1280,
            //minHeight: 720,
            //maxWidth: 1920,
            //maxHeight: 1080
        },
        optional: []
    }
};

navigator.mediaDevices.getUserMedia(videoConstraints).then(cb).catch(function(error) {
    console.error('getScreenId error', error);
    alert('Failed to capture your screen. Please check browser console logs for further information.');
});

I output the captured stream to a html5 video element to view playback I then listen to the loadedmetadata to get the width and height that I can then pass to the RecordRTC method.

video.addEventListener("loadedmetadata", function(e) {

    let video_width = this.videoWidth;
    let video_height = this.videoHeight;

    captureAudio(function(mic) {

        recorder = RecordRTC([stream, mic], {
            bitsPerSecond: 8000000000,
            frameInterval: 90,
            type: 'video',
            //mimeType: 'video/mp4',
            video: {
                width: video_width,
                height: video_height
            }
        });
        screenRec = stream;
        micRec = mic;

        //Start recording
        recorder.startRecording();

    });

}, false);

I have had to capture audio like that due to platform restriction on IOS.

It records fine and captures the audio saves to a .webm

My question is the quality of the recording is not terrible but it is also not great and could be better certainly not the same as the screen being recorded. I assume this must be something to do with the resolution output of the player being passed to the RecordRTC method.

Can anyone point me in the right direction or give me some tips on how to get a better quality recording.

Thanks