NodeJS也可以制作短视频啦！FFCreator使用踩坑~ FFCreator介绍对于目前的短视频如此之多，大部分很

FFCreator介绍

对于目前的短视频如此之多，大部分很多都是有模板然后生成我们看见的视频或相册模板等等，而今天的FFCreator就是一个基于node.js的高速视频制作库，关于它的介绍小伙伴们可以去GitHub上去看看。

它还有一个兄弟# FFCreatorLite 它的安装非常简单容易，我这里就不介绍，下面主要介绍FFcreator

安装过程

在刚开始安装的过程，并不顺利，每一次npm install FFCreator 的时候控制台就是一篇红，探索半天，发现是因为依赖的canvas和gl每一次拉取都失败，于是找到了镜像源先下载这两个难搞定的依赖再去安装FFcreator。

1 安装Canvas
npm install canvas --canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas/
2 安装gl
npm install gl --gl_binary_host_mirror=https://registry.npmmirror.com/-/binary/gl
3 npm install FFCreator

我的是Windwos10环境，Windows11环境都可以正常安装成功，Node环境我试过V14.15到V18.14的都没问题。

使用之前还需要确保你的电脑安装了ffmpeg，在FFCreator的说明文档也有，我就不过多说了。

FFCreator依赖FFmpeg做视频合成处理。安装FFmpeg非常简单, 下面是不同系统的安装教程。

windows - blog.gregzaal.com/how-to-inst…
Mac OS - superuser.com/questions/6…
centOS - blog.csdn.net/guo_qiangqi…
debian - linuxize.com/post/how-to…

开始使用

目前我使用FFCreator已经实现出了，相册模板，模糊背景相册，视频相册，还有关于自己制作的一些小型的ae动画使用Lottie替换的效果。整体还是很看好这个项目，希望作者可以后续更新出更多好玩的功能，

上效果，这是合成的两个，还支持其他很多样式在官网也有介绍。

基本配置

属性	别名	类型	含义
width	w	number	视频宽度
height	h	number	视频高度
fps	rfps	number (默认30)	视频帧频
outputDir	dir	string	视频输出路径
cacheDir	无	string	缓存目录
output	out	string	输出文件名(非必须, 在FFCenter模式下不需要填写)
parallel	frames	number （默认5）	并行渲染
highWaterMark	size	string (默认1mb)	node.js highWaterMark
clarity	renderClarity	string (模式medium)	`medium high low` 画面渲染质量
cover	无	string	封面图
pool	无	boolean (默认false)	是否启用对象池技术缓存(节省内存模式)
debug	无	boolean (默认false)	boolean Debug模式
preload	无	boolean (默认true)	是否启用预加载
antialias	无	boolean	是否开启平滑
audioLoop	无	boolean （默认true）	背景音乐是否循环
render	无	string (默认gl)	使用gl/canvas内核渲染 - 内核cairo/mesa3d
ffmpeglog	无	boolean (默认false)	开启ffmpeg的log
vb	无	string	ffmpeg vb
crf	无	number (默认crf)	ffmpeg crf
preset	无	string	ffmpeg preset
cacheFormat	无	string (默认raw)	缓存图片格式
cacheQuality	无	number (默认80)	缓存图片质量（非raw格式）
defaultOutputOptions	无	boolean	是否使用默认配置

实现的基础代码：

/**
 * @author 爱呵呵
 * @description 模糊背景效果的图册导出
 */

const path = require('path')
const { FFAlbum, FFAudio, FFCreator, FFImage, FFText, FFScene } = require('ffcreator')
const { width, height, fps } = require('../conf')

// 这里就是我对导出视频的高度，宽度，fps 配置 比如你喜欢是一个1080 * 1920  30fps的
// 那 let width = 1080, height = 1080, fps = 30
const pathReslove = dir => path.join(__dirname, dir)




// 我理解是，这里生成一个对象，
// 里面配置宽度高度，渲染模式(render)，导出路径, 缓存路径，渲染清晰度，fps
const Compos = new FFCreator({
	width,
	height,
	render: 'gl',
	outputDir: pathReslove('../video/'),
	cacheDir: pathReslove('../cache/'),
	clarity: 'high',
	fps
})



