我在 Mac 上做了个本地剪辑器

我本身就在做剪辑器。上一套是 Electron 加 WebAV,能跑,也能剪,但拿去跟参照产品剪映一比,性能和扩展性都差一截。预览一复杂就发虚,后面想加能力,也总能感觉到天花板。

所以想换一条路,做一个技术验证:用 Flutter 和 C 来写,看看能不能摸到接近原生的手感。 这就是 vedit。

界面你肯定眼熟:素材库、预览窗、属性面板、时间线、分镜轨。目标产品是剪映,但不是对着抄。有些东西是业界通用的,时间线、轨道、入出点,没必要标新立异;有些得是自己的,不然做一圈只是把别人的壳换了个皮。

另一半原因更私人:想挑战一下自己。这个项目里我既做开发,也做产品。功能做不做、做到哪、哪里跟剪映对齐、哪里故意不一样,都得自己拍板。希望能在音视频剪辑这块,真正长一截,而不是只会调现成组件。

初心

两件事叠在一起,才决定开工。

第一,验证另一条技术路。

Electron 加 WebAV 上手快,Chromium 把窗口、页面、解码都揽着,界面也熟。但剪辑器不是普通后台页。播放要稳,调色、滤镜、转场一叠,主线程、GC、浏览器对 GPU 的限制就会一起冒出来。扩展也别扭:预览在网页里画一份,导出往往得另走一条,后面每加一层,都更像在旧房子上接楼。

所以想换技术栈重走一遍:界面用 Flutter,重活下沉到 C 和系统这一侧。不是为了换个时髦名字,是想回答一个很具体的问题------同样是桌面剪辑器,这条路能不能更接近剪映那种跟手的感觉。

第二,逼自己把产品和实现一起做。

参照是剪映,不等于开着剪映逐页临摹。哪些是剪辑软件该有的常识,哪些是自己可以长出差异的地方,得边做边判断。判断错了就改,判断对了就留下。这个过程本身,就是我想要的成长。

使用场景

典型路径很简单:

  1. 打开软件,新建草稿,或接着上次的继续剪
  2. 把视频、音频丢进素材库,再拖到时间线上
  3. 切、排、叠,调色、滤镜、蒙版、美颜
  4. 加转场、字幕、贴纸和文字
  5. 本机导出

对我来说,它首先是验证场:一条片子能不能剪完,预览能不能跟上,导出是否靠谱。顺带也适合自己做内容、做 demo、做配音小片。素材在本地,工程也在本地。

后面接了 AI:本机 CLI,或自己填密钥走云端模型。字幕识别同样走本机配置。密钥只存在这台电脑上。

刻意没做账号、云同步、模板广场。现在的目标不是做成平台,是先把「能剪、跟手、可扩展」这条验证做实。

技术上怎么拆

上一套是 Electron + WebAV。这套换成分层:

层 用什么 干什么
壳 Flutter / Dart / Riverpod 首页、时间线、属性面板、草稿、设置
核 C / Objective-C++ 时间线编成可渲染的结构,驱动预览和导出
系统 Metal、AVFoundation 解码、GPU 出画、编码成片

Flutter 适合把桌面编辑器的壳搭起来:深色面板、多轨、拖拽、检查器。状态用 Riverpod 收着,播放头、选中、缩放、面板尺寸不会散落在各个组件里。也不用把整个应用重新塞回浏览器内核。

预览不能靠 Skia 一张张贴图硬扛。界面通过通道把时间线和参数交给原生核,原生用 Metal 把当前帧渲出来,再作为 Texture 送回 Flutter。导出不另开一套滤镜,走同一条处理链,只是出口从「上屏」换成「写成文件」。

可以想成这样:

markdown 复制代码
时间线 + 参数(Flutter)
        │
        ▼
      渲染核(C)
        │
   ┌────┴────┐
   ▼         ▼
 预览上屏    导出成片

效果顺序也是设计的一部分,不是无脑串联。大致是几何、调色、美颜、风格/LUT,最后才是蒙版。蒙版如果太早裁,框外会被亮度抬起来;模糊如果裁完再做,框边会脏。这些不需要把公式摊开,但必须在工程里当成规格,而不是「看着差不多」。

