@pankod/canvas2video - npm Package Compare versions

@pankod/canvas2video

Package Overview

Dependencies

173

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.3 to 1.0.4

package.json

		{
		"name": "@pankod/canvas2video",
		"version": "1.0.3",
		"version": "1.0.4",
		"description": "canvas to video renderer",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -7,5 +7,5 @@ <div align="center">
		<br/>
		<div align="center"> <h3><b>@pankod/canvas2video</b></h3><h3><b>Canvas to Video</b><h3> </div>
		<div align="center"> <h3><b>@pankod/canvas2video</b></h3> </div>

		<div align="center"> Simplifies the way to create a video from canvas content </div>
		<div align="center">Create dynamic, data-driven videos on the fly.</div>
		<br/>
		@@ -30,4 +30,14 @@ <div align="center">

		@pankod/canvas2video helps you to create videos with ease by using [gsap](https://github.com/greensock/GSAP) and [fabric](https://github.com/fabricjs/fabric.js) libraries.
		@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](https://github.com/fabricjs/fabric.js) library and add animations with [gsap](https://github.com/greensock/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 ](./examples) - [Youtube](https://www.youtube.com/watch?v=xv8M3ScElv0))


		## Getting started
		@@ -49,8 +59,7 @@

		Library exports two different functions `renderer` and `encoder`.
		`renderer` expects a `makeScene` function where you create your canvas animation by using [fabric](https://github.com/fabricjs/fabric.js) and
		[gsap](https://github.com/greensock/GSAP) methods. It returns a stream of frames to be consumed by the `encoder` in the next step.

		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.
		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`.

		You can also define a background video in `encoder` function which will be applied to your canvas with a beautiful filter.

		```js
		@@ -91,2 +100,3 @@ import { renderer, encoder } from "@pankod/canvas2video";
		},

		});
		@@ -97,4 +107,11 @@ console.log("process done,", output.path);

		For more detailed usage, checkout our examples.
		You may refer the following documentations to learn how the construct your own `makeScene` methods:

		📃[Fabric.js Documentation](http://fabricjs.com/docs/)

		📃[GSAP Documentation](https://greensock.com/docs/)

		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
		@@ -108,22 +125,28 @@

		We've provided two examples to demonstrate how canvas2video works and what can be done. See [examples](./examples)
		You'll find two working demos int the [examples](./examples) folder folder of the project. Give them a try by following the steps below:

		#### Installation
		#### Check out examples


		```bash
		git clone https://github.com/pankod/canvas2video.git
		cd examples
		npm i
		$ 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

		#### Hello World

		```bash
		npm run start:hello-world
		$ npm run start:hello-world
		```

		#### Weather

		#### Example 2

		```bash
		npm run start:weather
		$ npm run start:weather
		```
		@@ -139,5 +162,5 @@
		\| ------------------------------- \| ---------- \| ------------------------------------ \|
		\| width <br> \*_required_ \| `number` \| Width of your canvas \|
		\| height <br> \*_required_ \| `number` \| Height of your canvas \|
		\| fps <br> \*_required_ \| `number` \| Frames per second of your animations \|
		\| width <br> \*_required_ \| `number` \| canvas width \|
		\| height <br> \*_required_ \| `number` \| canvas height \|
		\| fps <br> \*_required_ \| `number` \| animation fps \|
		\| makeScene <br> \*_required_ \| `function` \| [See below](#makeScene) \|
		@@ -149,6 +172,4 @@

		You can create contents by using fabric, gsap library methods which comes default with makeScene function.
		The function takes 4 arguments(fabric, canvas, anim and compose) which is passed by the `renderer` function.

		This function takes 4 arguments(fabric, canvas, anim and compose) which is passed by the `renderer` function.

		```js
		@@ -178,4 +199,4 @@ renderer({
		\| --------------------------------- \| ---------- \| ----------------------------------- \|
		\| frameStream <br> \*_required_ \| `Readable` \| Output of your `renderer` call \|
		\| output <br> \*_required_ \| `string` \| Your output file path \|
		\| frameStream <br> \*_required_ \| `Readable` \| `renderer` function return value \|
		\| output <br> \*_required_ \| `string` \| output file path \|
		\| fps <br> \*_required_ \| `Object` \| `{ input: number, output: number }` \|
		@@ -198,4 +219,14 @@ \| backgroundVideo \| `Object` \| [See below](#backgroundVideo) \|

		## To-do

		📌 [Lottie](https://airbnb.design/lottie/) animation support

		📌 Thread & concurrency management

		📌 Finer control over encoder settings



		## License

		[License](./LICENSE)

dist/encoder.js

dist/index.js

dist/renderer.js

dist/types.js

dist/typings/encoder.d.ts

dist/typings/index.d.ts

dist/typings/renderer.d.ts

dist/typings/types.d.ts

Fixed alerts

Improved metrics

Worsened metrics