带你了解node视频剪辑工具FFCreator

lcl101
2,014 阅读3分钟

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1文章，点击查看活动详情”

背景

最近自己在学习一些视频剪辑相关的工具，像爱剪辑，剪映这些软件。然后就想自己是不是也可以实现一个类似的，轻量级的在线剪辑工具。最后发现这个款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-utils

yum-config-manager --set-enabled PowerTools

yum-config-manager --add-repo=<https://negativo17.org/repos/epel-multimedia.repo>

dnf install ffmpeg

查看安装是否成功

ffmpeg -version

image.png 看到有这些信息说明，已经安装成功了。

如何使用

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，可以下载来测试。

地址：github.com/lcl-101/ffc…

avatar
文章
阅读
粉丝