Vue 3 + ffmpeg + wasm 实现前端视频剪辑

3,249 阅读1分钟

预览

www.bilibili.com/video/BV1YT…

技术栈:

  • 💪 Vue 3、Vue-Router 4、Vite、pnpm、esbuild、TypeScript
  • ☀️ Pinia 状态管理
  • 🌪 Tailwind 原子css集成
  • 💥 ffmpeg、wasm 底层音视频处理集成

功能

  • 多轨道时间轴,支持帧缩放,时间缩放
  • 支持多种类型轨道的添加删除
  • 多功能轨道调节,支持音视频轨道内裁剪,支持轨道拖拽调整顺序、起止帧
  • 可伸缩轨道列表,灵活调整轨道列表高度
  • 可配置参数容器,轨道属性调节全部由配置文件生成
  • ffmpeg
  • 核心API封装管理
  • 调用队列封装,支持并发运行run
  • gif抽帧、视频抽帧、视频裁切、音视频分离、文件下载
  • 音频裁切、多音频合成、音频波形

最后:

GitHub - Cc-Edit/CcClip: 使用Vue3 + FFmpeg + wasm 实现纯前端音视频编辑(视频剪辑)

有需要自取吧,记得点个Star哈