FFCreator: 一个基于node.js的高速短视频制作库 A fast short video processing library based on node.js
简介
FFCreator是一个很棒的项目，用JS实现了视频的排版和烧制。
但目前还有局限，比如没有所见即所得的编辑功能，排版难度高；
以及任何对排版与样式的改动都需要写代码，也不利于分层与封装。
本项目的优化目标：
封装JSON接口，标准化视频描述，将代码逻辑和视频描述分离；
优化时长和排版的自适应能力（提供除px以外，百分比/rpx/vw/vh等单位），让模板对不同分辨率导出和不同尺寸、时长的源素材有更好的支持；
【重点】发挥JS能在浏览器端执行的优势，让FFCreator不仅仅可以用在后端烧制上，也可以用在前端预览和编辑上，达到前后端一致的效果；
加入更多的功能：滤镜、蒙版、动画等。
本项目不会涉及到的内容：
前端播放器，请参见: MiraPlayer (即将开源)
前端编辑器，请参见: MiraEditor (即将开源)
视频描述格式
采用JSON格式，树形结构描述的视频如下：
const video_data = {
"type": "canvas",
"width": 1280,
"height": 720,
"children": [
{
"type": "video",
"src": "/src/video1.mp4",
"width": "100vw",
"ss": 10,
"to": 20,
},
{
"type": "video",
"src": "/src/video2.mp4",
"height": "100vh",
},
],
};
我们可以简单的把树形结构的节点想象为HTML里的DOM节点。
每个节点都有type和children属性，以及节点类型所对应的属性。
为了便于理解和编写测试，我们也引入了MiraML作为补充，上面的JSON等同于以下：
<miraml>
<canvas width="1280" height="720">
<video src="/src/video1.mp4" width="100vw" ss="10" to="20"></video>
<video src="/src/video2.mp4" height="100vh"></video>
</canvas>
</miraml>
引入树形结构的目的是：
父子节点关系，可用于处理时间依赖
与DOM节点逻辑类似，便于理解
详细的树形结构逻辑与节点属性列表，请参考：视频描述文档
比如下面一段简单的XML即可实现文字作为视频蒙版动画的效果
<video x="50vw" y="50vh" height="100vh" src="oceans.mp4">
<text text="OCEAN" fontSize="100rpx" color="#FFF" x="50vw" y="50vh" asMask="true" duration="4">
<animate time="2" delay="2">
<from scale="1"></from>
<to scale="30" y="1500"></to>
</animate>
</text>
</video>
API示例
视频预览 Browser JS
const { Factory } = require('ffcreator');
const { node: creator } = Factory.from(video_data);
// 初始化，加载源素材
await creator.start();
// 播放相关事件
creator.on('loadedmetadata', () => {
// 加载完毕的回调
console.log(creator.duration);
}).on('timeupdate', () => {
// 时间更新
console.log(creator.currentTime);
}).on('seeking', () => {
// 选择时间开始
}).on('seeked', () => {
// 选择时间结束
}).on('play', () => {
// 播放
}).on('pause', () => {
// 暂停
}).on('playing', () => {
// 播放中
}).on('ended', () => {
// 播放结束
});
// 播放
creator.play(playbackRate);
// 暂停
creator.pause();
// 选择时间
creator.jumpTo(timeInMs);
视频烧录 Node.js
const { Factory } = require('ffcreator');
const { node: creator } = Factory.from(video_data);
creator.on('start', () => {
console.log(`start`);
}).on('error', e => {
console.error("error", e);
}).on('progress', e => {
let number = e.percent || 0;
console.log(`progress: ${(number * 100) >> 0}%`);
}).on('complete', e => {
console.log(`completed: ${e.output}`);
});
// 新建文件夹
creator.generateOutput()
// 开始烧录
creator.start();
其他接口
// 获取当前视频描述（JSON格式）
creator.toJson()
// 销毁, 回收内存
await creator.destroy()
参考