平台先锁定 macOS。先把一条完整链路做通,再谈它是不是真比 Electron 那条路更接近原生。

做的过程里,难在哪

难的不是某个按钮。是一台剪辑器要同时活着,而你还得自己决定它长成什么样。

开发上,它得同时是:

  • 一个工具:时间线、属性、草稿,用着得顺手
  • 一个播放器:拖进度、切片段、音画对齐,不能播着播着对不上
  • 一台小小的渲染核:预览看到的,导出就该是那个

产品上更别扭。剪映是参照,但对照着做会变成抄,完全不看又容易做成「能跑的演示页」。哪些交互是用户已经形成肌肉记忆的,哪些可以按自己的理解改,没有标准答案,只能自己用、自己砍。

中间比较有体感的几件事:

  • 验证最怕自嗨。 以前那套也能剪,差别在复杂起来以后还跟不跟手。新栈必须拿真实预览和导出说话,不能只看界面像不像
  • 预览和导出必须共用处理链。 Electron 时期最容易变成「网页里看一份,导出再算一份」。两条路一分开,颜色和转场就会慢慢漂。现在差别只留在出口
  • Flutter 和原生之间没有魔法。 通道对上了,坐标系、时间基、seek 缓存对不上,表现就是贴纸被压黑、嘴型微飘、拖进度顿一下。这类问题不报红字,只能对着画面和时钟查
  • 效果顺序就是 bug 源。 看起来都加上了,框边发脏、皮肤被滤镜吃掉,往往不是参数错了,是层次错了
  • 时间线是状态机。 多轨、分镜、拖入、框选、转场占位叠在一起会抢手势、抢选中。Riverpod 能把「谁被选中、现在几秒」收干净,脏的是它和渲染核的契约

桌面端还有一堆不像大事的细节。输入框和旁边的选择框一样高,字却整段偏低,用户只会觉得这页不精致。GPU 对了,壳不精致,验证也会减分。

现在什么样

能用,而且是按真编辑器在长,不是换皮演示。

已经能走完日常剪一条片子的主路径:导入、时间线、调色和效果、转场字幕贴纸、本机导出,以及可选的 AI。首页可以接着上次的草稿开剪。

验证还没有结束。Electron + WebAV 那条路的问题我已经摸到了;Flutter + C 这条路,目前证明的是:能把完整剪辑体验做出来,预览和导出可以焊在同一条处理链上,跟手程度比原来有信心。离「追上参照产品」还有距离,但这正是我继续做下去的理由。

做完最值的一句

我不是从零幻想一个剪辑器,是从一套已经不够用的方案里走出来。

一边用 Flutter 和 C 验证能不能更接近原生性能,一边逼自己当产品:看剪映,但不照抄;学业界的通用做法,也留下自己的判断。

如果最后只做成一个能演示的壳,这事就不值。值的是在音视频剪辑这块,自己真的往前走了一步。

相关推荐
高晶2 小时前
一种小功率锂电池组充电器方案
前端·架构
孟健2 小时前
从语音交互到线上交付:理性拆解移动端 Codex 的审查与上下文边界
架构·ai编程
汉堡大王95272 小时前
GPT-6 上线 48 小时,我扒开了 Intelligent UI 的运行机制:DIL、沙箱 Worker 和一个 React 式协调器
前端·javascript·后端
hai_android2 小时前
Chat 聊天模块功能总结
前端·javascript·vue.js
m0_587383002 小时前
深圳 24 小时自助健身房系统软件开发实战指南与案例解析
java·spring boot·小程序·架构·需求分析
独孤九剑打醒他2 小时前
【原创开源·修订版】源-栅-漏-栅-源横向双栅MOS:从“被误解的短路”到“电流路径多值逻辑与顶层供电架构”
前端·嵌入式硬件·架构·开源·硬件工程
创世虚拟世界3 小时前
我做了一个 3D 虚拟世界基底,基于这个再做 3D 虚拟世界或者元宇宙,会事半功倍
javascript·人工智能·3d·gitee·虚拟现实
众链网络3 小时前
票务系统的“数据主权“怎么设计:从归属、开放到可迁移
架构