Ffcate NPM | npm.io

Overview

FFCate是一个基于FFCreatorLite和 WebAssembly 的在线音视频合成工具。您可以在 web 端使用图片和音乐快速合成想要的视频短片。

FFCate兼容大多数的现代浏览器，并且在移动端浏览器下也可以正常运行。目前它支持图片、声音、文字、视频等几种元素，并且可以设置多种动画，FFCate支持animate.css70%的动画效果，您可以快速使用这些效果。

FFCate是node.js短视频合成库FFCreatorLite(FFCreator 的 Lite 版本)的一个 WebAssembly 实践。目前它尚处于实验阶段并有待继续完善，欢迎您来和我一起共建。

关于`FFCreatorLite`的介绍请查看这里

使用

安装 npm package

npm install ffcate --save

Note: To run the preceding commands, Node.js and npm must be installed.

在你的项目中引用

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

添加事件侦听

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 文件

wasm: './wasm/ffmpeg-worker-mp4.js',

方案对比

限于浏览器的支持，纯前端合成视频并不是一项简单的工作。尽管MediaRecorderAPI 可以将 canvas 动画录制为视频，而且合成速度非常快、性能很高是一种不错的方案，但是目前阶段MediaRecorder还存在不少的问题。

首先除 chrome、firefox 其他浏览器并不支持MediaRecorderAPI，同时 chrome 下MediaRecorder仅能输出 webm 格式流。并且这个方案也不支持同时合并声音。所以该方案有待浏览器厂商的后续支持。

FFCate使用WebAssembly技术，体积很小并且合成速度也较快（视情况是否开启pthreads支持）。目前正处于实验阶段，后续会陆续支持更多的动画特性。

关于 FFCreatorLite

FFCate是基于FFCreatorLite版开发的，具体的使用方法可以查看FFCreatorLite文档。这里要注意 Lite 版本和FFCreator的区别，FFCreator具有更加灵活和丰富的动画支持，支持近百种炫酷的场景切换动画，同时支持字幕、虚拟主播等多种元素。限于一些技术限制，暂时还没有办法把FFCreator的功能移植到 WebAssembly 上，这方面的尝试正在探索中。

关于 ffmpeg.wasm

该项目已经默认给您提供了一个ffmpeg.wasm文件（./wasm 目录下）。因为 WebAssembly 使用SharedArrayBuffer来支持 Pthreads(https://emscripten.org/docs/porting/pthreads.html)，由于SharedArrayBuffer的浏览器兼容性并不好，所以默认的ffmpeg-*.wasm文件关闭了 Pthreads。这样也导致了视频合成速度比开启多线程慢了很多（对比ffmpeg.wasm版本）。

您可以根据自己的实际情况定制自己的ffmpeg.wasm文件，您可以使用https://github.com/wood9/ffmpeg.js并修改./Makefile内相关参数来制作。这里推荐使用 docker 模式来制作 wasm，大概需要 10 几分钟左右。