浏览器端 AI 视频人物描边实践：MODNet、SlimSAM、MediaPipe 与光流融合方案

传统视频人物特效往往依赖云端 GPU：用户上传视频，服务端逐帧推理，再将处理结果返回客户端。

这种架构容易获得较高算力，但也带来了素材上传时间、带宽成本、隐私合规和服务端扩容等问题。

在开源浏览器视频编辑器 Timeline Studio 中，我们尝试了另一条路线：把人物识别、视频抠像、光流传播和描边渲染全部放到浏览器本地完成。

项目 GitHub 地址：

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

目标：在浏览器里完成视频人物特效

我们希望人物描边具备以下能力：

自动识别视频中的主要人物；
避免把沙发、靠垫和其他人物混入蒙版；
保留头发、衣服和手臂边缘；
视频播放过程中描边尽量稳定；
支持逐帧查看分析结果；
能在普通浏览器和移动设备上运行；
分析结果可以直接用于预览与导出；
用户素材不需要上传到服务端。

如果只对每一帧独立运行一次人像抠图模型，虽然能快速完成原型，但处理速度和时序稳定性通常不够理想。

因此，Timeline Studio 最终采用了一套多模型协作方案。

整体架构

当前人物描边处理链路如下：

视频解码
  ↓
YOLOS tiny 检测人物
  ↓
锁定主要人物 ROI
  ↓
MODNet 生成人物 Alpha
  ↓
MediaPipe 清理主体范围
  ↓
必要时使用 SlimSAM 修复
  ↓
Farneback 光流传播 Alpha
  ↓
质量检测与关键帧刷新
  ↓
材质化人物描边

四类算法在流程中承担不同职责：

能力	主要职责
YOLOS tiny	检测并锁定目标人物
MODNet	生成人像精细 Alpha
MediaPipe	快速刷新人物范围、清理外溢
SlimSAM	在复杂帧中修复主体分割
Farneback 光流	在相邻帧之间传播人物蒙版

这不是简单的模型串联，而是一套带降级、恢复和质量判断的混合流水线。

YOLOS：先解决“描谁”的问题

人像抠图模型擅长回答“哪些像素属于人”，但在多人场景中，不一定知道用户想处理哪个人。

例如画面中可能同时出现：

前景中的半身人物；
中间的主要人物；
背景中的路人；
与人物颜色接近的沙发或靠垫。

Timeline Studio 首先使用 YOLOS tiny 检测人物，再结合置信度、检测框面积、人物完整度和历史位置锁定主要人物。

后续模型优先在这个人物 ROI 内运行，从源头减少其他人物和背景物体对蒙版的干扰。

MODNet：作为主要人物 Alpha 来源

MODNet 是当前流水线中的主要抠像模型。

相比普通二值分割，人像抠像需要输出连续 Alpha。头发和衣服边缘不是简单的“属于人物”或“不属于人物”，而是可能带有一定透明度。

这种连续 Alpha 对人物描边非常重要。如果蒙版边缘过于生硬，描边会出现明显的锯齿和跳动。

Timeline Studio 会根据 YOLOS 检测框裁剪人物 ROI，再运行 MODNet，降低输入尺寸和计算量。

支持 WebGPU 的浏览器会优先使用 WebGPU 推理；不支持时回退到 WASM q8。

MediaPipe：速度与主体约束

MediaPipe 人物分割的速度较快，适合浏览器和移动端，但它不是当前方案中唯一的 Alpha 来源。

我们主要把 MediaPipe 用于三个场景：

快速刷新人物所在区域；
清理 MODNet 蒙版中溢出的背景；
约束目标人物，减少其他人物进入 Alpha。

MediaPipe 输出会生成一个柔化后的主体门控蒙版，再与 MODNet Alpha 相乘：

fusedAlpha[index] =
  modnetAlpha[index] * mediaPipeGate[index] / 255;

门控区域会先进行小半径膨胀和模糊，避免直接切掉头发、手指和衣服边缘。

如果 MediaPipe GPU 路径不可用，系统会回退 CPU；如果整个 MediaPipe 模块初始化失败，MODNet 与 SlimSAM 流程仍然可以继续工作。

