Callback not called when stopping a long video recording

[chrisrollins65]

I am programmatically stopping the recording of the RecordRTC Chrome extension in Vue with the following code:

this.recorder.stopRecording((blob) => {
  console.log('sending');
  let formData = new FormData();
  formData.append('blob', blob);
  axios.post('save-video', formData);
  let url = URL.createObjectURL(blob);
  console.log(url);
});

This works perfectly for short videos (like 5 minute videos), but with longer videos the recording stops, but the callback is never called and I'm unable to access the blob for processing.

I did a little digging in the code and I see that the event to stop the recording is called but the stoppedRecording event doesn't appear to get fired? I see in background.contentScript.js that it checks for this event in order to call the callback.

But I'm not sure how to determine why the event isn't firing or if the listener isn't picking it up.

My setup:

Chrome 88.0.4324.190
Windows 10
16 GB ram
Recording settings:

• Screen + Speakers
• H264
• 1920p
• 30 framerate
• default bitrates
• fix video seeking issues

I've also tried playing around with these options to see if they make any difference. For example I noticed that the issue is worse for VP9 than with H264.

The videos I'm recording are very simple, just text with a colored gradient background, a few images and little more. I noticed it works for longer videos if I remove the colored gradient background, presumably because it results in a smaller file size?

Any insight into how this issue can be resolved? Or is there any other way of programmatically accessing the blob apart from relying on that callback?