Pixi.JS - Capture animation frames as BLOBs

[canvasbuddy]

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;
}

 

[ivan.popelyshev]

Hello, and welcome to the forums!

According to guys from https://beatflyer.com/ , there's no chance to do it in mobiles  and they do it through mediastream and not blobs

Edited March 29, 2020 by ivan.popelyshev

[ivan.popelyshev]

Also, app.renderer.extract.canvas(app.stage)

is BAD idea. Answer is here: https://github.com/pixijs/pixi.js/issues/6498#issuecomment-604397290 . I referenced it here: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#extract in pixijs wiki so no one can say that its missing from docs. Wiki is docs too.

[canvasbuddy]

On 3/30/2020 at 2:11 AM, ivan.popelyshev said:

Hello, and welcome to the forums!

According to guys from https://beatflyer.com/ , there's no chance to do it in mobiles  and they do it through mediastream and not blobs

So MediaStream is better way than capturing each frame?

I tried MediaStream on FabricJs, it works on PC but hangs on mobile devices.

Will try with MediaStream on PixiJS

Otherwise last option would be to do this process on client side using Puppeteer.