• Stars
    star
    244
  • Rank 165,885 (Top 4 %)
  • Language
    TypeScript
  • License
    GNU General Publi...
  • Created about 4 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

canvas2video is a backend solution for creating and rendering dynamic videos.
ย ย ย ย ย ย ย ย ย ย ย ย 

@pankod/canvas2video

Create dynamic, data-driven videos on the fly.

Maintainability Test Coverage npm version npm dependencies Status dev-dependencies Status Meercode CI Score

Created by Pankod


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

๐Ÿ“บ Personalized video advertising

๐ŸŽž๏ธ Programmatical customization of video templates

โ›… Creating dynamic videos with real-time data (See: Weather Example - Youtube)

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:

๐Ÿ“ƒFabric.js Documentation

๐Ÿ“ƒGSAP Documentation

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
}

To-do

๐Ÿ“Œ Lottie animation support

๐Ÿ“Œ Thread & concurrency management

๐Ÿ“Œ Finer control over encoder settings

License

License

More Repositories

1

superplate

A well-structured production-ready frontend boilerplate with Typescript, React Testing Library, styled-component, React Query, .env, Axios, Bundle Analyzer, Prettier and 30+ plugins. superplate creates projects for React.js, Next.js, and refine. https://pankod.github.io/superplate/
TypeScript
2,601
star
2

next-boilerplate

A well-structured production ready Next.js boilerplate with Typescript, Redux, Jest, Enzyme, Express.js, Sass, Css, EnvConfig, Fetch, Reverse Proxy, Bundle Analyzer and Built-in Project CLI. https://pankod.github.io/next-boilerplate/
TypeScript
1,558
star
3

svelte-boilerplate

Svelte application boilerplate with Webpack, Babel, PostCSS, Sass, Fetch, Jest, .Env, EsLint.
JavaScript
288
star
4

react-native-picker-modal-view

An unified React Native Picker Modal component for iOS and Android.
TypeScript
201
star
5

moleculerjs-boilerplate

A well-structured Moleculer JS Boilerplate with Typescript, CLI, Service Helpers, Swagger, Jest support and everything you'll ever need to deploy rock solid projects. https://pankod.github.io/moleculerjs-boilerplate/
TypeScript
188
star
6

react-native-boilerplate

A well-structured React Native Boilerplate with Typescript, Redux, Jest & Enzyme support and everything you'll ever need to deploy rock solid apps.
TypeScript
83
star
7

react-native-store-rating

Ratings and reviews influence how your app ranks in search results, and can affect whether someone downloads your app. Users can rate your app on a scale of desired amount of stars.
TypeScript
81
star
8

superplate-core-plugins

TypeScript
46
star
9

frontend-challenge

The recruitment test to apply for an Front-End developer role at Pankod
40
star
10

pankod-cli

Save a lot of time by generating services, components, tests for Pankod Boilerplate projects.
TypeScript
29
star
11

react-hooks-example

React Hooks Example
JavaScript
23
star
12

react-hooks-screen-type

Determining screen size type for Bootstrap 4 grid.
JavaScript
15
star
13

react-typescript-npm-package-boilerplate

TypeScript
12
star
14

typescript-enum-helper

typescript enum helper example
TypeScript
7
star
15

sapper-boilerplate

JavaScript
7
star
16

docusaurus-boilerplate

Thanks to this project, itโ€™ll be too easy to add documentation site to pankod open source projects.
JavaScript
7
star
17

react-checkbox

React checkbox component
JavaScript
7
star
18

react-native-photo-gallery-view

6
star
19

superplate-react-core-plugins

TypeScript
6
star
20

project-splash

Thanks to this component, itโ€™ll be too easy to add splash to pankod open source projects.
HTML
6
star
21

cli-boilerplate

Thanks to this project, itโ€™ll be too easy to add CLI to Pankod projects.
TypeScript
5
star
22

expo-boilerplate

Thanks to this project, itโ€™ll be too easy to add example to Pankod open source projects.
HTML
4
star
23

react-hooks-show-more-text

Handle showing more text / less text with react hooks
JavaScript
4
star
24

react-rating-star

3
star
25

react-native-rating-modal

TypeScript
2
star
26

typescript-npm-package-boilerplate

TypeScript
2
star
27

next-html

Import html in Next.js
JavaScript
1
star