媒体API与Canvas深度集成实现浏览器内实时人像分割与背景替换，通过getUserMedia获取视频流、MediaPipe模型生成掩码、双层Canvas合成，支持性能兜底与多端兼容。
媒体API与Canvas深度集成，核心是把视频流“喂”进Canvas，再用AI模型或像素处理实时生成前景掩码，最后合成新背景。不依赖绿幕、不靠后端，全程浏览器内完成。
获取并稳定视频流
用navigator.mediaDevices.getUserMedia拉取摄像头流，绑定到<video>元素时必须设置固定宽高（如640×480），避免Canvas缩放导致坐标错乱。播放前监听oncanplay事件，确保流已就绪；iOS需加playsinline属性，否则无法自动播放。
- 禁用视频默认控件，防止用户暂停打断处理流程
- 设
muted属性，避免部分浏览器因音频权限问题拒绝启动流 - 用
video.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA做双重校验
用MediaPipe做轻量级人像分割
引入@mediapipe/selfie_segmentation，加载预训练模型（modelSelection: 1对应高精度模式，0适合低端设备）。每帧调用segmenter.send({image: video})，返回的segmentationMask是归一化后的0–1浮点数组，需用ctx.putImageData写入离屏Canvas转为Alpha通道。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 掩码分辨率默认为256×256，需双线性缩放到视频尺寸再使用
- 对掩码做简单阈值二值化（如
mask > 0.5 ? 255 : 0）可提升边缘锐度 - 启用
enableImageSmoothing: false避免缩放模糊影响抠图精度
Canvas双层合成实现动态背景
采用“三画布”结构：第一层渲染原始视频，第二层用掩码绘制前景（globalCompositeOperation = 'source-in'），第三层叠加自定义背景图或另一路视频流。关键在于合成时复用OffscreenCanvas缓冲区，避免每帧重建ImageData对象。
- 背景视频用
object-fit: cover铺满，但需同步其currentTime与主视频保持节奏一致 - 前景层叠加文字或SVG元素时，用
ctx.save()/ctx.restore()隔离变换状态 - 边缘轻微羽化可用
ctx.filter = 'blur(2px)'，但需在合成后单独应用，避免影响掩码精度
性能兜底与兼容性处理
在低端设备上，跳帧是刚需：每3帧执行一次分割，其余帧用线性插值更新关键点位置。同时降级策略要明确——当selfieSegmentation不可用时， fallback到Canvas像素色键法（如识别绿色区域设为透明），虽精度低但保证功能可用。
- 检测WebGL支持情况，优先启用GPU加速版本的MediaPipe Graph
- 对Safari等不支持
OffscreenCanvas的浏览器，用内存池管理ImageData实例 - 添加
requestIdleCallback包裹非关键绘制逻辑，防止主线程阻塞
