录屏+白板开源工具调研（面向 cavo 的选型与落地）

TL;DR

• 本文将“白板”定义为：可在屏幕上绘制/标注的数字画布，可叠加到录屏里或以事件轨（JSON）单独保存。
• 最快可用的开源组合：白板用 tldraw/Excalidraw；录屏用浏览器 getDisplayMedia + MediaRecorder 或直接用 OBS Studio；要导出通用 MP4，通常需 FFmpeg 转码/混流。
• 你提供的 cavo 小红书短链无法在线核验其开源状态与功能细节；若补充 GitHub/安装包，可进一步做对标与改进清单。

Key Insights

• 两种产品内核：A 实时合成录一条视频（实现快但后期编辑弱）；B 录屏视频+白板事件轨分开存（更易撤销/重排/变速/后期再渲染，也更便于做“可编辑项目文件”）。
• 浏览器录制的主要坑：系统音频捕获、分辨率/帧率上限、编码器与容器支持差异大；工程上常见“先稳定交付 WebM，再按需转 MP4”。
• 白板引擎选型看交互与扩展：tldraw 偏“对象编辑/无限画布/强交互”，Excalidraw 偏“手绘风/易嵌入/生态成熟”；license、商标与二次分发限制以各仓库说明为准。

Playbook

• 先定 MVP 边界：平台（Web/桌面）、录制对象（全屏/窗口/标签页）、音频（麦克风/系统声/双轨）、白板形态（叠加标注/独立白板）、导出（webm/mp4 + svg/json）与隐私（本地/云端）。
• Web MVP（最低成本验证）：getDisplayMedia 拿到屏幕流→video 播放→每帧 drawImage 到合成 canvas→把白板层绘制在同一 canvas→canvas.captureStream 输出视频→用 AudioContext 混音（mic + system 若可）→MediaRecorder 写出 WebM。
• “事件轨”增强（建议尽早评估）：白板只记录操作事件（笔画点列/对象增删/颜色粗细/撤销栈/时间戳），导出 project.json；回放时再渲染到 canvas，并支持在任意时间点重导出视频、做局部重录/配音。
• 桌面稳定导出（需要一致 MP4 时）：Electron/Tauri 打包白板→本地保存原始 WebM/PCM→调用或捆绑 ffmpeg 转 H.264/AAC 的 MP4，并实现全局热键、光标高亮、窗口黑名单、自动分段与崩溃恢复（基于项目文件）。

Expert Views

• 前端多媒体工程师（paraphrase）：优先用标准 API（getDisplayMedia/MediaRecorder）做 MVP，但要把“编码/封装格式选择”和“系统声”当作高风险项，尽量设计成可插拔的转码与导出模块。
• 桌面应用工程师（paraphrase）：用户真正要的是稳定与快捷键；桌面端更容易获得一致的帧率/分辨率与导出格式，建议用 ffmpeg 做最终输出，不要把“能否导出 MP4”押宝在浏览器能力上。
• 教学内容创作者/讲师（paraphrase）：白板手感决定留存，重点是低延迟、笔迹平滑（压感/抖动修正）、激光笔/聚光灯、分段录制与快速重录旁白，协作可后置。
• 数据隐私/安全视角（paraphrase）：录屏极易泄露敏感信息，应默认本地处理与显著权限提示；提供“只录某窗口”“遮挡/马赛克”“自动暂停（切到黑名单窗口）”等安全护栏，避免默认上传与默认分享链接。

Options

• 方案 A（拼装最快）：OBS Studio 负责录制与编码；白板用浏览器打开 tldraw/Excalidraw，当作 OBS 的“窗口/浏览器源”叠加；适合快速演示与对齐功能范围。
• 方案 B（纯 Web 一体化）：tldraw/Excalidraw + getDisplayMedia + MediaRecorder；优点部署简单、跨平台，缺点是编码与系统音频受浏览器限制（通常先交付 WebM）。
• 方案 C（桌面一体化）：Electron/Tauri + 白板引擎 + 本地 ffmpeg；优点导出一致（MP4）、可做全局热键/系统声/性能优化，缺点是安装包体积、签名、权限与多平台适配成本更高。
• 分支（另一种“白板”定义）：若你要的是“多人实时协作会议白板+录制回放”，则需 CRDT（如 Yjs）做状态同步，把“录制”扩展为“会话事件流+音视频”，复杂度与存储模型会显著上升。

Evidence & Confidence

• getDisplayMedia（屏幕捕获）+ MediaRecorder（录制）在主流 Chromium 浏览器可实现基础录屏（high：有对应 W3C 规范与广泛工程实践）。
• 浏览器端直接稳定输出 MP4/H.264 不可保证（medium：各浏览器对编码器/容器支持差异大，常见落地是 WebM 后用 ffmpeg 转码）。
• “视频+白板事件轨”能明显提升可编辑性与导出灵活性（medium：符合多数可编辑录制产品的工程取舍，但需结合你的目标用户验证是否值得引入事件系统）。
• cavo 的开源状态、实现细节与可复用程度目前无法在线核验（low：仅有小红书短链，缺少可核验仓库/README）。

Next Steps

• 补充 cavo 的 GitHub/Gitee 仓库链接、license、目标平台（Web/桌面）与典型使用场景（讲课/产品演示/会议）。
• 决定录制模型：先做“实时合成一条视频”，还是直接做“视频+事件轨”；两者可以并存，但需先选主路径以避免返工。
• 做一次兼容性矩阵测试：Windows/macOS/Linux + Chrome/Edge/Safari/Firefox，记录可用的分辨率、帧率、音频来源与导出格式。
• 若需要 MP4/系统声：选择转码与权限方案（本地 ffmpeg、服务端转码、或 OBS 做底座），并明确安装包体积、性能预算与用户权限提示流程。

Sources

• 屏幕捕获与录制标准：Screen Capture（getDisplayMedia）https://w3c.github.io/mediacapture-screen-share/ ；MediaRecorder https://w3c.github.io/mediacapture-record/
• 白板引擎：tldraw https://github.com/tldraw/tldraw ；Excalidraw https://github.com/excalidraw/excalidraw ；笔迹平滑参考：perfect-freehand https://github.com/steveruizok/perfect-freehand
• 录制/推流/叠加底座与参考实现：OBS Studio https://github.com/obsproject/obs-studio ；Screenity https://github.com/alyssaxuu/screenity ；ShareX https://github.com/ShareX/ShareX ；Kap https://github.com/wulkano/Kap
• 转码与混流：FFmpeg https://ffmpeg.org/ ；浏览器端转码参考：ffmpeg.wasm https://github.com/ffmpegwasm/ffmpeg.wasm