`FFCate`是`node.js`短视频合成库`FFCreatorLite`(FFCreator 的 Lite 版本)的一个 WebAssembly 实践。目前它尚处于实验阶段并有待继续完善，欢迎您来和我一起共建。
#### 关于`FFCreatorLite`的介绍请查看[这里](https://tnfe.github.io/FFCreator/#/guide/lite)
## 使用
#### 安装 npm package
```javascript
npm install ffcate --save
```
Note: To run the preceding commands, Node.js and npm must be installed.
#### 在你的项目中引用
```javascript
import {FFScene, FFImage, FFText, FFCate} from 'ffcate';
// create cate instance
const cate = new FFCate({
width: 600,
height: 400,
log: true,
wasm: './wasm/ffmpeg-worker-mp4.js',
});
// create FFScene
const scene = new FFScene();
scene.setBgColor('#ff0000');
// create scene bg
const bg = new FFImage({path: 'xxx.jpg'});
scene.addChild(bg);
// create ffimage
const img = new FFImage({path: 'xxx.png', x: 300, y: 60});
img.addEffect('moveInRight', 1.5, 1.2);
scene.addChild(img);
const text = new FFText({text: 'hello world 你好！', x: 220, y: 30, fontSize: 36});
text.setFont(font);
text.setColor('#ff00cc');
text.setBackgroundColor('#0022cc');
text.addEffect('fadeIn', 1, 1);
text.setBorder(3);
scene.addChild(text);
scene.setDuration(8);
cate.addChild(scene);
cate.start();
// add event listener
```
#### 添加事件侦听
```javascript
cate.on('start', () => {
console.log(`[FFCate] start`);
});
cate.on('error', e => {
console.log(`[FFCate] error:: \n ${e}`);
});
cate.on('progress', progress => {
const loading = document.querySelector('.loading');
console.log(`[FFCate] progress:: ${(progress * 100) >> 0}%`);
loading.style.width = `${progress * 100}%`;
});
cate.on('complete', ({url}) => {
const video = document.querySelector('#video');
video.src = url;
console.log(`[FFCate] complete`);
});
```
#### 设置 wasm 文件
```javascript
wasm: './wasm/ffmpeg-worker-mp4.js',
```
## 方案对比
限于浏览器的支持，纯前端合成视频并不是一项简单的工作。尽管`MediaRecorder`API 可以将 canvas 动画录制为视频，而且合成速度非常快、性能很高是一种不错的方案，但是目前阶段`MediaRecorder`还存在不少的问题。
首先除 chrome、firefox 其他浏览器并不支持`MediaRecorder`API，同时 chrome 下`MediaRecorder`仅能输出 webm 格式流。并且这个方案也不支持同时合并声音。所以该方案有待浏览器厂商的后续支持。
`FFCate`使用WebAssembly技术，体积很小并且合成速度也较快（视情况是否开启pthreads支持）。目前正处于实验阶段，后续会陆续支持更多的动画特性。
## 关于 FFCreatorLite
`FFCate`是基于[`FFCreatorLite`](https://github.com/tnfe/FFCreatorLite)版开发的，具体的使用方法可以查看`FFCreatorLite`文档。这里要注意 Lite 版本和`FFCreator`的区别，[`FFCreator`](https://github.com/tnfe/FFCreator)具有更加灵活和丰富的动画支持，支持近百种炫酷的场景切换动画，同时支持字幕、虚拟主播等多种元素。限于一些技术限制，暂时还没有办法把`FFCreator`的功能移植到 WebAssembly 上，这方面的尝试正在探索中。
## 关于 ffmpeg.wasm
该项目已经默认给您提供了一个`ffmpeg.wasm`文件（./wasm 目录下）。因为 WebAssembly 使用`SharedArrayBuffer`来支持 Pthreads(https://emscripten.org/docs/porting/pthreads.html)，由于`SharedArrayBuffer`的浏览器兼容性并不好，所以默认的`ffmpeg-*.wasm`文件关闭了 Pthreads。这样也导致了视频合成速度比开启多线程慢了很多（对比[ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm)版本）。
您可以根据自己的实际情况定制自己的`ffmpeg.wasm`文件，您可以使用[https://github.com/wood9/ffmpeg.js](https://github.com/wood9/ffmpeg.js)并修改`./Makefile`内相关参数来制作。这里推荐使用 docker 模式来制作 wasm，大概需要 10 几分钟左右。
## 贡献代码
非常欢迎您加入我们一起开发`FFCate`，如果想要贡献代码请先阅读[这里](./CONTRIBUTING.md)。
## License
[MIT](./LICENSE)
---
_Source: https://npm.io/package/ffcate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._