Pixi.JS - Capture animation frames as BLOBs

Hi,

So i've got this code working which captures animations that is going on in the canvas and returns DataURL of each frame.It works fine, but sometime it misses frames and give less FPS when my browser have lots of tabs open or on mobile devices. Basically my goal is to capture this animations JPEG, merge those and create mp4 video of it using FFMPEG.js

Just wondering if anyone have a better approach of doing it.

async function collectFrames(app, time) {
    let blobs = [];
    let ticker;
    let stopBlobPushing = false;
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            stopBlobPushing = true;
            app.ticker.remove(ticker)
            resolve(blobs);
        }, time);
        ticker = (delta) => {
            if (!stopBlobPushing) {
                app.renderer.extract.canvas(app.stage).toBlob((b) => {
                    var reader = new FileReader();
                    reader.readAsDataURL(b);
                    reader.onloadend = () => {
                        var base64data = reader.result;
                        blobs.push(base64data);
                    }
                });
            }
        }
        app.ticker.add(ticker);
    });
    let result = await promise;
    // console.log(result);
    return result;
}