失业+疫情在家,闲来无事开发一个 前端视频素材合成程序(VE-web)

289 阅读1分钟

一个30岁的程序员,失业又逢上海疫情,被封小区大半月,闲来无事开发一个 前端程序员专属视频处理程序VE-web

效果预览

demonstration.gif

实现

原理很简单 1、electron 外壳 2、PIXI.js 绘制效果 3、FFmpeg 合成video+canvas Frame

使用介绍 1秒钟上手 1秒钟使用,5分钟吐槽

1、添加视频 image.png 2、新增widget

image.png 3、绘制素材

image.png widget 函数接受4个参数

  • app: PIXI.js(简单易用的webgl 渲染器) 的application 对象
  • start:fn 素材开始时间
  • finish:fn 素材结束时间
  • ticker: { add: (fn: (t: number) => void) => void } 提供视频当前播放时间点,方便更细粒度控制素材动画效果

默认提供 Tween.js 缓动函数

代码编辑器全部带有 typescript 提示

最后

  • 欢迎提bug和功能需求
  • 能介绍个上海前端工作也是极好的

08CB7886.png