走近前端工程化-WebPack之loader的入门级知识

背景

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

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

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取