在浏览器里实现稳定的人物描边：MODNet、MediaPipe、SlimSAM 与光流融合实践

视频人物描边看起来只是“沿着人物轮廓画一条线”，但真正落到视频编辑器里，会同时遇到人物识别、精细抠像、多人干扰、边缘抖动和推理速度等问题。

在开源浏览器视频编辑器 Timeline Studio 中，我们正在实现一套完全运行于浏览器本地的人物描边能力：利用 YOLOS 锁定目标人物，结合 MODNet、MediaPipe 与 SlimSAM 获取人物 Alpha，再通过 OpenCV Farneback 光流传播蒙版，最终生成可以逐帧预览、调节材质并参与视频导出的描边效果。

项目 GitHub 地址：

https://github.com/MartinDelophy/ai-video-editor

为什么不能简单地逐帧抠像？

最直接的方案，是对视频的每一帧执行一次 MODNet 人像抠图，然后根据 Alpha 边缘绘制描边。

这种方式虽然容易实现，却有三个明显问题：

1. 每一帧都执行完整模型推理，处理时间较长。
2. 每帧预测相互独立，头发、手臂和衣服边缘容易闪烁。
3. 多人、沙发、靠垫或前景遮挡可能被错误并入人物区域。

因此，Timeline Studio 没有采用单模型逐帧推理，而是把人物描边拆成“目标锁定、关键帧抠像、主体修复、光流传播和质量校验”五个阶段。

整体技术链路

当前实现的主要处理流程如下：

视频解码
  ↓
YOLOS tiny 检测并锁定目标人物
  ↓
在人物 ROI 内执行 MODNet 抠像
  ↓
MediaPipe 清理主体外溢
  ↓
MODNet 结果不完整时使用 SlimSAM 修复
  ↓
OpenCV Farneback 光流传播人物 Alpha
  ↓
面积、位置和运动质量校验
  ↓
生成逐帧透明人物与描边

其中，各模型承担的职责并不相同。

YOLOS tiny：先确定“要处理哪个人”

在人多或背景复杂的视频中，直接运行人像分割很容易把其他人物、沙发或相似颜色的物体带入蒙版。

YOLOS tiny 首先检测画面中的人物，并结合置信度、人物完整度、面积和历史位置锁定主要人物。后续的 MODNet、MediaPipe 和 SlimSAM 都优先在这个人物区域内工作。

这一步解决的不是边缘精度，而是主体身份问题。

MODNet：生成高质量人物 Alpha

MODNet 是人物抠像的主要模型。它擅长生成带半透明边缘的 Alpha，能够保留头发、衣物边缘等细节，比较适合作为人物描边的基础。

为了降低计算量，当前实现不会始终处理整张原始视频帧，而是根据检测结果裁剪人物 ROI，再进行抠像。

支持 WebGPU 时，MODNet 使用 WebGPU 推理；不支持时则回退到 WASM q8 路径。

MediaPipe：快速刷新与主体范围约束

MediaPipe 的优势是轻量和速度快，但单独使用时，复杂场景下的精细边缘通常不如 MODNet。

因此，我们没有让 MediaPipe 直接替代 MODNet，而是把它作为快速主体门控：

• 在部分帧快速刷新人物范围；
• 清理 MODNet 可能包含的沙发、靠垫和背景区域；
• 通过软门控保留头发、手指等细节；
• MediaPipe 不可用时，继续保留原有 MODNet 与 SlimSAM 路径。

为了避免形态学处理侵蚀头发和手指，闭运算与开运算的半径被控制得比较小。

SlimSAM：只在必要时修复

SlimSAM 并不是每一帧都会运行。

当 MODNet 结果不完整、人物蒙版质量不足，或者主体边界明显偏离 YOLOS 检测框时，系统才会调用 SlimSAM，并向模型传入：

• 目标人物的包围框；
• 人物区域中的正向提示点；
• 其他人物与外溢区域的负向提示点。

SlimSAM 的结果会与 MODNet Alpha 进行融合。这样可以利用 SAM 的主体分割能力，同时保留 MODNet 较自然的半透明边缘。

当前使用的模型是固定版本的 Xenova/slimsam-77-uniform。支持 WebGPU 时使用 FP16，否则回退到 WASM q8。

用光流减少完整模型推理

如果视频按 25 或 30 FPS 逐帧运行 MODNet，即使模型经过量化，处理长视频仍然比较慢。

Timeline Studio 的做法是：

• 在关键帧上运行完整人物分析；
• 在相邻帧之间使用 Farneback 稠密光流；
• 根据画面运动将上一帧 Alpha 传播到当前帧；
• 当光流结果不可靠时，再提前触发新的模型锚点。

当前编辑器配置以约 8 FPS 生成人物效果采样，并以较低频率执行完整模型锚点。分析分辨率默认限制在最长边约 360 像素，最终渲染时再映射回视频画布。

核心调用方式类似：

