HTML5本身不提供绿幕抠像能力，真正起作用的是Canvas + JavaScript组成的实时像素处理流水线，核心是逐帧读取、判断、改写、重绘，依赖颜色识别准确性和处理节奏稳定性。
获取并稳定视频流
用navigator.mediaDevices.getUserMedia({ video: true })拉起摄像头，或加载本地绿幕视频文件。注意两点：
• 视频需设置muted和autoplay，否则多数浏览器会阻止自动播放
• 推荐固定分辨率（如640×480），避免canvas尺寸动态变化引发重绘开销
• 若使用MP4素材，确保编码兼容（H.264 + AAC），并预加载video.readyState === 4后再启动处理
在Canvas中逐帧分析与透明化
创建一个隐藏的<video>和一个同尺寸<canvas>，通过requestAnimationFrame循环执行：
• ctx.drawImage(video, 0, 0, canvas.width, canvas.height)把当前帧画进去
• ctx.getImageData(0, 0, width, height)拿到像素数组（Uint8ClampedArray）
• 遍历每个像素，按HSV色相判断是否为绿幕区域（比RGB阈值更抗光照变化）
• 对匹配像素，设data[i + 3] = 0（即Alpha=0），实现透明
• ctx.putImageData(data, 0, 0)写回画布
叠加背景并优化边缘效果
抠完前景后，背景替换只是视觉合成一步：
• 可用纯色：ctx.fillStyle = '#f0f0f0'; ctx.fillRect(0, 0, width, height)
• 可贴图：ctx.drawImage(bgImage, 0, 0, width, height)
• 更自然的做法是加羽化（Feathering）：对绿幕边缘像素按HSV距离渐变设Alpha值，比如距离越近Alpha越小，避免硬边闪烁
• 实际项目中建议先对原帧做轻度高斯模糊或中值滤波，再判断颜色，能显著减少噪点导致的“雪花抖动”
应对卡顿与掉帧的实用策略
纯Canvas 2D在1080p下容易掉帧，尤其低端设备。可立即见效的调整包括：
• 把canvas尺寸控制在640×480以内，帧率可稳在30fps以上
• 关闭canvas抗锯齿：ctx.imageSmoothingEnabled = false
• 使用OffscreenCanvas配合Web Worker分离计算，避免阻塞UI线程
• 进阶方案直接迁移到WebGL：写一段Chroma Key Shader，让GPU并行处理每像素，延迟低、吞吐高
• 不强求满帧——对数字人讲解类场景，24fps已足够自然，可主动限帧节省资源
立即学习“前端免费学习笔记（深入）”；
