Nanoprogrammed Penultimate Musicianship

    @pankod/canvas2video
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published
                

    @pankod/canvas2video

    Create dynamic, data-driven videos on the fly.

    Maintainability Test Coverage npm version npm dependencies Status dev-dependencies Status

    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

    Install

    npm i @pankod/canvas2video

    DownloadsWeekly Downloads

    13

    Version

    1.0.7

    License

    GPL-3.0-only

    Unpacked Size

    841 kB

    Total Files

    13

    Last publish

    Collaborators

    • alicanerdurmaz
    • salihozdmr
    • omerfarukaplak
    • pankodbot
    • yildirayyunlu
    • aliemirsen