Jump to content

Pixi.JS - Capture animation frames as BLOBs


Recommended Posts


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;
        }, time);
        ticker = (delta) => {
            if (!stopBlobPushing) {
                app.renderer.extract.canvas(app.stage).toBlob((b) => {
                    var reader = new FileReader();
                    reader.onloadend = () => {
                        var base64data = reader.result;
    let result = await promise;
    // console.log(result);
    return result;


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...