@pankod/canvas2video

            

@pankod/canvas2video

Canvas to Video

Simplifies the way to create a video from canvas content

_{Created by Pankod}

About

@pankod/canvas2video helps you to create videos with ease by using gsap and fabric libraries.

Getting started

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

npm install @pankod/canvas2video --save

or

yarn add @pankod/canvas2video

Usage

Library exports two different functions renderer and encoder.

Define canvas properties and create stream with makeScene function by using fabric and gsap animation library methods. You get a stream as a return which then you'll use in the encoder function which convert canvas to video output.

You can also define a background video in encoder function which will be applied to your canvas with a beautiful filter.

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) => {
            var 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);
};

For more detailed usage, checkout our examples.

Examples

We've provided two examples to demonstrate how canvas2video works and what can be done. See examples

Installation

git clone https://github.com/pankod/canvas2video.git
cd examples
npm i

Hello World

npm run start:hello-world

Weather

npm run start:weather

Options

Renderer

Properties	Type	Description
width *required	number	Width of your canvas
height *required	number	Height of your canvas
fps *required	number	Frames per second of your animations
makeScene *required	function	See below

makeScene

You can create contents by using fabric, gsap library methods which comes default with makeScene function.

This 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	Output of your renderer call
output *required	string	Your 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
}

License

License