背景
最近自己在学习一些视频剪辑相关的工具，像爱剪辑，剪映这些软件。然后就想自己是不是也可以实现一个类似的，轻量级的在线剪辑工具。最后发现这个款node端的工具库FFCreator，接下来简单介绍一下如何来搭建开发环境，和基本的使用
什么是FFCreator
FFCreator是一个基于node.js的轻量、灵活的短视频加工库。您只需要添加几张图片或视频片段再加一段背景音乐，就可以快速生成一个很酷的视频短片。
FFCreator是一种轻量又简单的解决方案，只需要很少的依赖和较低的机器配置就可以快速开始工作。并且它模拟实现了animate.css90%的动画效果，您可以轻松地把 web 页面端的动画效果转为视频。
FFCreator特性
- 完全基于
node.js开发，非常易于使用，并且易于扩展和开发。 - 依赖很少、易安装、跨平台，对机器配置要求较低。
- 视频制作速度极快，一个 5 分钟的视频只需要 1-2 分钟。
- 支持近百种场景炫酷过渡动画效果。
- 支持图片、声音、视频剪辑、文本等元素。
- 支持字幕组件、可以将字幕与语音 tts 结合合成音频新闻。
- 支持图表组件，可以制作数据可视化类视频。
- 支持简单（可扩展）的虚拟主播，您可以制作自己的虚拟主播。
- 包含
animate.css90%的动画效果，可以将 css 动画转换为视频。
原理简介
大多数视频处理通常离不开FFmpeg这个库，虽然FFmpeg在视频处理方面具有十分强大的功能。 但是在处理精细的动画效果方面FFmpeg就显得力不从心，并且它的使用也很不方便，需要开发去拼接大段的命令行参数。
对于处理更强的动画效果，业内有一种比价流行的方案就是基于After Effects（aerender.exe）的模板方案。但是这种方案也有不少问题(后续会有详细的比较说明) FFCreator使用opengl来处理图形渲染并使用shader后处理来生成转场效果，最后使用FFmpeg合成视频，基于opengl既十分高效又可以支持各种丰富的图形动画。
环境搭建
这里简单记录了我在mackbook和conetos8中搭建的过程和碰到的问题
由于FFCreator依赖ffmpeg，所有需要再先安装ffmpeg
1.macbook安装过程
brew install ffmpeg
在安装过程碰到一个报错Error: ffmpeg: Failed to download resource "rav1e"
只需要重新执行brew install ffmpeg即可
2.centos8安装过程 由于FFmpeg在centos8中没有对应的存储库，所以需要通过其他的方式来安装，我这边找到一种安装方式，亲测可用
dnf install epel-release dnf-utilsyum-config-manager --set-enabled PowerToolsyum-config-manager --add-repo=<https://negativo17.org/repos/epel-multimedia.repo>dnf install ffmpeg
查看安装是否成功
ffmpeg -version
如何使用
1.安装ffcreator包
npm install ffcreator
如果安装过程中碰到 ode-pre-gyp install --fallback-to-build --update-binary 卡住不动。 可以使用 cnpm来安装。
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
2.创建creator入口
const creator = new FFCreator({width: 500,height: 680
});
3.创建场景
const scene = new FFScene();
scene.setBgColor("#ffcc22");
scene.setDuration(6);
scene.setTransition("GridFlip", 2);
creator.addChild(scene);
4.创建图片元素
const image = new FFImage({ path: path.join(__dirname, "./test222.png") });
image.setXY(250, 340);
image.setScale(2);
image.setWH(500, 680);
image.addEffect('fadeInDown', 1, 1);
scene.addChild(image);
5.创建文字
const text = new FFText({text: '欢迎来到天鹅到家',x: 250,y: 80});text.setColor('#ffffff');text.setBackgroundColor('#b33771');text.addEffect('fadeInDown', 1, 1);text.alignCenter();text.setStyle({padding: [4, 12, 6, 12]});scene.addChild(text);
6.添加事件监听
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} `);
});
7.添加执行和输出目录
creator.output(path.join(__dirname, "./output/example.mp4"));
creator.start();// 开始加工
8.通过执行node index.js即可输出视频 测试代码已经提交到github，可以下载来测试。
最后
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
