HTML5 本身不提供视频抠图能力，真正起作用的是 Canvas + JavaScript 构建的实时像素处理流水线，需逐帧读取、判断、改写、重绘，适用于网页端轻量级绿幕预览或互动演示，但无法替代专业视频软件。
HTML5 本身不提供视频抠图能力，真正起作用的是 Canvas + JavaScript 构建的实时像素处理流水线。它不是“一键抠图”，而是逐帧读取、判断、改写、重绘的过程，适合网页端轻量级绿幕预览或互动演示，但无法替代专业视频软件。
获取并稳定视频流
用 navigator.mediaDevices.getUserMedia({ video: true }) 获取摄像头流，或加载本地绿幕视频。关键点有三个：
- 视频元素必须设
muted和autoplay，否则多数浏览器会阻止自动播放 - 固定分辨率（如 640×480），避免 canvas 尺寸动态变化引发重绘开销
- 若用 MP4 文件，确保编码为 H.264 + AAC，并等待
video.readyState === 4（即已完全加载）再启动处理
在 Canvas 中逐帧抠像
需要两个 canvas：一个隐藏的 videoCanvas 用于像素分析，一个显示用的 outputCanvas 用于合成输出。核心操作是：
- 每帧调用
ctx.drawImage(video, 0, 0)把画面画入videoCanvas - 用
ctx.getImageData()获取 RGBA 像素数组（Uint8ClampedArray） - 对每个像素做 HSV 色度判断：绿色通常集中在 Hue ≈ 60°±20°，同时要求 Saturation 和 Value 都高于阈值（如 30%），比纯 RGB 判断更抗光照变化
- 匹配绿幕区域的像素，将其 Alpha 设为 0；边缘像素可按 HSV 距离渐变设 Alpha，实现羽化（Feathering），避免硬边闪烁
手动合成前景与背景
Canvas 的 putImageData 不受混合模式影响，必须手动线性插值合成：
立即学习“前端免费学习笔记（深入）”；
- 先将背景图（颜色、图片或另一视频）用
drawImage绘制到底层 - 遍历前景像素，对每个非透明点计算：
outR = fgR × fgA + bgR × (1 − fgA)（G/B/A 同理，注意 alpha 归一化到 0–1） - 把混合后的 RGBA 值写入
outputCanvas对应位置
性能优化要点
高分辨率下纯 JS 像素遍历容易卡顿，实用优化包括：
- 降低处理分辨率：把
videoCanvas设为 320×240，显示时用 CSS 缩放，视觉影响小但性能提升明显 - 跳点采样：每 2×2 像素只处理中心点，后续靠插值平滑
- 用
for循环代替forEach，直接操作Uint8ClampedArray，避免多余类型转换 - 对原始帧先做轻度中值滤波或均值模糊，能显著减少噪点导致的“雪花抖动”
