@pankod/canvas2video
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
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:
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
}