When I recorded large Video, Web Application Crashed

[vgokul129]

I have the following source code to record Video stream(Video constraints: width: 1920, height: 1080, frameRate: 60).

function startRecord(){
        recorder = RecordRTC(window.stream, {
            type: 'video',
            mimeType: 'video/webm;codecs=vp8',
            recorderType: MediaStreamRecorder,
        });

        recorder.startRecording();
}

function stopRecord(){
  recorder.stopRecording(function() {
     var blob = recorder.getBlob();
        getSeekableBlob(blob, function(seekableBlob){
        var fileName = 'video.webm';
        var file = new File([seekableBlob], fileName, {
            type: 'video/webm'
        });

         invokeSaveAsDialog(file);
            });

    });
}

When I try to record video for long time (Say 1/2 an hour) video my application crashed in a while after invoking stopRecording() method.

Note: For small Video records its working well.

Platform: Chromebook
OS Version: 73.0.3683.88 (Official Build)

I found an exact similar issue when tried with MediaStream API. When the same code works good in Linux and Windows Chrome Browsers.

[vgokul129]

@muaz-khan : Please look into this issue. I am struck with this so long. Any idea ?

[flyfly6]

I've encounted the same problem and here is my solution:

• Increase maximum recording interval according to Not able to record more than 1 hour #144 (comment), default is 1 hour

• Set timeSlice in configuration and get intervals based blobs via ondataavailable callback function

• Use https://github.com/jimmywarting/StreamSaver.js to create a writable stream directly to the file system and save these blobs

Hope this helps

[vctormb]

@flyfly6 Is it possible to show some example on how to increase the maximum recording interval? I have cases that the user can record videos for about 3 hours+. Which size is great to put and how? Thanks!

[tonai]

@flyfly6 using timeslice and ondataavailable does not prevent the data to be stored inside local variable arrayOfBlobs.
You just get them
So in fact you should still have memory problems.

[gnidustotalus]

@muaz-khan Is there any way to empty the local arrayOfBlobs after each ondataavailable event?

[tonai]

There is an opened PR to fix this issue but not sure this repository is still very active.

[gnidustotalus]

The last commit was yesterday.

[tonai]

Yes after 2 years of inactivity