withmove v0.0.2
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']
}, { ... }, ...)