@pankod/canvas2video
Canvas to Video
Simplifies the way to create a video from canvas content
About
@pankod/canvas2video helps you to create videos with ease by using gsap and fabric libraries.
Getting started
To install the module, run the following in the command line:
npm install @pankod/canvas2video --save
or
yarn add @pankod/canvas2video
Usage
Library exports two different functions renderer
and encoder
.
Define canvas properties and create stream with makeScene function by using fabric and gsap animation library methods. You get a stream as a return which then you'll use in the encoder
function which convert canvas to video output.
You can also define a background video in encoder
function which will be applied to your canvas with a beautiful filter.
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) => {
var 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);
};
For more detailed usage, checkout our examples.
Examples
We've provided two examples to demonstrate how canvas2video works and what can be done. See examples
Installation
git clone https://github.com/pankod/canvas2video.git
cd examples
npm i
Hello World
npm run start:hello-world
Weather
npm run start:weather
Options
Renderer
Properties | Type | Description |
---|
width *required | number | Width of your canvas |
height *required | number | Height of your canvas |
fps *required | number | Frames per second of your animations |
makeScene *required | function | See below |
makeScene
You can create contents by using fabric, gsap library methods which comes default with makeScene function.
This function takes 4 arguments(fabric, canvas, anim and compose) which is passed by the renderer
function.
renderer({
makeScene: (fabric, canvas, anim, compose) => {
},
});
Parameter | Type | |
---|
fabric | fabric.js instance | Repo |
canvas | fabric.StaticCanvas | Repo |
anim | gsap.TimelineMax | Repo |
compose | () => void | |
Encoder
Properties | Type | Description |
---|
frameStream *required | Readable | Output of your renderer call |
output *required | string | Your output file path |
fps *required | Object | { input: number, output: number } |
backgroundVideo | Object | See below |
backgroundVideo
backgroundVideo: {
videoPath: string,
inSeconds: number,
outSeconds: number,
}
License
License