FFCreator

英文 | 简体中文

概述

FFCreator 是一个基于 <a href="http://nodejs.org" target="_blank">Node.js</a> 的轻量级灵活的短视频处理库。你只需添加一些图片、音乐或视频片段，就能快速创建一个非常精彩的视频相册。

如今，短视频已成为一种日益流行的媒体传播形式。像微视和抖音这样的平台充满了各种精彩的短视频。因此，如何让用户在网页上轻松快速地进行视频剪辑创作，或是基于图片和文字内容批量生成短视频，成为了一个技术难题。

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

安装Xvfb和Mesa

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，如果你想贡献代码，请阅读这里。

许可证

MIT

概述

更多介绍请看这里

特性

演示

使用方法

安装npm包

Node.js

一些基于FFCreator开发的优秀开源项目和精彩教程文章可以在这里找到

关于音频

关于缓存

流设置

关于FFmpeg

安装

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

如果是带显示设备的计算机，如个人pc电脑（Windows、Mac OSX系统）或带显卡或显示设备的server服务器，可以跳过此步骤，无需安装此依赖。

2. 由于FFCreator依赖于FFmpeg，您需要安装常规版本的FFmpeg

更详细的教程，请查看这里

启动

否则，您必须使用xvfb-run脚本命令来启动程序，以在Linux服务器下使用webgl

问题

解决方案

解决方案

解决方案

贡献

许可证

编辑推荐精选

问小白

Transly

讯飞智文

讯飞星火

Spark-TTS

Trae

咔片PPT

讯飞绘文

材料星

openai-agents-python

探索AI的无限可能

推荐工具精选

Trae

豆包

讯飞文书

讯飞绘文

讯飞绘镜

阿里绘蛙

咔片PPT

AI云服务特惠

火山引擎

阿里云

腾讯云

华为云

百度智能云

AWS

关注微信公众号

1. 安装`node-canvas`和`headless-gl`依赖

如果是带显示设备的计算机，如个人`pc`电脑（Windows、Mac OSX系统）或带显卡或显示设备的`server`服务器，可以跳过此步骤，无需安装此依赖。

2. 由于FFCreator依赖于`FFmpeg`，您需要安装常规版本的`FFmpeg`

否则，您必须使用`xvfb-run`脚本命令来启动程序，以在Linux服务器下使用webgl