Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rahulv21

Video generation using Fabric js ,gsap and Ffmpeg

Recommended Posts

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.

Link to post
Share on other sites

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?

  • Like 1
Link to post
Share on other sites

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!!!

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×