ByteNoteByteNote
字

字节笔记本

2026年2月22日

FFCreator：基于 Node.js 的轻量短视频加工库

#开源工具

FFCreator 是一个基于 Node.js 的轻量、灵活的短视频加工库。您只需要添加几张图片或视频片段再加一段背景音乐，就可以快速生成一个很酷的视频短片。本文将详细介绍 FFCreator 的核心特性、安装方法和使用示例。

项目简介

FFCreator 由腾讯新闻前端团队（tnfe）开发维护，是一个开源的短视频生成工具。截至目前，该项目在 GitHub 上已获得超过 3.1k stars，是一款非常受欢迎的视频处理库。

今天，短视频已成为一种越来越流行的媒体传播形式。像微视和抖音这种 app 每天都会生产成千上万个精彩短视频，而这些视频也为产品带来了巨大的流量和人气。随之而来，如何让用户可以快速生产一个短视频；或者产品平台如何利用已有的图片、视频、音乐素材批量合成大量视频就成为一个技术难点。

FFCreator 是一种轻量又简单的解决方案，只需要很少的依赖和较低的机器配置就可以快速开始工作。并且它模拟实现了 animate.css 90%的动画效果，您可以轻松地把 web 页面端的动画效果转为视频。

核心特性

  • 完全基于 Node.js 开发：非常易于使用，并且易于扩展和开发
  • 依赖少、易安装：跨平台，对机器配置要求较低
  • 视频制作速度极快：一个 5 分钟的视频只需要 1-2 分钟
  • 丰富的过渡动画：支持近百种场景炫酷过渡动画效果
  • 多元素支持：支持图片、声音、视频剪辑、文本等元素
  • 字幕组件：可以将字幕与语音 TTS 结合合成音频新闻
  • 图表组件：可以制作数据可视化类视频
  • 虚拟主播支持：支持简单（可扩展）的虚拟主播，您可以制作自己的虚拟主播
  • CSS 动画转换：包含 animate.css 90%的动画效果，可以将 CSS 动画转换为视频

技术栈

  • Node.js >= 8.0.0 - 运行环境
  • FFmpeg - 视频编码处理
  • node-canvas - 图形渲染
  • headless-gl - 无头环境下的 WebGL 支持

安装指南

前置要求

  • Node.js >= 8.0.0
  • FFmpeg 已安装

1. 安装 node-canvas 及 headless-gl 依赖

注意：若是有显示设备的电脑，比如 Windows、Mac OSX 系统的个人 PC 电脑或者有显卡或显示设备的 server 服务器，则可跳过这一步无需安装此依赖。

CentOS / Redhat / Fedora 系统：

bash
sudo yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel
sudo yum install mesa-dri-drivers Xvfb libXi-devel libXinerama-devel libX11-devel

Debian / Ubuntu 系统：

bash
sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++
sudo apt-get install libgl1-mesa-dev xvfb libxi-dev libx11-dev

2. 安装 FFmpeg

FFCreator 依赖于 FFmpeg，因此您需要安装 FFmpeg 的常规版本：

3. 安装 FFCreator

bash
npm install ffcreator --save
# 或
yarn add ffcreator

快速开始

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

// 创建 FFCreator 实例
const creator = new FFCreator({
    cacheDir,
    outputDir,
    width: 800,
    height: 450
});

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

// 创建图片并添加动画效果
const image = new FFImage({ path: path.join(__dirname, "../assets/01.jpg") });
image.addEffect("moveInUp", 1, 1);
image.addEffect("fadeOutDown", 1, 4);
scene.addChild(image);

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

// 创建多图相册
const album = new FFAlbum({
    list: [img1, img2, img3, img4],
    x: 250,
    y: 300,
    width: 500,
    height: 300,
});
album.setTransition('zoomIn');
album.setDuration(2.5);
album.setTransTime(1.5);
scene.addChild(album);

// 创建视频片段
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();

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

使用示例

场景 1：添加背景音乐

javascript
// 添加全局背景音乐
const creator = new FFCreator({
  cacheDir,
  outputDir,
  audio: path, // 背景音乐路径
});

// 或者动态添加
creator.addAudio({ path, loop, start });

场景 2：为场景添加独立音乐

javascript
// 为每个场景添加自己的单独音乐，多用在自动配音场景
scene.addAudio(path);
// 或
scene.addAudio({ path, loop, start });

场景 3：视频片段处理

javascript
const video = new FFVideo({ path, x: 100, y: 150, width: 500, height: 350 });
video.setTimes('00:00:18', '00:00:33'); // 设置视频片段时间
video.setAudio(true); // 开启视频背景音乐
creator.addChild(video);

性能优化

FFCreator 3.0+ 使用 Node Stream 进行数据缓存，相比之前版本不但节省了磁盘空间而且加工速度得到进一步提升。

Stream 设置

javascript
const creator = new FFCreator({
    cacheDir,
    outputDir,
    parallel: 10,        // 单次并行渲染的视频分帧数目
    highWaterMark: '6mb', // 水位线设置
    pool: true,          // 开启对象池方式
});

参数说明：

参数说明
parallel修改单次并行渲染的视频分帧数目，根据机器配置合理设置
highWaterMark水位线设置，控制内存使用
pool开启或关闭对象池方式，优化内存管理

启动项目

有显示设备的电脑

bash
npm start

无显示设备的服务器

使用 xvfb-run 命令启动程序：

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

常见问题

1. 安装时提示错误 missing package 'xi'

错误信息：

No package 'xi' found

解决：

bash
yum install libXi-devel libXinerama-devel libX11-devel

2. 报错 doesn't support WebGL

解决： 使用 xvfb-run 启动：

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

3. Npm 安装报错 node-pre-gyp

原因： Node 版本问题，v15 会出现此问题

解决： 将 Node 版本降低到 v14

相关项目

  • shida - 基于 FFCreator 的可视化拖拽搭建短视频 Web 项目
  • FFAIVideo - 利用 AI 大模型自动生成短视频
  • awesome-ffcreator - FFCreator 相关开源项目和教程文章合集

项目链接

开源工具
上一篇

SkillCreator.ai - AI Agent Skills 发现平台

下一篇

FFCreator：基于 Node.js 的轻量短视频加工库

分享: