这块白板,把我的剪辑软件炒了鱿鱼

那天我给客户录一个五分钟的讲解视频,同时开着三个东西:一个标签页是 Excalidraw,用来画架构图;后台跑着 QuickTime 录屏;显示器上贴了张便利贴,提醒自己说话慢一点,因为上一条没配字幕,而客户那边的项目负责人一只耳朵听力不太好。录完之后,我把视频拖进剪辑软件,花了接下来四十分钟手动给一条本该五分钟搞定的片子烧字幕。

那天不算倒霉。那就是普普通通的一个周二。这套流程我已经这样重复了几个月——画图、录制、剪辑、为拖稿道歉——每次都告诉自己下一次会快一点,结果每次都没快。

为什么现成的工具都不管用

之前我不是没找过现成方案,还不止一次。Loom 就是干这个的,可它一停止录制就把内容传到 Loom 的云端,而我给客户画的东西有一半是架构图,画到一半就不该往别人的服务器上传。Excalidraw 加 OBS 能把画图和录屏分开解决,代价是两个应用、两套设置,字幕更是不存在,除非再找第三个工具补上。Miro、Whimsical 能画图,偶尔能录屏,但从没把这条链路整个打通过,而且永远绑着一份按团队收费的订阅,不是按”一个人给客户录一次电话”设计的。

这些工具没一个是做错了,它们各自解决的是我这个问题的一部分,而缺的那一块,永远正好是我那周最需要的那块。我真正想要的东西比它们提供的都要小、都要具体:画图、说话,直接拿到一条成片,全在一个地方,导出之前什么都不离开我这台电脑。

真到坐下来开始做的那一刻,这已经算不上一个”决定”了。这套手动流程我走过太多遍,四十分钟的后期已经不再像是偶尔交的一次税,而是我工作方式里的一个 bug。累积算下来,把它修好花的时间,比再忍这个变通方案一个季度要少。

后来它变成了什么样子

2月6日从一个空仓库开始,九天、十七次提交之后,我已经拿它去录真实的客户电话了。白板这部分, Excalidraw 本来就做得比我自己能做出来的更好——完整的绘图工具、图形、frame,还不用登录,所以我没动它,把力气全放在它周围。现在它跑在 video.ranbot.online 上。

里面到底有什么

• 白板本身——完整的 Excalidraw:图形、手绘、frame,不用登录。
• 摄像头小窗,能拖到画布上任意位置,大小在设置面板里可调。
• 实时字幕,跟着你说话同步转录出来,不是事后加上去的。
• 光标高亮和聚光灯效果,方便你指着某处讲解的时候用。
• 画幅比例预设——YouTube 用 16:9,TikTok 或 Shorts 用 9:16,方形,或者自定义裁切。
• 演示模式,把 Excalidraw 的 frame 变成全屏幻灯片,方向键或滑动切换。
• 一键导出成 MP4 或 WebM,中间不经过任何上传。
• 全部跑在客户端——画图、摄像头画面、转录、编码,全都在你的浏览器里完成,导出之前什么都不会离开你的电脑。

把 Excalidraw 的 canvas、一路实时摄像头画面、悬浮的字幕文字,三样东西真正合成进同一个导出文件里,而不是”恰好同时显示在同一块屏幕上的三样东西”,是唯一真正需要动脑子的工程活。说白了:这三样东西不会自动变成一条视频,除非你主动把它们一起画到同一块共享的 canvas 上,录的是那块 canvas,而不是页面本身。这一步一旦搞错,屏幕上看着一切正常,导出的文件里摄像头小窗却干脆不存在——而这种 bug,往往是你已经把视频发出去之后才会发现。

是工具自己告诉我它还缺什么

15号那几次提交,加了个演示模式——把 Excalidraw 的 frame 变成全屏幻灯片,用方向键或者滑动就能切换。这不在任何计划里。是我自己用了这工具一周之后发现的:我给客户录的东西里有一半根本不是”看我现场画”,而是”这是我昨晚已经画好的四块板子,我带你过一遍”。这个场景我一开始没做,是因为我还没撞够多次,没意识到它是个独立的场景。一旦意识到了,加起来就很简单——Excalidraw 本来就用 frame 组织画面,我只是之前没让录制器盯上这个结构而已。

整个项目走的都是这个套路。每个功能都是同一个坑踩了两次之后才冒出来的,不是先画好的设计图。圆形摄像头小窗存在,是因为方形的老是挡住我需要客户看见的图表角落。字幕清空的逻辑存在,是因为第一次我连续讲了超过三十秒,字幕就堆成了一面读不下去的文字墙。没有一样是提前设计出来的,全都是当场被什么东西惹毛了之后的直接修补。

真正变了的东西

我不再打开 QuickTime 了。2月15日之后,我给客户做的每一次讲解、每一次内部演示,都是从一个浏览器标签页里直接出来的,字幕和摄像头都在里面,录完不用再剪一遍。比这更让我惦记的,是我意识到自己居然容忍了一套明显不对劲的流程这么久,原因仅仅是每一个环节——一个白板工具、一个录屏工具、一个字幕工具——单独拿出来都好用。问题从来不出在某一个工具身上,而是我从没问过一句:凭什么这件事非得靠三个工具才能做完。代码在 GitHub 上,想看这几层是怎么拼起来的,或者单纯想要一块不需要在你按下录制键那一刻就把你甩给第二个应用的白板,都可以去看看。