// 这里是在添加视频的背景音乐这个是从头到尾的，如果你只想在应该画面添加，那就使用
// let scene = new FFscene()  scene.addAudio 去为这个画面添加音乐 
Compos.addAudio(
	new FFAudio({
		path: pathReslove('../assets/乌云 - 董唧唧.mp3'),
		volume: 0.9,
		fadeIn: 4,
		fadeOut: 4
	})
)

// 这里我开始生成数据，当然，这里也可以是前端传给你的。 url 是我自己服务器上可以访问的图片地址， animat是转场动画，是FFcreator支持的，具体支持多少可以去文档官网看看。
const list = Array.from({ length: 20 }, (v, i) => (
	{ 
		url: `https://yjpsix.com/my/${i}.jpg`,
		animat: i % 3 === 0 ? 'DreamyZoom' : i % 3 === 2 ? 'CrossZoom' : 'FilmBurn',
	}
))


list.forEach(item => {
	const scene = new FFScene()

	const bg = new FFImage({
		path: item.url,
		x: width / 2,
		y: height / 2,
		width,
		height
	})
	bg.setBlur(40) // 添加模糊  值0-100
	const img = new FFImage({
		path: item.url,
		x: width / 2,
		y: height / 2,
		width,
		height: height / 2
	})


        // 设置一个画面停留的时间，一个画面的动画，一个画面添加的元素，然后Compos添加这个画面，循环生成
	scene.setDuration(3) 
	scene.setTransition(item.animat)
	scene.addChild(bg)
	scene.addChild(img)
	Compos.addChild(scene)
})


// 前面的一切就像在准备食材，都处理完了，就执行Start函数方法，就会开始渲染了，同时也提供了错误，进行///中，// 完成等状态 方便 查看


// 开始渲染
Compos.start()

Compos.on('error', e => {
	console.log(`渲染失败....${e.pos}, ${e.type}, ${e.error}`)
})

Compos.on('progress', e => {
	console.log(`合成视频中...${(e.percent * 100) >> 0}%- - - - - - ${e.type}`)
})

Compos.on('complete', e => {
	console.log(`合成完成....\n UGAE: ${e.useage} \n PATH: ${e.output}`)
})

关于基础的配置使用推荐小伙伴去看看文档，里面写的也是比较清楚的：

使用文档

Lottie动画

FFCreator v6.6.1新增 FFLottie 类, 增加对 AE lottie 文件渲染支持。您可以使用 AE 来制作非常复杂的动画了，它可以制作类似抖音中那些很炫的视频影集动画。

关于这个，我看完介绍第一反应: AE工程可导出JSON完成相册模板替换。

啊这！那岂不是很多特效视频，都可以啦? 于是我兴致勃勃去掏出我很久没玩的AE 下载了一个模板，然后安装了Bodymovin插件，导出来一个JSON文件，

可是预览的时候发现效果不尽人意，很多时候是可以预览，但是使用FFCreator去生成导出的时候，效果要不就是少转场效果，反正还是不尽如意。目前还在尝试更多效果。

可以实现的效果，自己制作的AE模板的一些动画效果，旋转，透明，缩放，等效果导出还是没问题。网络上的lottie动画都是支持的目前测试过。

如果你想使用推荐安装相同版本如AE22 版 bodymovin 就选2022年版本的就基本上在导出json动画不会出现什么问题

碰到的问题：之前使用ae 英文版导出的，基本上没问题，但发现换成ae中文版也可以导出，但有些时候又导出不来json文件

更多问题其实大部分我个人是在安装包的时候一直报错的问题 ~ ~ ~

官方的介绍可能更详细：Lottie支持

Last

以上就是关于我在使用时的一些记录，其实还有一些问题是在布置到linux服务器上时出现的，但我语言能力不行，等等整理完了，再后续补充吧。如果你感兴趣欢迎去尝试体验。我这里放一个我自己的工程文件，感兴趣的小伙伴可以下下来体验尝试，有问题欢迎评论区交流~

以上所有代码和工程文件：Github

感谢: FFCreator 项目地址
 小编 Github 项目地址