canvas实时捕获视频帧并应用滤镜的核心链路是drawimage→getimagedata→像素处理→putimagedata；需先用getusermedia获取流并绑定video（设autoplay、muted、playsinline），显式设置宽高，等待loadeddata后用requestanimationframe稳定绘制，可裁剪区域或限帧率优化；像素操作需缓存data.length、用位运算提速，大画布卡顿时可用webgl加速。
Canvas 可以实时捕获视频帧并应用滤镜，核心在于 drawImage 将视频流绘制到画布，再通过 getImageData 读取像素、修改后用 putImageData 写回——这是实现自定义滤镜的基础链路。
获取视频流并绑定到 video 元素
需先通过 navigator.mediaDevices.getUserMedia 获取摄像头权限，拿到 MediaStream 后赋给 <video></video> 的 srcObject。注意设置 autoplay 和 muted（尤其在移动端或自动播放策略严格的浏览器中）。
- 推荐加上
playsinline属性，避免 iOS 全屏播放干扰 canvas 捕获 - video 元素宽高建议显式设置（如
width="640" height="480"），避免 canvas 绘制时因缩放导致像素失真 - 确保 video 已触发
loadeddata或canplay事件后再开始 draw，否则可能捕获到黑帧
用 requestAnimationFrame 实现稳定帧采集
不要用 setInterval 定时采集，而是用 requestAnimationFrame 与屏幕刷新同步，既能保证流畅性，又能避免丢帧或重复绘制。
- 在 rAF 回调中调用
ctx.drawImage(video, 0, 0, canvas.width, canvas.height) - 若只需部分处理（如人脸区域），可传入 source x/y/w/h 参数裁剪绘制区域
- 为控制处理负载，可加简单帧率限制（例如每 3 帧处理一次），用计数器或
performance.now()判断间隔
像素级滤镜：读取→计算→写回
调用 ctx.getImageData(0, 0, canvas.width, canvas.height) 得到 ImageData 对象，其 .data 是 Uint8ClampedArray，按 RGBA 四字节一组排列（索引 0~3 是第一个像素的 R/G/B/A）。
- 灰度化示例：
let avg = (r + g + b) / 3; data[i] = data[i+1] = data[i+2] = avg; - 反色：直接
data[i] = 255 - data[i]（对 R/G/B 分别操作） - 性能关键：避免在循环中频繁访问
data.length，提前缓存；使用位运算（如data[i] = (r * 0.299 + g * 0.587 + b * 0.114) | 0）比 Math.round 更快 - 注意：Chrome 等浏览器对大画布（如 1280×720）频繁调用 getImageData/putImageData 可能卡顿，可考虑降采样处理或 Web Workers 拆分计算
进阶：WebGL 加速滤镜（可选）
纯 Canvas 2D 处理高分辨率视频易瓶颈，此时可用 WebGLRenderingContext + 自定义 shader 实现 GPU 加速滤镜。主流方案是基于 Three.js 或轻量库如 glfx.js。
- 原理：将 video 元素作为纹理传入 WebGL，用 fragment shader 实时计算每个像素输出
- 优势：支持复杂效果（高斯模糊、卷积核、HSV 调色等），且帧率稳定
- 注意点：需手动管理 WebGL 上下文、着色器编译、纹理绑定；首次初始化稍慢，但运行时效率远超 CPU 方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
