About

Withmove is a fork of @pankod/canvas2video

Withmove is a simple package capable of creating mp4 videos, directly on Node.js. The core is based on @pankod/canvas2video but with additional features. The package is currently at version 0.0.1, being very unstable and is not recommended for production use.

Use Cases

📺 Personalized video advertising

🎞️ Programmatical customization of video templates

⛅ Creating dynamic videos with real-time data

Getting Started

To install the module, run the following in the command line: npm i withmove

Example

const withmove = require('withmove')

withmove({
    silent: false,
    output: 'hello-world.mp4',
    fps: {
        input: 30,
        output: 30,
    },
}, {
    width: 1920,
    height: 1080,
    fps: 30,
    silent: false
}, (prop, fabric, canvas, anim) => {
    prop(fabric.Text, 'Hello world!', {
        from: {
            left: -100,
            top: 0,
            fontFamily: 'Arial',
            fontWeight: 'Bold',
            fontSize: 100,
            fill: 'white',
        },
        to: {
            duration: 1,
            left: 0,
            ease: 'power1.in' // ease from gsap
        }
    })
}).then(() => console.log('Video successfully rendered'))

Usage

withmove itself is a function(promise), expecting three arguments: 2 config objects and 1 callback function. The first argument is the config for the encoder while the second argument being for the renderer. The two config objects are documented below. The callback function will be called with four arguments: prop, fabric, canvas and anim. Basic usage of prop is explaind below:

prop(fabric.Text, 'Hello world!', {
        from: {
            left: -100,
            top: 0,
            fontFamily: 'Arial',
            fontWeight: 'Bold',
            fontSize: 100,
            fill: 'white',
        },
        to: {
            duration: 1,
            left: 0,
            ease: 'power1.in'
        }
    })

With prop, you can add new objects directly to the canvas. The first argument is from fabric, and the new keyword is not required. The second argument is the main argument, which will be directly passed to your fabric class. The third, also the last argument is the config argument, which allows you to set specific configs and also animate easily. Without animations, you may also use as the following:

prop(fabric.Text, 'Hello world!', {
    left: 0,
    top: 0,
    fontFamily: 'Arial',
    fontWeight: 'Bold',
    fontSize: 100,
    fill: 'white',
})

Because withmove is a Promise, you can use the then method to wait for the rendering process.

...}).then(() => console.log('Video successfully rendered'))

Options

Renderer

| Properties | Type | Description | | - | - | - | | width *required | Number | canvas width | | height *required | Number | canvas height | | fps *required | Number | animation fps |

| Parameter | Type | Repo | | - | - | - | | prop | () => { ... } | fabric | fabric.js instance | Repo | | canvas | fabric.StaticCanvas | Repo | | anim | gsap.default.timeline | Repo |

Encoder

| Properties | Type | Description | | - | - | - | | frameStream *required | Readable | renderer function return value | | output *required | string| output file path | | fps *required | Object | { input: number, output: number } | | outputOptions | Array | [ '-preset veryfast', ...] | | backgroundVideo | Object | See below | | backgroundAudio | String | See below |

backgroundVideo

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

backgroundAudio

withmove({
    backgroundAudio: './path_to_file.mp3',
}, { ... }, ...)

Adds a background audio to the output. To limit the length of the original output video to the same length as the background audio, you can set the -shortest options in config.outputOptions.

withmove({
    outputOptions: ['-shortest']
}, { ... }, ...)