实时滤镜录制：在录制过程中应用CSS滤镜
实时滤镜录制，说白了就是在视频流里“动手脚”。
我刚开始做这个功能时，以为直接往video标签上堆CSS滤镜就完事了。结果录出来的视频，嗯……原汁原味，滤镜全没了。为什么？因为MediaRecorder录制的是原始流，不是DOM渲染后的样子。
所以，真正的做法是：用Canvas接管每一帧，在帧上做滤镜处理，再把处理后的流喂给MediaRecorder。
CSS滤镜 vs Canvas滤镜：怎么选？
这里有个常见的误区。CSS滤镜确实方便，但它只影响显示，不影响录制。Canvas滤镜虽然麻烦点，但能真正改变像素数据。
我个人习惯这样分场景：
- 预览阶段：用CSS滤镜，性能好，调参快
- 录制阶段：用Canvas滤镜，确保效果被录进去
当然，如果你非要全程用Canvas，也不是不行。只是调试的时候会多花点时间。
用Canvas处理每一帧
核心思路其实就三步：
- 把视频帧画到Canvas上
- 在Canvas上应用滤镜
- 从Canvas上捕获流，传给MediaRecorder
代码大概是这样的：
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const video = document.getElementById('videoElement');
function processFrame() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 这里可以加滤镜
const stream = canvas.captureStream(30); // 30fps
// 把stream传给MediaRecorder
requestAnimationFrame(processFrame);
}
我在项目中遇到过一个问题：captureStream的帧率如果设得太高，低端设备会卡成PPT。30fps是个比较稳妥的值。
实现美颜效果
美颜，说白了就是磨皮加美白。磨皮的核心是模糊，美白的核心是调色。
我常用的方法是：
- 高斯模糊：对皮肤区域做模糊处理
- 亮度/对比度调整：让肤色更均匀
- 色相偏移：稍微偏暖一点，显得气色好
这里有个简单的美颜滤镜实现：
function applyBeautyFilter(imageData) {
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
// 简单的美白：提高亮度
data[i] = Math.min(255, data[i] * 1.1); // R
data[i + 1] = Math.min(255, data[i + 1] * 1.05); // G
data[i + 2] = Math.min(255, data[i + 2] * 1.05); // B
}
return imageData;
}
注意：直接操作像素数据性能开销很大。每帧处理640x480的图像，就要处理超过120万个像素点。别在每一帧里做太复杂的计算。
实时滤镜性能优化
性能问题，是实时滤镜绕不过去的坎。我曾经在一个项目里，因为滤镜太复杂，导致录制帧率掉到10fps以下。画面那叫一个卡。
后来我总结了几条优化经验：
| 优化手段 | 效果 | 适用场景 |
|---|---|---|
| 降低Canvas分辨率 | 显著提升帧率 | 所有场景 |
| 使用Web Worker | 避免主线程阻塞 | 复杂滤镜 |
| 预计算滤镜参数 | 减少每帧计算量 | 固定滤镜 |
| 跳过空闲帧 | 节省CPU | 低端设备 |
我个人最推荐的是第一条：降低Canvas分辨率。你想想看，720p的视频，你非要用1080p的Canvas去处理，那不是自找麻烦吗？
小技巧：如果滤镜效果需要高精度，可以先用低分辨率处理，最后再放大。视觉差异其实不大，但性能能翻倍。
避坑指南
我曾经踩过一个坑：在移动端同时开美颜和录制，结果手机烫得能煎鸡蛋。后来发现是每帧都在做像素级操作，CPU直接拉满。
解决方案是：
- 用
requestAnimationFrame代替setInterval，让浏览器自己控制帧率 - 在低电量模式下自动降低滤镜强度
- 对于美颜，可以用
filter属性代替像素操作，性能好很多
核心要点：实时滤镜录制的本质，是用Canvas接管视频流，在每一帧上做处理，再把处理后的流交给MediaRecorder。性能优化的关键是：降低分辨率、减少计算量、合理使用API。
嗯，到这里，实时滤镜录制的基本思路应该清楚了。下一节我们会聊更高级的滤镜组合，以及如何在移动端做硬件加速。
个人经验：如果你在做移动端的美颜录制，建议先用canvas.getContext('2d', { willReadFrequently: true })开启频繁读取模式。这个参数能提升像素操作的性能，我一开始不知道，后来翻文档才发现的。
好了，实时滤镜录制这块，核心就是“用Canvas做中间人”。你想想看，视频流从摄像头出来，经过Canvas的“加工厂”，再分流到预览和录制两条线。只要把Canvas这关把好了，滤镜效果就能稳稳地录进去。
下一节我们会聊更具体的滤镜算法，包括怎么实现抖音那种风格化滤镜。嗯，到时候见。