const analysis = await analyzePersonOutlineVideo({
  src: videoSource,
  duration,
  flowFps: 8,
  anchorFps: 1 / 3.5,
  maxSamples: 360,
  maxDimension: 360,
  onProgress,
  onSample,
});

这并不意味着每隔固定时间才校正一次。系统还会根据以下指标动态提前刷新：

• 蒙版面积是否突然扩大或缩小；
• 人物位置是否偏离历史轨迹；
• 光流平均运动量是否异常；
• ROI 是否已经退化为全画面；
• 当前人物是否丢失或被遮挡。

例如，光流传播后的蒙版面积与上一帧相比出现明显异常时，当前结果会被拒绝，系统会重新执行人物检测与抠像，而不是继续传播错误。

解码和并行预热也很重要

模型推理并不是唯一的耗时来源。视频随机 seek、Canvas 像素读取、透明 PNG 编码都会占用时间。

当前实现还采用了几项工程优化：

• 优先通过 WebCodecs 顺序解码视频帧；
• 硬件解码不可用时回退到精确 seek；
• YOLOS、MODNet、MediaPipe 和光流运行时并行预热；
• 模型放在独立 Worker 中，避免阻塞编辑器界面；
• 帧数据通过 Transferable Buffer 传给 Worker，减少复制；
• 复用已初始化的模型和 Worker；
• 每处理完一帧立即提交结果，不必等待整段视频结束。

因此，用户在分析过程中能够逐帧看到人物透明图和描边效果，而不是面对一个长时间没有反馈的进度条。

从“描边”扩展到“描边材质”

拿到稳定的人物 Alpha 后，普通纯色描边只是最基础的呈现方式。

Timeline Studio 当前设计了六种差异明显的描边材质：

• 褶皱纸：突出折痕、纸纤维和阴影层次；
• 重磨砂：使用粗颗粒和乳白色扩散；
• 环形光晕：支持多层光圈、间距与泛光；
• 液态金属：强调镜面反射和对比度；
• 厚涂油彩：模拟刮刀笔触与颜料浮雕；
• 墨水洇染：模拟纸张上的毛细扩散和不规则边缘。

这些材质并不是预先生成一张固定贴图，而是由 SVG Filter 动态组合：

Alpha 膨胀
  → 内外轮廓相减
  → 分形噪声
  → 位移变形
  → 材质贴图混合
  → 阴影与浮雕
  → 模糊或外发光

用户可以进一步调节描边颜色、宽度、透明度、纹理强度、纹理缩放、边缘密度、扩散、浮雕、光圈数量和光晕半径等参数。

同一套效果状态会写入视频片段，供编辑预览和导出渲染共同使用。

产品层面的交互设计

人物描边不只是一个算法，还需要一套适合视频编辑的产品流程。

目前的交互设计包括：

1. 在主画面或画中画轨道选择图片、视频片段；
2. 进入“效果”面板并选择“人物描边”；
3. 启动人物分析；
4. 逐帧查看人物识别和描边生成过程；
5. 选择描边材质；
6. 在弹窗中播放预览并精调参数；
7. 决定是否显示原视频背景；
8. 将最终设置应用到对应时间线片段。

关闭视频背景后，片段会以透明人物和描边参与画中画与最终合成，因而可以继续叠加纯色背景、图片背景或者其他视频。

界面目前也已经覆盖中文、英文、日语、韩语、西班牙语、法语、德语、葡萄牙语、泰语、越南语和俄语。人物分析的模型加载、逐帧进度、光流追踪和错误状态也会随界面语言切换。

本地运行项目

Timeline Studio 是一个 MIT 协议的开源项目，可以直接克隆运行：

git clone https://github.com/MartinDelophy/ai-video-editor.git
cd ai-video-editor
npm install
npm run dev

建议使用 Node.js 20+ 和现代 Chromium 浏览器。首次使用人物分析时需要下载对应模型，后续会复用浏览器缓存。

生产构建可以执行：

npm run build
npm run preview

当前限制

这套方案已经能够明显改善单纯逐帧 MODNet 的速度和时序稳定性，但仍有一些需要继续优化的场景：

• 多人频繁交叉或完全遮挡；
• 人物快速出入画面；
• 大幅度运动模糊；
• 头发与背景颜色高度接近；
• 手持物体与人物发生复杂遮挡；
• 镜头切换后主体发生变化；
• 低性能移动设备上的长视频处理。

下一阶段会继续补充更多多人、远景、半身、全身、遮挡和高速运动视频，建立可重复运行的准确率与性能基准。同时还计划扩展物体描边、运动矢量可视化和更多可编辑材质。

目前人物描边仍处于积极开发阶段，最新进度请以仓库 README、Release 和 Roadmap 为准。

项目地址

GitHub：

https://github.com/MartinDelophy/ai-video-editor

在线体验：

https://video-editor.ai-creator.top/

如果你对浏览器端 AI、WebGPU、ONNX Runtime Web、视频抠像、光流追踪或时间线编辑感兴趣，欢迎 Star、提交 Issue，或者参与后续实现。