实现视频实时滤镜与特效合成需构建低延迟帧处理流水线：css filter适用于基础全局调整；canvas支持像素级自定义处理；webgl用于高性能复杂特效；最终通过多层合成与mediarecorder等实现输出。
实现视频实时滤镜与特效合成，核心在于把摄像头或视频流作为动态图像源，再通过不同层级的技术手段叠加视觉处理——不是“给视频加滤镜”，而是构建一条可控、低延迟的帧处理流水线。
用 CSS filter 快速实现轻量级全局调整
适合亮度、对比度、饱和度、模糊、色相旋转等基础效果，性能好、代码少、兼容性强。
- 直接作用于
<video></video>元素，无需 canvas 中转：video { filter: brightness(1.2) contrast(1.1) saturate(0.9) blur(1px); } - JavaScript 动态控制时，必须每次赋值完整字符串，避免覆盖已有效果：例如封装函数
updateFilter({ brightness: val1, contrast: val2 })，拼出完整 filter 值再写入video.style.filter - 注意 Safari 对
blur()和多函数链式调用渲染较慢，iOS 15.4 以下版本可能不支持 video + blur 硬件加速，建议用@supports (filter: blur(1px))做降级检测 - 若需局部柔焦（如只虚化背景），可将 video 嵌入相对定位容器，用伪元素 +
backdrop-filter: blur(4px)叠加毛玻璃遮罩
用 Canvas 实现自定义像素级滤镜
当 CSS 无法满足需求（如灰度+通道分离、故障风、绿幕抠像、人脸区域增强），就得走 canvas 帧捕获路线。
- 先获取媒体流：
navigator.mediaDevices.getUserMedia({ video: true })，赋给video.srcObject，并设置autoplay、muted、playsinline和显式宽高（如width="640" height="480"） - 监听
loadeddata后启动requestAnimationFrame循环，每帧调用ctx.drawImage(video, 0, 0, canvas.width, canvas.height) - 在绘制后插入滤镜逻辑：调用
ctx.getImageData()获取像素数据 → 遍历修改 RGBA →ctx.putImageData()写回；关键优化包括缓存data.length、用位运算| 0替代Math.round、只处理扰动区域而非全图 - 大分辨率（如 1280×720）易卡顿，推荐降采样到 640×360 处理，或启用
OffscreenCanvas+ Web Worker 拆分计算
用 WebGL 加速复杂实时特效
Canvas 2D 在处理高清视频+多层混合+动态卷积时很快遇到性能瓶颈，WebGL 是更可持续的方案。
- 原理是将视频帧作为纹理上传 GPU，用 GLSL 编写片元着色器（fragment shader）完成并行像素计算，比如高斯模糊、RGB 通道错位、HSV 色度键控抠像
- 相比 CPU 处理，WebGL 能稳定维持 30fps+ 的 1080p 滤镜，尤其适合直播美颜、AR 贴纸、实时背景替换等场景
- 开发门槛较高，但可用 Three.js、PixiJS 或 Picasso.js 等库简化流程；也可结合
transferControlToOffscreen()将 canvas 控制权移交 worker，实现主线程解耦 - 注意跨域问题：视频源需同源或带
crossOrigin="anonymous"，否则纹理上传失败
合成与输出的关键细节
滤镜只是中间环节，最终呈现和导出同样重要。
- 多图层合成可用
globalCompositeOperation（如overlay、screen）控制混合模式，配合多个 canvas 分层绘制（前景文字、中层滤镜、底层背景） - “快闪文字”“抖动”“脉动”等非像素类特效，本质是 DOM/CSS 动画，应基于
video.currentTime或timeupdate事件同步触发，而非逐帧 canvas 绘制 - 如需导出新视频文件，不能靠 canvas 截图拼接：要用
MediaRecorder录制 canvas 流，或服务端调用 FFmpeg 处理；浏览器暂不支持直接导出带滤镜的 MP4 - 移动端务必检测设备能力：小屏设备强制降分辨率、禁用 heavy filter、用
performance.now()控制扰动节奏，避免发热掉帧
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
