/canvas2video

canvas2video is a backend solution for creating and rendering dynamic videos.

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

            

@pankod/canvas2video

Create dynamic, data-driven videos on the fly.

Maintainability Test Coverage npm version npm dependencies Status dev-dependencies Status Meercode CI Score

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

or

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

License

License