访问官网
Github
文档
概述
FFCreator 是一个基于 Node.js 的轻量级灵活的短视频处理库。你只需添加一些图片、音乐或视频片段，就能快速创建一个非常精彩的视频相册。
如今，短视频已成为一种日益流行的媒体传播形式。像微视和抖音这样的平台充满了各种精彩的短视频。因此，如何让用户在网页上轻松快速地进行视频剪辑创作，或是基于图片和文字内容批量生成短视频，成为了一个技术难题。
FFCreator 是一个轻量级且灵活的解决方案，它只需要很少的依赖和较低的机器配置就能快速启动工作。它模拟了 animate.css 90% 的动画效果。你可以轻松地将网页端的动画效果转换为视频。
使用 FFCreator 和 vue.js，你可以开发一个通过拖放方式构建视频的网页项目，就像 h5 构建工具一样。你可以在这里查看。
如果你想更简单、更智能地生成精彩视频，你可能会想尝试这个使用流行 AI LLM 生成短视频的 node.js 框架 FFAIVideo。
更多介绍请看这里
特性
- 基于
node.js开发，使用非常简单，易于扩展和开发。 - 依赖很少，安装简单，跨平台，只需一台普通配置的 linux 服务器。
- 视频处理速度非常快，5 分钟的视频只需 1-2 分钟。
- 近百种场景转场动画效果。
- 支持图片、声音、视频片段、文字等元素。
- 包含
animate.css的大部分动画效果，将 css 动画转换为视频。 - 支持字幕组件，可以结合字幕转语音制作音频新闻。
- 支持图表组件，可以制作数据可视化视频。
- 支持简单（可扩展）的
VTuber，你可以基于序列帧添加YouTuber。
演示
使用方法
安装npm包
npm install ffcreator --save
注意：要运行上述命令，必须安装Node.js和npm。
Node.js
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.closeLog(); // 关闭日志（包括性能日志）
creator.on('start', () => {
console.log(`FFCreator开始`);
});
creator.on('error', e => {
console.log(`FFCreator错误：${JSON.stringify(e)}`);
});
creator.on('progress', e => {
console.log(colors.yellow(`FFCreator进度：${e.state} ${(e.percent * 100) >> 0}%`));
});
creator.on('complete', e => {
console.log(colors.magenta(`FFCreator完成：\n 使用情况：${e.useage} \n 路径：${e.output} `));
});
一些基于FFCreator开发的优秀开源项目和精彩教程文章可以在这里找到
关于音频
声音是视频的灵魂。FFCreator支持多种添加音频的方式。你不仅可以添加全局背景音乐，还可以为每个单独的场景设置自己的配音或音轨。
- 在FFVideo中 - 开启视频背景音乐（默认关闭）。
const video = new FFVideo({ path, x: 100, y: 150, width: 500, height: 350 });
video.setTimes('00:00:18', '00:00:33');
video.setAudio(true); // 开启音频
- 添加全局背景音频。
const creator = new FFCreator({
cacheDir,
outputDir,
audio: path, // 背景音频
});
// 或者
creator.addAudio({ path, loop, start });
- 为每个场景添加单独的音乐。
scene.addAudio(path);
// 或者
scene.addAudio({ path, loop, start });
关于缓存
FFCreator3.0+使用node Stream进行数据缓存。原版释放磁盘空间并进一步提高了速度。
流设置
- 通过设置
parallel（或frames）来修改单次并行渲染的视频帧数。注意：应根据您机器的实际配置合理设置，并不是值越大越好。
parallel: 10,
- 设置
highWaterMark，您可以从这里了解highWaterMark水位线。
highWaterMark: '6mb',
- 设置
pool以开启或关闭对象池模式。
pool: true,
关于FFmpeg
在项目启动时，您可以通过配置ffmpeg路径来确保无缝运行，可以使用FFCreator.setFFPath()、setFFmpegPath(path: string)或setFFprobePath(path: string)。这确保项目可以访问必要的ffmpeg工具以进行执行。有关更全面的ffmpeg配置选项，请参阅配置页面。
安装
1. 安装node-canvas和headless-gl依赖
如果是带显示设备的计算机，如个人
pc电脑（Windows、Mac OSX系统）或带显卡或显示设备的server服务器，可以跳过此步骤，无需安装此依赖。
如果您使用的是Centos、Redhat、Fedora系统，可以使用yum安装。
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系统，可以使用apt安装。
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. 由于FFCreator依赖于FFmpeg，您需要安装常规版本的FFmpeg
- 如何在CentOS上安装和使用FFmpeg https://linuxize.com/post/how-to-install-ffmpeg-on-centos-7/
- 如何在Debian上安装FFmpeg https://linuxize.com/post/how-to-install-ffmpeg-on-debian-9/
- 如何在Linux上从源代码编译 https://www.tecmint.com/install-ffmpeg-in-linux/
更详细的教程，请查看这里
启动
如果是带显示设备的计算机，如个人pc电脑或带显卡或显示设备的服务器，正常启动
npm start
否则，您必须使用xvfb-run脚本命令来启动程序，以在Linux服务器下使用webgl
xvfb-run更详细的命令参数 http://manpages.ubuntu.com/manpages/xenial/man1/xvfb-run.1.html
xvfb-run -s "-ac -screen 0 1280x1024x24" npm start
问题
- 安装过程中警告缺少包'xi'
No package 'xi'
foundgyp: 在 angle/src/angle.gyp 中调用 'pkg-config --libs-only-l x11 xi xext' 返回退出状态 1，同时加载 binding.gyp 的依赖项时尝试加载 binding.gyp
解决方案
yum install libXi-devel libXinerama-devel libX11-devel
- 启动 node 应用程序并提示错误消息
doesn't support WebGL....
解决方案
node 应用程序应按如下方式启动。
xvfb-run -s "-ac -screen 0 1280x1024x24" npm start
- Npm 安装错误
ERR! command sh -c node-pre-gyp install --fallback-to-build
解决方案
这可能是由于你的 node 版本导致的。如果是 node v15，就会出现这个问题。https://github.com/Automattic/node-canvas/issues/1645。请使用稳定版本的 node.js。例如，node v14（偶数版本）。
贡献
我们非常欢迎你加入我们开发 FFCreator，如果你想贡献代码，请阅读这里。
