案例 16 · 短视频一键字幕切片、金句海报与音视频 WASM 处理站

【关键工具】 Bolt.new + FFmpeg.wasm

【70% Vibe】

用户上传一段视频，在纯浏览器端、完全不需要服务器的情况下，自动切出精彩片段、基于音频生成字幕、做成金句海报。对自媒体创作者来说极具吸引力，对开发者来说则省下了昂贵的服务器视频处理成本。秘密武器是 FFmpeg.wasm——把专业的音视频处理工具 FFmpeg 编译成能在浏览器里跑的 WebAssembly。

【30% Engineering】

"纯浏览器跑视频处理"听起来很美，30% 是两道硬核的底层配置。

第一是 SharedArrayBuffer 的安全策略配置。FFmpeg.wasm 要做多线程加速，依赖一个叫 SharedArrayBuffer 的浏览器特性。而出于安全考虑，浏览器默认禁用它，必须在服务器返回特定的安全响应头（COOP / COEP）才能启用。这套配置很隐蔽，配不对，多线程就用不了，处理速度慢到无法接受。

第二是 WASM 的初始化体积与加载优化。FFmpeg.wasm 的体积非常大（几十 MB），用户第一次打开页面要把它下载下来。如果不做加载优化，用户会面对漫长的白屏等待，直接流失。如何分块加载、如何缓存、如何在加载时给出友好的进度反馈，是这个案例的体验生命线。