ffcreator

Overview

FFCreator is a lightweight and flexible short video production library based on Node.js. You only need to add some pictures, music or video clips, you can use it to quickly create a very exciting video album.

Nowadays, short video is an increasingly popular form of media communication. Like weishi and tiktok is full of all kinds of wonderful short videos. So how to make users visually create video clips on the web easily and quickly. Or based on pictures Text content, dynamic batch generation of short videos is a technical problem.

We know that most video processing is often inseparable from ffmpeg, but pure ffmpeg is not so easy to use and convenient in terms of fine animation effects. It is different from the fixed template of After Effects (aerender.exe depends on the windos server) to generate video. FFCreator uses ffmpeg, headless-webgl and other technologies, which can support various animation effects very flexibly, such as 100% Restore the animation effect of animate.css, you can easily realize various animations on the web side

Features

• Based on node.js development, it is very simple to use and easy to expand and develop.
• Very few dependencies, easy to install, just a common configuration linux server.
• The video production speed is very fast, a 5 minute video only needs 1-2 minutes.
• Nearly a hundred kinds of scene transition animation effects.
• Support picture, sound, video clips, text and other elements.
• Contains most animation effects of animate.css, css animation is converted to video.
• Support subtitle components, can combine subtitles to speech to produce audio news.
• Support simple (expandable) YouTuber, you can add YouTuber based on sequence frames.

Useage

Install npm Package

npm install ffcreator --save

Note: To run the preceding commands, Node.js and npm must be installed.

Node.js

const { FFScene, FFText, FFVideo, FFAlbum, FFImage, FFCreator } = require("ffcreator");

// Create FFCreator instance
const creator = new FFCreator({
  outputDir,
  width: 800,
  height: 450
});

// Create scene
const scene = new FFScene();
scene.setBgColor("#ffcc22");
scene.setDuration(6);
scene.setTransition("GridFlip", 2);
creator.addChild(scene);

// Create Image and add animation effect
const image = new FFImage({ path: path.join(__dirname, "../assets/01.jpg") });
image.addEffect("moveInUp", 1, 1);
image.addEffect("fadeOutDown", 1, 4);
scene.addChild(image);

// Create Text
const text = new FFText({ text: "hello 你好", x: 400, y: 300 });
text.setColor("#ffffff");
text.setBackgroundColor("#000000");
text.addEffect("fadeIn", 1, 1);
scene.addChild(text);

// Create a multi-photo Album
const album = new FFAlbum({ list: [p1, p2, p3], x: 10, y: 10, width: 600, height: 300 });
album.setTransition("random");
album.setDuration(1.5);
scene.addChild(album);

// Create Video
const video = new FFVideo({ path: mini, x: 300, y: 50, width: 300, height: 200, resetXY: true });
video.addEffect("zoomIn", 1, 0);
scene.addChild(video);

creator.output(path.join(__dirname, "../output/example.mp4"););
creator.start();

// Add ffcreator event handler
creator.on("start", () => {
  console.log(`[FFCreator] ${id} start`);
});

creator.on("error", err => {
  console.log(`[FFCreator] ${id} error: ${err}`);
});

creator.on("complete", () => {
  console.log(`[FFCreator] ${id} complete`);
});

About Audio

Sound is the soul of a video. FFCreator supports multiple ways to add audio. You can not only add global background music, but also set your own voice or soundtrack for each individual scene.

• In FFVideo - Turn on video background music (default off).

const video = new FFVideo({ path, x: 100, y: 150, width: 500, height: 350 });
video.setTimes("00:00:18", "00:00:33");
video.setAudio(true); // Turn on

• Add a global background audio.

const creator = new FFCreator({
  cacheDir,
  outputDir,
  audio: path // background audio
});

// or
creator.addAudio({ path, loop, start });

• Add your own separate music for each scene.

scene.addAudio(path);
// or
scene.addAudio({ path, loop, start });

Installation

1. Install dependencies related to node-webgl

• apt-get - If you are a server such as ubuntu, Debian, etc. You need to install these dependencies.

sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++

• yum - If you are a server such as Redhat, Centos, Fedora, etc. You need to install these dependencies.

sudo yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel

2. Because FFCreator depends on FFmpeg, you need to install a regular version of FFmpeg

• How to Install and Use FFmpeg on CentOS https://linuxize.com/post/how-to-install-ffmpeg-on-centos-7/
• How to Install FFmpeg on Debian https://linuxize.com/post/how-to-install-ffmpeg-on-debian-9/

3.If you are running your own minimal Linux server, it will likely not provide an X11 nor an OpenGL environment. To setup such an environment you can use those two packages:

• Xvfb is a lightweight X11 server which provides a back buffer for displaying X11 application offscreen and reading back the pixels which were drawn offscreen. It is typically used in Continuous Integration systems. It can be installed on CentOS with yum install -y Xvfb, and comes preinstalled on Ubuntu.

• Mesa is the reference open source software implementation of OpenGL. It can be installed on CentOS with yum install -y mesa-dri-drivers, or apt-get install libgl1-mesa-dev. Since a cloud Linux instance will typically run on a machine that does not have a GPU, a software implementation of OpenGL will be required.

yum install -y mesa-dri-drivers
// or apt-get install libgl1-mesa-dev
yum install -y Xvfb
yum install -y libXi-devel libXinerama-devel libX11-devel

Start Up

You must use the xvfb-run script command to start the program to use webgl under the Linux server

xvfb-run more detailed command parameters http://manpages.ubuntu.com/manpages/xenial/man1/xvfb-run.1.html

xvfb-run -s "-ac -screen 0 1280x1024x24" npm start

Questions

1. During installation warning missing package'xi'

No package 'xi' 

foundgyp: Call to 'pkg-config --libs-only-l x11 xi xext' returned exit status 1 while in angle/src/angle.gyp. while loading dependencies of binding.gyp while trying to load binding.gyp

Solution

yum install libXi-devel libXinerama-devel libX11-devel

1. Start node app and prompt error message doesn't support WebGL....

Solution

The node app should be started as follows.

xvfb-run -s "-ac -screen 0 1280x1024x24" npm start

MIT License