SlimSAM：复杂画面的兜底方案

MODNet 在大多数人物视频中表现较好，但它是通用人像抠图模型，遇到以下场景时可能产生不完整结果：

人物与背景颜色接近；
人物倚靠沙发或座椅；
手臂与身体分离；
人物被前景物体遮挡；
多个人物距离较近。

Timeline Studio 会先对 MODNet 结果进行质量检测。如果找不到与目标检测框匹配的完整人物区域，才调用 SlimSAM。

调用 SlimSAM 时，系统会提供：

YOLOS 目标人物框；
目标人物内部的正向提示点；
其他人物位置的负向提示点；
MODNet 外溢区域的负向提示点。

当前使用固定版本的 Xenova/slimsam-77-uniform。在支持 WebGPU 的设备上使用 FP16，否则使用 WASM q8。

SlimSAM 不需要逐帧执行，只在普通抠像结果不可靠时参与修复，因而能够在效果和速度之间取得更好的平衡。

光流：让视频描边更稳定

即使单帧抠像效果很好，如果每一帧都独立推理，人物边缘仍可能发生轻微变化。

这些变化在静态图片上不明显，但播放成视频后会表现为描边闪烁。

当前方案使用 OpenCV.js 的 Farneback 稠密光流估计相邻帧的像素运动，再将上一帧人物 Alpha 传播到下一帧。

上一帧图像 + 当前帧图像
           ↓
      Farneback 光流
           ↓
  根据运动场重映射 Alpha
           ↓
      当前帧预测蒙版

光流只负责短距离传播，并不会无限沿用旧蒙版。系统会根据人物面积变化、位移、平均运动量和 ROI 状态决定是否重新运行模型。

例如传播后的蒙版面积突然缩小到原来的很小一部分，或者扩大数倍，通常意味着人物发生遮挡、镜头切换或光流追踪失败。此时系统会放弃当前传播结果，重新建立模型锚点。

当前的性能配置

在编辑器人物效果路径中，当前使用的主要参数为：

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

这些参数代表：

以约 8 FPS 生成效果采样；
大约每 3.5 秒安排一次常规模型锚点；
输入帧最长边限制在约 360 像素；
单次分析最多生成 360 个采样点；
出现异常时可以提前刷新锚点。

编辑预览不需要让 AI 以原视频 30 FPS 逐帧执行完整推理。最终合成时，可以根据时间戳选择相邻的人物分析结果。

这种方式显著减少了完整模型调用次数。

解码、Worker 与模型预热

人物描边的性能瓶颈不仅来自模型推理，还包括：

视频 seek；
帧解码；
Canvas 像素读取；
Worker 数据复制；
透明图片编码；
模型初始化与下载。

目前实现包含以下优化：

1. 优先顺序解码

系统优先使用 WebCodecs 顺序读取需要分析的视频帧，减少频繁修改 video.currentTime 带来的等待。

如果当前视频编码或浏览器不支持 WebCodecs，则自动回退到精确 seek。

2. 多模块并行预热

视频加载完成后，以下模块会并行准备：

YOLOS 与 MODNet；
MediaPipe Image Segmenter；
OpenCV 光流 Worker。

这样可以减少首个关键帧上的串行等待。

3. Transferable Buffer

视频 RGBA 数据和人物 Alpha 在主线程与 Worker 之间传递时，会尽量使用 Transferable ArrayBuffer，降低大数组复制成本。

4. 模型与 Worker 复用

已经初始化的模型和 Worker 不会在每次调整描边颜色或材质时重新加载。

人物 Alpha 会保存在片段分析记录中。用户修改描边颜色、宽度和材质时，只需要重新渲染效果，不需要重新做人像分析。

模型交付与魔搭 ModelScope

浏览器本地 AI 的一个现实问题是模型文件通常比较大，首次使用需要下载。

Timeline Studio 为浏览器模型设计了双线路交付机制：

国内和中文环境优先尝试魔搭 ModelScope；
同时保留 Hugging Face 作为备用线路；
首次请求时判断当前环境下可用且更快的来源；
下载失败后自动切换；
不同来源使用等价缓存身份，避免重复下载。

从普通描边到材质描边

