html5视频滤镜实时渲染本质是按需分工：轻量效果用css filter直接作用于video，自定义算法必须走canvas帧捕获+js像素处理，高性能需求则上webgl纹理着色器；三者非替代而是组合。
HTML5 视频滤镜的实时渲染，本质是“视觉层调整”与“帧级计算”的分工选择：轻量效果用 CSS filter 直接作用于 <video></video>；自定义算法（如美颜、边缘检测、动态贴纸）必须走 Canvas 帧捕获 + JavaScript 像素处理；高性能需求则应上 WebGL 纹理着色器。三者不是替代关系，而是按需组合。
CSS filter：最简实时调色方案
适用于亮度、对比度、饱和度、模糊、色相旋转等基础调整，无需 JS 干预，性能最优：
- 直接写在
<video></video>标签上：style="filter: brightness(1.2) contrast(1.1) saturate(0.9);" - 动态更新时，务必覆盖完整字符串，避免只拼接单个函数导致其他效果丢失
- iOS Safari 15.4+ 才稳定支持
blur()作用于 video；旧版或 WebView 需用@supports (filter: blur(1px))检测降级 - 局部增强可用容器 +
::before伪元素叠加backdrop-filter，实现毛玻璃遮罩等图层效果
Canvas 帧处理：可控像素级滤镜核心链路
这是实现灰度、反色、锐化、快闪文字等自定义效果的通用路径，关键在稳帧、低延迟、少拷贝：
-
视频就绪再绘：监听
loadeddata或canplay事件后启动requestAnimationFrame循环，避免黑帧 -
正确绑定流：
video.srcObject = stream后，设autoplay、muted、playsinline，并显式声明width/height属性（非仅 CSS） -
像素操作提速：遍历
ImageData.data时步长为 4，缓存data.length，用| 0替代Math.round，灰度推荐加权公式(r*0.299 + g*0.587 + b*0.114) | 0 -
防卡顿策略：1280×720 以上分辨率建议降采样到 640×480 处理；每 2–3 帧处理一次；只裁剪感兴趣区域（如人脸框）传入
drawImage
Web Worker：主线程不卡的关键拆分
当 Canvas 像素计算开始拖慢 UI，就把耗时逻辑移出主线程：
- 主线程提取
Uint8ClampedArray（即imageData.data），用postMessage(data, [data.buffer])零拷贝移交内存 - Worker 中只做纯计算：遍历数组修改 RGBA 值，校验长度
data.length === width * height * 4防错位 - 大图提速靠分块：把图像按行或网格切片，每个 Worker 处理一块，主线程按偏移合并结果
- 不支持 Worker 的环境（如部分旧 WebView）可降级为
requestIdleCallback分片处理，或跳过复杂滤镜
WebGL：GPU 加速的高阶路径
适合粒子特效、实时扭曲、AR 叠加等重度运算场景，绕过 CPU 像素拷贝瓶颈：
- 不经过 Canvas 2D 中转，直接将
<video></video>绑定为 WebGL 纹理：gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video) - 片元着色器（Fragment Shader）内完成所有滤镜逻辑：采样纹理坐标、引入时间变量、叠加噪声图、做多通道运算
- 启用
requestVideoFrameCallback（Chrome 94+）精准同步帧采样，减少丢帧 - 兼容性注意：iOS Safari 尚未支持 OffscreenCanvas，WebGL 方案需搭配 fallback 到 Canvas 或 CSS 方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
