Video generation using Fabric js ,gsap and Ffmpeg

[rahulv21]

const renderer: Renderer = (config) =>
    new Promise((resolve, reject) => {
        try {
            const { width, height, fps, makeScene, silent = true } = config;
            const canvas = new fabric.StaticCanvas(null, { width, height });

            const anim = new TimelineMax({ paused: true });
            const stream = new Readable();
            typeCheck(reject, config);
            let totalFrames: number;
            let currentFrame = 0;
            gsap.ticker.fps(fps);
            const renderFrames = () => {
                anim.progress(currentFrame++ / totalFrames);
                if (currentFrame <= totalFrames) {
                    canvas.renderAll();
                    const buffer = Buffer.from(
                        canvas.toDataURL().replace(/^data:\w+\/\w+;base64,/, ""),
                        "base64",
                    );
                    stream.push(buffer);
                    renderFrames();
                } else {
                    stream.push(null);
                    resolve(stream);
                }
            };

            makeScene(fabric, canvas, anim, () => {
                const duration =  anim.duration();
                console.log({"totalDuration":duration});
                totalFrames = Math.max(1, Math.ceil((duration / 1) * fps));
                renderFrames();
            });
        } catch (e) {
            reject(new Error("An error occured in the renderer."));
        }
    });

import { renderer, encoder } from "@pankod/canvas2video";
import { Power3 } from "gsap";

const helloWorld = async () => {
    try {
        const stream = await renderer({
            silent: false,
            width: 1920,
            height: 1080,
            fps: 30,
            makeScene: (fabric, canvas, anim, compose) => {
                const text = new fabric.Text("Hello world", {
                    left: 400,
                    top: 400,
                    fontSize: 100,
                    fill: "#f99339",
                    angle: 0,
                });
                canvas.add(text);
                anim.to(text, {
                    duration: 1,
                    angle: 360,
                    ease: Power3.easeOut,
                  	delay:"2s"
                });
                compose();
            },
        });

        const output = await encoder({
            silent: false,
            frameStream: stream,
            output: "output/hello-world.mp4",
            fps: {
                input: 30,
                output: 30,
            },
        });
        console.log("process done,", output.path);
    } catch (e) {
        console.log("error", e);
    }
};

helloWorld();

Hey guys try to create a small package using gsap and Fabric js  which can create dynamic video from canvas on the server side.

package is inspired by click here . TimelineMax is used for creating a time frame for all transition, i want to give dynamic delay for the animation of fabric js component, but the problem is ``delay , pause , resume functions of timelinemax are aren't working, the delay properties are in consistence.

i have tried using e.g:- 

anim.from("component",{left:0,opacity:0,delay:"2.3"});
anim.from("component",{left:0,opacity:0},"+=2.3");

in above cases delay was greater than 2 seconds

please help.

[Cassie]

Hiya,

There's quite a lot to parse here so bear with me!

First things first: You're using an older version of GSAP. We definitely recommend that you use GSAP 3.

Secondly, what is the expected behaviour of the delays and what is happening for you? Could you break down the GreenSock part for me a little?

[Rodrigo]

Hi,

 

Delay shouldn't be a string, it should be a number. Also the reason why the position parameter is not working is kind of a mystery, based on this it should work:

 

https://github.com/pankod/canvas2video/blob/master/src/renderer.ts#L42

 

That is a timeline instance, perhaps something in that package is not working properly.

 

I'd recommend you to try the delay with a number and create an issue in order to get the position parameter to work in the canvas2video repo.

 

Happy Tweening!!!