How to Remove Blank Frames in RecordRTC

Question

I am stuck on some point. Please help me to figure it out.

When any peer connection (In Video Conferencing) is disconnected and I reconnect them, then a blank frame is added in Recording, I am using RecordRTC and testing it in Chrome 74.0 I think it is happening because When Peer Connection is disconnected then the RecordRTC already have the previous connected data Video Elements, And I just want to remove those blank Elements.

I am attaching the screenshot of Recorded Video please help me to figure it out.

Here in this image, you can see we There are 5 Screens, In which 2, 3, 4 are blank, Because the Peer Connection is closed and reconnected. So I want these 2 Working Screens(1, 5) [ 1= Local Stream, 5 = Remote Stream] in my blob or we can say which Recording. Please help me to figure it out this issue.

Thank you

Answer 1

Please use this solution, We just need to give the condition to drow the first and last element on the canvas. Update this code in function drawVideosToCanvas() .

var videosLength = videos.length;
if(videosLength > 2){
    videosLength = 2;
}

var fullcanvas = false;
var remaining = [];

var length = videos.length;
videos.forEach(function(video,idx) {
    if (!video.stream) {
        video.stream = {};
    }
    if (video.stream.fullcanvas) {
        fullcanvas = video;
    } else {
        if(idx==0 || idx == (length-1)){
            if(video.stream.active)
                remaining.push(video);
        }
    }
});