FFCreator

一个基于node.js的高速视频制作库 A fast video processing library based on node.js

Video
tnfe/FFCreatortnfe.github.io/FFCreator/ffcreator

README

English | 简体中文

NPM VersionPackage LicenseTravis CICode StylePRsNode Version

Overview


FFCreator is a lightweight and flexible short video processing 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.

FFCreator is a lightweight and flexible solution that requires few dependencies and low machine configuration to start working quickly. And it simulates 90% animation effects of [animate.css](https://animate.style/). You can easily convert the animation effects on the web page side into videos.

Using FFCreator and vue.js, you can develop a web project that builds video by dragging and dropping, just as the h5 building tool. You can check it [here](https://github.com/tnfe/shida).

When you need to process a lot of video clips and need faster synthesis speed, FFCreatorLite is a better choice, please click [here](https://github.com/drawcall/FFCreatorLite) for details.

For more introduction, please see here


Features


- Based on node.js development, it is very simple to use and easy to expand and develop.
- Very few dependencies, easy to install, cross platform, just a common configuration linux server.
- The video processing 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](https://animate.style/), css animation is converted to video.
- Support subtitle components, can combine subtitles to speech to produce audio news.
- Support chart components, you can make data visualization videos.
- Support simple (expandable) VTuber, you can add YouTuber based on sequence frames.

Demo



Useage


Install npm Package


  1. ``` js
  2. npm install ffcreator --save
  3. ```

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

Node.js


  1. ``` js
  2. const { FFScene, FFText, FFVideo, FFAlbum, FFImage, FFCreator } = require("ffcreator");

  4. // Create FFCreator instance
  5. const creator = new FFCreator({
  6.     cacheDir,
  7.     outputDir,
  8.     width: 800,
  9.     height: 450
  10. });

  12. // Create scene
  13. const scene = new FFScene();
  14. scene.setBgColor("#ffcc22");
  15. scene.setDuration(6);
  16. scene.setTransition("GridFlip", 2);
  17. creator.addChild(scene);

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

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

  32. // Create a multi-photo Album
  33. const album = new FFAlbum({
  34.     list: [img1, img2, img3, img4],   // Picture collection for album
  35.     x: 250,
  36.     y: 300,
  37.     width: 500,
  38.     height: 300,
  39. });
  40. album.setTransition('zoomIn');      // Set album switching animation
  41. album.setDuration(2.5);             // Set the stay time of a single sheet
  42. album.setTransTime(1.5);            // Set the duration of a single animation
  43. scene.addChild(album);

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

  50. creator.output(path.join(__dirname, "../output/example.mp4"));
  51. creator.start();        // Start processing
  52. creator.closeLog();     // Close log (including perf)

  54. creator.on('start', () => {
  55.     console.log(`FFCreator start`);
  56. });
  57. creator.on('error', e => {
  58.     console.log(`FFCreator error: ${JSON.stringify(e)}`);
  59. });
  60. creator.on('progress', e => {
  61.     console.log(colors.yellow(`FFCreator progress: ${e.state} ${(e.percent * 100) >> 0}%`));
  62. });
  63. creator.on('complete', e => {
  64.     console.log(colors.magenta(`FFCreator completed: \n USEAGE: ${e.useage} \n PATH: ${e.output} `));
  65. });
  66. ```

Some great open source projects developed based on FFCreator and excellent tutorial articles  here


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

  1. ``` js
  2. const video = new FFVideo({ path, x: 100, y: 150, width: 500, height: 350 });
  3. video.setTimes('00:00:18', '00:00:33');
  4. video.setAudio(true); // Turn on
  5. ```

- Add a global background audio.

  1. ``` js
  2. const creator = new FFCreator({
  3.   cacheDir,
  4.   outputDir,
  5.   audio: path, // background audio
  6. });

  8. // or
  9. creator.addAudio({ path, loop, start });
  10. ```

- Add your own separate music for each scene.

  1. ``` js
  2. scene.addAudio(path);
  3. // or
  4. scene.addAudio({ path, loop, start });
  5. ```

About Cache


FFCreator3.0+ uses node Stream for data caching. The original version frees up disk space and further improves the speed.

Stream settings


- By setting parallel (or frames) to modify the number of video frames for a single parallel rendering.
  > Note: This should be set reasonably according to the actual configuration of your machine, not that the larger the value, the better.

  1. ``` js
  2. parallel: 10,
  3. ```

- Set highWaterMark, you can learn about the highWaterMark water mark from here.

  1. ``` js
  2. highWaterMark: '6mb',
  3. ```

- Set the pool to turn on or off the object pool mode.

  1. ``` js
  2. pool: true,
  3. ```

Installation


1. Install node-canvas and headless-gl dependencies


If it is a computer with a display device, such as a personal pc computer with windows, Mac OSX system, or a server server with a graphics card or display device, you can skip this step without installing this dependency.


If you are using Centos, Redhat, Fedora system, you can use yum to install.

  1. ``` sh
  2. sudo yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel
  3. ```

Install[Xvfb](https://linux.die.net/man/1/xvfb) and [Mesa](http://www.sztemple.cc/articles/linux%E4%B8%8B%E7%9A%84opengl-mesa%E5%92%8Cglx%E7%AE%80%E4%BB%8B)

  1. ``` sh
  2. sudo yum install mesa-dri-drivers Xvfb libXi-devel libXinerama-devel libX11-devel
  3. ```

If you are using Debian, ubuntu system, you can use apt to install.

  1. ``` sh
  2. sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++
  3. sudo apt-get install libgl1-mesa-dev xvfb libxi-dev libx11-dev
  4. ```

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/
- How to compiling from Source on Linux https://www.tecmint.com/install-ffmpeg-in-linux/

For a more detailed tutorial, please check here


Start Up


If it is a computer with a display device, such as a personal pc computer or a server server with a graphics card or display device, start normally npm start


Otherwise, 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

  1. ``` sh
  2. xvfb-run -s "-ac -screen 0 1280x1024x24" npm start
  3. ```

Questions


1. During installation warning missing package'xi'

  1. ``` sh
  2. No package 'xi'

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

Solution


  1. ``` sh
  2. yum install libXi-devel libXinerama-devel libX11-devel
  3. ```

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

Solution


The node app should be started as follows.

  1. ``` sh
  2. xvfb-run -s "-ac -screen 0 1280x1024x24" npm start
  3. ```

3. Npm install error ERR! command sh -c node-pre-gyp install --fallback-to-build

Solution


It may be caused by your node version. If it is nodev15, there will be this problem. https://github.com/Automattic/node-canvas/issues/1645 . Please use the stable version of node.js. For example, nodev14 (even version).

Contribute


You are very welcome to join us in developing FFCreator, if you want to contribute code, please read here.

License


MIT