canvas2video: A TypeScript repository from Planetary

@pankod/canvas2video

Create dynamic, data-driven videos on the fly.

_{Created by Pankod}

About

@pankod/canvas2video is a backend solution for creating and rendering dynamic videos. It lets you build web canvas scenes by using the Cairo-backed fabric library and add animations with gsap. Your animation timeline will be rendered frame by frame and piped to ffmpeg renderer for the final video output.

Use Cases

📺 Personalized video advertising

🎞️ Programmatical customization of video templates

⛅ Creating dynamic videos with real-time data (See: Weather Example - Youtube)

Getting started

To install the module, run the following in the command line:

npm install @pankod/canvas2video --save

yarn add @pankod/canvas2video

Usage

renderer expects a makeScene function where you create your canvas animation by using fabric and gsap methods. It returns a stream of frames to be consumed by the encoder in the next step.

Below is a basic example of a one-second rotation animation of "Hello World" text. After rendering the animation and encoding the video, the output will be saved to output/hello-world.mp4.

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

const helloWorld = async () => {
    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,
            });
            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);
};

You may refer the following documentations to learn how the construct your own makeScene methods:

📃Fabric.js Documentation

📃GSAP Documentation

You can optionally provide the encoder function a backgroundVideo object. In this case, your animation will be used as an overlay layer and merged with the background video. More information about the usage of background videos is given in the Options section.

Examples

You'll find two working demos int the examples folder folder of the project. Give them a try by following the steps below:

Check out examples

$ git clone https://github.com/pankod/canvas2video.git

$ cd examples

$ npm i

After this, you can run commands at the below then check examples/output directory:

Example 1

$ npm run start:hello-world

Example 2

$ npm run start:weather

Options

Renderer

Properties	Type	Description
width *required	`number`	canvas width
height *required	`number`	canvas height
fps *required	`number`	animation fps
makeScene *required	`function`	See below

makeScene

The function takes 4 arguments(fabric, canvas, anim and compose) which is passed by the renderer function.

renderer({
    /* .. */
    makeScene: (fabric, canvas, anim, compose) => {
        /**
         * your code to create and manipulate your canvas
         */
    },
});

Parameter	Type
fabric	fabric.js instance	Repo
canvas	fabric.StaticCanvas	Repo
anim	gsap.TimelineMax	Repo
compose	() => void

Encoder

Properties	Type	Description
frameStream *required	`Readable`	`renderer` function return value
output *required	`string`	output file path
fps *required	`Object`	`{ input: number, output: number }`
backgroundVideo	`Object`	See below

backgroundVideo

backgroundVideo: {
  videoPath: string, // your background video path
  inSeconds: number, // video start time in seconds
  outSeconds: number, // video end time in seconds
}

To-do

📌 Lottie animation support

📌 Thread & concurrency management

📌 Finer control over encoder settings

planetary/canvas2video