0.0.2 ā€¢ Published 2 years ago

withmove v0.0.2

Weekly downloads
-
License
GPL-3.0
Repository
github
Last release
2 years ago

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

PropertiesTypeDescription
width *requiredNumbercanvas width
height *requiredNumbercanvas height
fps *requiredNumberanimation fps
ParameterTypeRepo
prop() => { ... }
fabricfabric.js instanceRepo
canvasfabric.StaticCanvasRepo
animgsap.default.timelineRepo

Encoder

PropertiesTypeDescription
frameStream *requiredReadablerenderer function return value
output *requiredstringoutput file path
fps *requiredObject{ input: number, output: number }
outputOptions Array[ '-preset veryfast', ...]
backgroundVideoObjectSee below
backgroundAudioStringSee 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']
}, { ... }, ...)