Finish Recording Button Save Old Screen Recording Again Into Local Folder

Question

I am working with RecordRTC library for recording screen together with speaker/microphone sound. I have three buttons on my interface, like Start Recording, Stop Recording & Finish Recording.

Start Recording button simply start the screen recording, like as follow:

var recorder;
var recorder2Screen2;

document.getElementById('btn-start-recording').onclick = function () {
    navigator.mediaDevices.getDisplayMedia({ audio: true, video: { width: 1280, height: 720 } }).then(function (screen) {
            callback(screen);
        }).catch(function (error) {
            alert('Unable to capture your screen. Please check console logs.');
            console.error(error);
    });
    
    recorder = RecordRTC(screen, {
        type: 'video'
    });

    recorder.startRecording();

    // release screen on stopRecording
    recorder.screen = screen;
    recorder2Screen2 = recorder;
};

While Stop Recording button stop the recording and saves the recorded screen video into local folder on my PC and restart the recorder again, like as follow:

document.getElementById('btn-stop-recording').onclick = function () {

recorder2Screen2.stopRecording(function () {
    getSeekableBlob(recorder2Screen2.getBlob(), function (seekableBlob) {
        PostScreenRecordedBlob(seekableBlob, getScreenRecordedFileName("webm"));
    });
});

recorder.startRecording();
};

And finally the Finish Recording button first save the recording (which was started on Stop Button click) into the same local folder on my PC and then stop the recorder and destroy the object, like this:

document.getElementById('btn-finish-recording').onclick = function () {
    recorder2Screen2.stopRecording(function () {
        getSeekableBlob(recorder2Screen2.getBlob(), function (seekableBlob) {
            PostScreenRecordedBlob(seekableBlob, getScreenRecordedFileName("webm"));
            stopScreenRecordingCallback();
        });
    });
};

function stopScreenRecordingCallback() {
    recorder2Screen2.screen.stop();
    recorder2Screen2.destroy();
    recorder2Screen2 = null;
}

When I start the screen recording by clicking on the Start Recording button and then click on the Stop Recording button, the video is saved in my local folder correctly as I need. However, there seems to be some issue with the Finish Recording button as when I click on it, the old screen recording (which is already saved when I click on the Stop Recording button the last time) is saved again.

I think I am calling the StopScreenRecordingCallBack(); function in the wrong way but I can't figure out the exact issue with it. Any help will be highly appreciated.

Answer 1

You're probably not flushing the recordedChunks array, the array where all the chunks are put together to form a Blob, that's why you get a continues recording with the last recorded video.

At the end of each recording just add

recordedChunks = [];