纯前端 AI 视频特效实践：在浏览器中完成实物识别与动态描边

标题：

在 Timeline Studio 这个项目里，实现了一套完全在浏览器本地运行的实物描边功能。它能识别商品、鞋子、玩具这些物体，生成 Alpha 蒙版，然后在图片或视频里渲染出可调节的描边效果。

项目完整代码已开源，放在 GitHub 上：

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

整个过程都在浏览器内完成，不需要把用户素材上传到任何服务器。

整体实现思路

说到实物描边，很多人第一反应是边缘检测，但这招其实不太灵。边缘检测会同时提取人物、背景和纹理，根本没法确定用户到底想处理哪个物体。

所以，项目把处理流程拆成了四个阶段：

目标检测↓
目标身份锁定↓
提示式物体分割↓
描边材质渲染

简单来说，目标检测负责找到画面里有哪些可能的“参赛选手”，提示式分割负责给真正的目标画一个像素级的蒙版。对于视频，还需要通过光流传播和稀疏锚点分析来保持前后帧的稳定。

使用 Worker 执行目标检测

模型推理这事儿，放在 Web Worker 里做，避免阻塞 React 界面和时间线的交互。主线程这边只需要发送待分析画面就行：

worker.postMessage({ requestId,type: "detect",blob,scoreThreshold: 0.24,
});

Worker 在初始化 ONNX Runtime 会话时，会优先尝试 WebGPU，如果不行，就回退到 WASM：

async function createSession(modelBytes) { if (na vigator.gpu) {   try { 
return await ort.InferenceSession.create(modelBytes, { 
executionProviders: ["webgpu"],
graphOptimizationLevel: "all",
});  } catch (error) { 
console.warn("WebGPU 初始化失败，回退 WASM");  }}
return ort.InferenceSession.create(modelBytes, {   executionProviders: ["wasm"],  graphOptimizationLevel: "all",});
}

这样做的好处是，既能充分利用支持 WebGPU 的设备，也能兼容那些普通浏览器环境。

锁定用户真正想处理的物体

检测模型可能会同时返回好几个候选框。项目没有直接选择置信度最高的那个，而是综合计算了多个因素：

• 检测置信度
• 物体面积
• 物体是否靠近画面中心
• 与上一帧目标的重叠程度
• 前后帧类别是否一致

排序代码简化后是这样的：

function calculateRank(item, previous) { const area = getArea(item.box);const centerScore = getCenterScore(item.box);const previousIoU = boxIoU(item.box, previous?.box);const identityBonus =  previous?.label === item.label ? 0.5 : 0;
return (  item.score * 0.55 +  Math.min(area, 0.25) +  centerScore * 0.2 +  previousIoU * 1.2 +  identityBonus);
}

在视频中，上一帧的目标会被赋予更高的权重，这样就能避免其他物体突然进入画面后发生错误切换。

从检测框生成物体 Alpha

目标确定之后，系统会根据物体的中心生成一个提示点，然后调用提示式分割模型：

const result = segmenter.segment(image, { keypoint: {   x: clamp(point.x, 0, 1),  y: clamp(point.y, 0, 1),},
});

const mask = result.confidenceMasks.at(-1);
const probabilities = mask.getAsFloat32Array();

置信度结果会转换成 0～255 的 Alpha 值：

const alpha = new Uint8ClampedArray(probabilities.length);

for (let i = 0; i < probabilities.length; i++) { const probability = clamp(probabilities[i], 0, 1);
alpha[i] = probability >= threshold  ? Math.round(probability * 255)  : 0;
}

得到 Alpha 之后，还得做一个保守的质量检查。如果蒙版出现以下情况，系统就不会直接接受：

• 蒙版越过了目标区域
• 出现了多个明显的连通区域
• 混入了其他物体或背景
• 面积相对上一帧异常变化
• 目标身份发生了跳变

相比之下，修复一个已经错误的蒙版代价太大，直接跳过那些不可靠的帧反而更安全。

视频使用稀疏锚点和光流传播

如果每帧都执行完整的检测和分割，计算开销会非常大。所以视频分析采用了稀疏锚点策略。

const needsAnchor =index === 0 ||index - lastAnchorIndex >= anchorInterval ||!trackedMaskBox;

if (needsAnchor) { currentAlpha = await analyzeObjectAnchor(frame);lastAnchorIndex = index;
} else { currentAlpha = await propagateAlphaWithFlow(  previousFrame,  currentFrame,  currentAlpha,);
}

只有首帧、固定间隔或者目标丢失时，才会重新执行完整的分析。中间帧则通过光流来传播 Alpha。

传播完成后，还会检查面积变化是否合理：

const ratio = nextArea / trackedArea;

if (!nextBox || ratio < 0.35 || ratio > 2.8) { currentAlpha = null;trackedMaskBox = null;
}

一旦传播结果不可信，系统就会重新检测目标，而不是继续传播错误的蒙版。

分离 AI 分析与视觉样式

模型分析只负责生成可复用的 Alpha。描边的颜色、宽度、阴影和材质，这些都属于独立的效果状态：

const objectOutline = { targetKind: "object",outline: {   color: "#f3efe4",  width: 12,  opacity: 1,  glow: 0.35,},material: {   id: "paper",  edgeDensity: 0.5,  shadowDepth: 0.32,},
};

用户调整样式时，只需要重新合成画面，不需要再次运行检测和分割模型。

同一份 Alpha 同时用于编辑器预览和最终导出，这样可以保证两条渲染链路的效果完全一致。

总结

浏览器本地实物描边的核心，其实不依赖于某一个模型，而是一整套处理策略：

• Worker 隔离模型推理
• WebGPU 与 WASM 兼容回退
• 检测与提示式分割组合
• 目标身份锁定
• 保守的蒙版质量门槛
• 稀疏锚点与光流传播
• AI 分析和视觉渲染解耦