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.

github : https://github.com/tnfe/FFCreator

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. You can easily convert the animation effects on the web page side into videos.

When you need to process a lot of video without special cool transition animations, FFCreatorLite is a better choice, please click here 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, css animation is converted to video.
  • Support subtitle components, can combine subtitles to speech to produce audio news.
  • Support simple (expandable) VTuber, you can add YouTuber based on sequence frames.
  • FFCreatorLite has faster speed, sometimes it is more suitable for you than FFCreator.

Demo

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({
    cacheDir,
    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: [img1, img2, img3, img4],   // Picture collection for album
    x: 250,
    y: 300,
    width: 500,
    height: 300,
});
album.setTransition('zoomIn');      // Set album switching animation
album.setDuration(2.5);             // Set the stay time of a single sheet
album.setTransTime(1.5);            // Set the duration of a single animation
scene.addChild(album);

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

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

creator.on('start', () => {
    console.log(`FFCreator start`);
});
creator.on('error', e => {
    console.log(`FFCreator error: ${JSON.stringify(e)}`);
});
creator.on('progress', e => {
    console.log(colors.yellow(`FFCreator progress: ${e.state} ${(e.percent * 100) >> 0}%`));
});
creator.on('complete', e => {
    console.log(colors.magenta(`FFCreator completed: \n USEAGE: ${e.useage} \n PATH: ${e.output} `));
});

For a more detailed tutorial, please check 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).
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});

Built With

Share this project:

Updates