获得稳定人物 Alpha 后，最简单的做法是对 Alpha 执行膨胀，再减去原始 Alpha：

Outline = Dilate(Alpha) - Alpha

Timeline Studio 在这个基础上加入了动态材质系统，目前包括：

褶皱纸；
重磨砂；
环形光晕；
液态金属；
厚涂油彩；
墨水洇染。

材质主要通过 SVG Filter 实时合成：

SourceAlpha
  → feMorphology
  → feComposite
  → feTurbulence
  → feDisplacementMap
  → 材质贴图
  → feBlend
  → feDropShadow
  → feGaussianBlur

用户可以调节：

描边颜色；
描边宽度；
不透明度；
边缘密度；
纹理强度；
纹理缩放；
边缘不规则度；
材质浮雕；
墨水洇染；
光圈数量；
光圈间距；
外发光半径。

由于材质渲染不需要重新运行 AI 模型，因此参数修改可以接近实时地显示在预览画面中。

逐帧反馈比单一进度条更重要

长视频人物分析无法做到瞬间完成，因此产品层面的反馈也很重要。

当前编辑器会在每完成一个采样帧后同步更新：

当前透明人物；
当前描边效果；
视频预览时间；
时间线播放头；
已处理帧数；
人物稳定或丢失状态；
总体分析进度。

用户不必等待整段视频结束，前面已经完成的部分可以立即预览。

分析过程也支持取消。取消后会终止当前任务并释放对应 Worker 请求，不会继续在后台消耗资源。

人物描边的编辑器工作流

用户可以在主画面轨或画中画轨选择一个图片、视频片段，然后进入效果面板：

选择“人物描边”；
点击“分析人物”；
逐帧查看人物识别结果；
选择描边材质；
打开精调弹窗；
播放人物实时预览；
调节材质参数；
选择是否保留原视频背景；
将效果应用到片段。

关闭视频背景后，片段可以只保留透明人物和描边，用于画中画、换背景和多层视频合成。

本地运行

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 浏览器。支持 WebGPU 的设备可以获得更好的模型推理性能。

构建生产版本：

npm run build
npm run preview

运行项目检查：

npm run check

当前限制与后续方向

多模型与光流组合并不能彻底解决所有视频分割问题。当前仍需要重点优化：

多人互相遮挡；
主体中途离开并重新进入画面；
镜头快速切换；
高速运动和严重运动模糊；
低对比度头发边缘；
手持物体与人物轮廓粘连；
移动端长视频处理的发热和内存占用。

后续计划包括：

建立更多人物视频测试集；
记录不同设备的实时系数和单帧耗时；
增加镜头切换检测；
改进多人身份持续跟踪；
支持用户手动选择目标人物；
扩展物体描边和运动矢量特效；
提供更多可参数化材质。

目前人物描边仍处于积极开发阶段，具体进度以项目仓库中的 README、Release 和 Roadmap 为准。

开源地址

GitHub：

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

在线体验：

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

魔搭 ModelScope：

https://www.modelscope.cn/models/martindelophy/timeline-studio-onnx-models

如果你正在研究浏览器 AI、WebGPU、ONNX Runtime Web、视频抠像、光流跟踪或者本地优先的视频编辑器，欢迎 Star 项目、提交 Issue 或参与后续开发。

浏览器端 AI 视频人物描边实践：MODNet、SlimSAM、MediaPipe 与光流融合方案

浏览器端 AI 视频人物描边实践：MODNet、SlimSAM、MediaPipe 与光流融合方案

目标：在浏览器里完成视频人物特效

整体架构

YOLOS：先解决“描谁”的问题

MODNet：作为主要人物 Alpha 来源

MediaPipe：速度与主体约束

SlimSAM：复杂画面的兜底方案

光流：让视频描边更稳定

当前的性能配置

解码、Worker 与模型预热

1. 优先顺序解码

2. 多模块并行预热

3. Transferable Buffer

4. 模型与 Worker 复用

模型交付与魔搭 ModelScope

从普通描边到材质描边

逐帧反馈比单一进度条更重要

人物描边的编辑器工作流

本地运行

当前限制与后续方向

开源地址

视频分割

热门文章

最新文章

相关电子书