I am working on a canvas to video converter. Frames are generated from an animated canvas with .toDataURL(), then sent to a Cloud Function to be converted into a video file with FFMPEG. Since the http requests have their limits, instead of sending them directly in a request body, I am first uploading frames to Firebase Storage, then downloading them in my Cloud Function. With FPS set to 25 and a 1 minute video duration I get 1.5K frames that need to be sent to Firebase Storage. Their free daily limit is 20K uploads which I can hit pretty fast if I have a longer video or multiple canvas conversions each day. My idea was to concatenated those Data URLs in a single text file, upload it to Firebase Storage, then split into individual files in my Cloud Function.

const frames = [];

for (let index = 0; index < maxFrames; index++) {
  ...
  frames.push(canvas.toDataURL('image/jpeg', .75));
}

const blob = new Blob([frames.join('\n')], { type: 'text/plain' });

Everything works like a charm with short videos, however longer videos get this Uncaught RangeError: Invalid string length error which basically means that the resulting string is too long. Any ideas or workarounds?