我一直在摸索一个不同的约束：一个正经的AI视频编辑流程，到底能在浏览器里跑多远？结果是 Timeline Studio，一个基于 WebCodecs、WebGPU、WASM 和 ONNX Runtime Web 的 MIT 开源视频编辑器，完全不需要把媒体上传到任何人的服务器。

有意思的部分不是又画了一套时间线UI，而是让媒体播放、AI推理、可编辑的时间线状态、音频混音和确定性导出在同一个时间定义上达成一致——不依赖后端。我把交互式编辑和昂贵的媒体/AI工作拆开了：React 只管界面和项目状态，原生媒体元素负责平滑预览；Web Worker 里跑着 ONNX Runtime Web、WebGPU 推理和 WASM 降级方案；离线音频上下文处理混音；最后用一个确定性的合成渲染器按精确时间戳合成每一帧，再通过 WebCodecs 编码并封装成 MP4 或 WebM。

打开网易新闻 查看精彩图片

大型模型只在需要时加载，模型文件固定版本并缓存到本地，推理在长期存活的 Worker 里执行，避免重复构建整个运行时。编辑时预览和高质量导出需求不同——编辑阶段直接走浏览器原生播放路径，如果让 React 的延迟状态频繁 seek 媒体元素，会产生明显卡顿；导出则反过来，从精确输出时间戳逐帧计算当前激活的片段，再叠加字幕、蒙版、叠加层和变换，输出结果与预览的实时性能无关。

导出路径上，MediaRecorder 虽兼容性好，但它实时录制流，一旦标签页卡顿或设备跟不上，输出就会继承录制时的时序问题。因此 Timeline Studio 把 WebCodecs 作为主要导出通道：每个输出帧按统一几何规则合成，同样的字幕、遮罩、变换不会因为输出分辨率改变而位移。MediaRecorder 只保留为兼容性降级，而且不允许静默替换请求的格式，当前导出也暴露了真实的取消路径。