答案：实现实时视频滤镜需通过WebRTC获取摄像头流，绘制到Canvas进行像素处理，再用canvas.captureStream()将处理后的流重新用于WebRTC。具体步骤包括：使用navigator.mediaDevices.getUserMedia()获取视频流并显示在video元素；将video帧通过requestAnimationFrame循环绘制到Canvas；利用Canvas 2D API或WebGL对图像数据进行灰度、模糊等滤镜处理；最后调用canvas.captureStream()生成新MediaStream，并通过RTCPeerConnection的replaceTrack()方法替换原始视频轨道，实现滤镜视频的传输。此方案可真正改变视频像素数据，支持复杂滤镜和远程发送，而CSS滤镜仅限本地视觉效果，无法传输。性能上，Canvas 2D适合简单滤镜，WebGL则凭借GPU加速胜任高分辨率和复杂算法场景。
在浏览器里实现实时视频滤镜，核心思路其实挺直接的：我们通过WebRTC获取到用户的摄像头视频流，然后把这个流的每一帧画面“借”过来，放到一个Canvas元素上。接下来，我们就可以利用Canvas的强大绘图能力或者更高级的WebGL技术，对这些像素进行实时的处理和改造，比如加个灰度、模糊、美颜，甚至是更复杂的AR效果。最后，如果需要把这个处理过的视频流再发送出去，WebRTC也能帮我们搞定，通过
canvas.captureStream()就能实现。
解决方案
要实现浏览器端的实时视频滤镜，大致可以分解为以下几个步骤，这中间有些细节处理起来确实需要花点心思：
-
获取原始视频流： 首先，我们需要通过WebRTC的
navigator.mediaDevices.getUserMedia()
方法来获取用户的摄像头视频流。这会返回一个MediaStream
对象，里面包含了视频轨道（video track
）。const videoElement = document.createElement('video'); videoElement.autoplay = true; // 自动播放 videoElement.muted = true; // 通常先静音，避免回音 document.body.appendChild(videoElement); // 或者添加到其他容器 let localStream; async function getMediaStream() { try { localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false }); videoElement.srcObject = localStream; console.log('Got local stream:', localStream); } catch (error) { console.error('Error accessing media devices.', error); } } getMediaStream(); -
视频流到Canvas的实时绘制： 这是滤镜处理的关键一步。我们不能直接在
video
标签上做像素级的修改。所以，我们需要一个元素作为我们的“画板”。通过requestAnimationFrame
循环，我们把videoElement
的当前帧画面不断地绘制到canvas
上。const filterCanvas = document.getElementById('filterCanvas'); const ctx = filterCanvas.getContext('2d'); // 等待videoElement元数据加载完毕，确保尺寸可用 videoElement.onloadedmetadata = () => { filterCanvas.width = videoElement.videoWidth; filterCanvas.height = videoElement.videoHeight; drawFrame(); // 开始绘制循环 }; function drawFrame() { if (videoElement.paused || videoElement.ended) return; ctx.drawImage(videoElement, 0, 0, filterCanvas.width, filterCanvas.height); // 在这里应用滤镜 applyFilter(ctx, filterCanvas.width, filterCanvas.height); requestAnimationFrame(drawFrame); } // 占位符，实际滤镜函数会在这里 function applyFilter(context, width, height) { // 例如：一个简单的灰度滤镜 // const imageData = context.getImageData(0, 0, width, height); // const data = imageData.data; // for (let i = 0; i < data.length; i += 4) { // const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; // data[i] = avg; // red // data[i + 1] = avg; // green // data[i + 2] = avg; // blue // } // context.putImageData(imageData, 0, 0); } -
滤镜处理： 这部分是核心创意所在。你可以用Canvas 2D API (
getImageData
,putImageData
) 进行像素级的操作，实现灰度、反色、亮度调整等。对于更复杂、性能要求更高的滤镜，比如美颜、背景虚化、AR贴纸，你可能就需要动用WebGL了，它能利用GPU的并行计算能力，效率会高得多。-
Canvas 2D API (CPU-based):
function applyGrayscaleFilter(context, width, height) { const imageData = context.getImageData(0, 0, width, height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { const avg = (data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114); // 加权平均 data[i] = avg; data[i + 1] = avg; data[i + 2] = avg; } context.putImageData(imageData, 0, 0); } // 在 drawFrame 中调用：applyGrayscaleFilter(ctx, filterCanvas.width, filterCanvas.height); WebGL (GPU-based): WebGL的实现会复杂很多，涉及到顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）。大致流程是：创建一个纹理，将视频帧上传到纹理，然后用一个简单的矩形绘制到屏幕上，在片元着色器中对每个像素进行滤镜计算。这块儿的技术深度就上来了，不是三言两语能说清的，但性能优势是巨大的。
-
-
将处理后的流重新用于WebRTC： 如果你的目标是把带有滤镜效果的视频流发送给远端，那么
canvas.captureStream()
就是你的救星。它能把Canvas的实时内容封装成一个新的MediaStream
。let filteredStream; let peerConnection; // 假设你已经有了一个RTCPeerConnection实例 function setupFilteredStreamForWebRTC() { if (filterCanvas.captureStream) { filteredStream = filterCanvas.captureStream(25); // 25fps，可以根据需要调整 console.log('Captured filtered stream from canvas:', filteredStream); // 假设你已经通过 addTrack 添加了原始视频流 // 现在需要替换它 const senders = peerConnection.getSenders(); const videoSender = senders.find(sender => sender.track && sender.track.kind === 'video'); if (videoSender) { const newVideoTrack = filteredStream.getVideoTracks()[0]; if (newVideoTrack) { videoSender.replaceTrack(newVideoTrack) .then(() => console.log('Successfully replaced video track with filtered track.')) .catch(error => console.error('Error replacing video track:', error)); } } else { // 如果之前没有添加视频轨道，就直接添加这个新的 filteredStream.getTracks().forEach(track => peerConnection.addTrack(track, filteredStream)); console.log('Added filtered stream to peer connection.'); } } else { console.warn('canvas.captureStream() is not supported in this browser.'); } } // 在 getMediaStream 成功后，或者用户点击某个按钮后调用 setupFilteredStreamForWebRTC() // 确保 filterCanvas 已经有内容在绘制了这整个流程下来，你会发现它是一个实时的数据流转换和处理过程，对浏览器的性能和JavaScript的执行效率都有一定的要求。
为什么直接在标签上应用CSS滤镜不够用？
说实话，很多人一开始都会想到这个点，觉得CSS滤镜多方便啊，一行代码就搞定。比如
filter: grayscale(100%);，效果立竿见影。但问题是，CSS滤镜只是在视觉层面上对元素进行了修饰，它并没有真正改变视频流的像素数据。你可以把它想象成给视频加了一层“玻璃”，玻璃上有颜色或图案，但透过玻璃看到的视频本身，其原始数据一点没变。
这就意味着：
-
无法发送处理后的流： 如果你的目的是把带有滤镜效果的视频通过WebRTC发送给对方，CSS滤镜就无能为力了。因为WebRTC发送的是原始的
MediaStream
数据，它并不知道你浏览器里用CSS做了什么视觉上的改变。对方接收到的仍然是未经处理的原始视频。 -
滤镜种类和复杂性受限： CSS滤镜虽然提供了像
blur
、grayscale
、sepia
、brightness
等基本效果，但它的能力非常有限。你无法实现像素级的复杂算法，比如人脸识别后的局部美白、背景替换、AR贴纸、或是那种需要多帧信息进行计算的动态效果。这些都超出了CSS的能力范畴。 - 性能瓶颈： 即使是CSS滤镜，在某些复杂场景下也可能导致性能问题，尤其是在低端设备上。而我们通过Canvas或WebGL进行像素操作，虽然初期设置复杂，但却能更好地控制性能，尤其是WebGL能充分利用GPU，效率远超CSS。
所以，如果你只是想自己看看带滤镜的视频，CSS滤镜没问题。但一旦涉及到实时处理、像素级操作以及WebRTC传输，Canvas和WebGL就是必由之路了。
CPU与GPU滤镜处理：性能考量与技术选择
在浏览器端做实时视频滤镜，性能绝对是个绕不开的话题。这直接关系到用户体验，卡顿、掉帧是大家都不想看到的。这里主要就是CPU和GPU两种处理方式的选择，各有优劣。
CPU处理 (Canvas 2D API):
-
技术原理： 主要通过
canvas.getContext('2d')提供的getImageData()
和putImageData()
方法。getImageData()
会把Canvas上的像素数据读取到一个ImageData
对象里，这是一个Uint8ClampedArray
，里面按R、G、B、A的顺序存储着每个像素的颜色值。你可以在JavaScript里遍历这个数组，对每个像素进行计算，然后再用putImageData()
把修改后的数据写回Canvas。 -
优点：
- 上手简单： 对于熟悉JavaScript的开发者来说，Canvas 2D API非常直观，学习曲线平缓。
-
调试方便： 直接在JS里操作数组，用
console.log
就能看到数据变化，调试起来相对容易。 - 适合简单滤镜： 像灰度、反色、亮度/对比度调整这种计算量不大的滤镜，用CPU处理是完全可以的。
-
缺点：
-
性能瓶颈明显： JavaScript是单线程的，即使有Web Workers也无法完全解决像素遍历的巨大开销。当视频分辨率较高（比如1080p），或者滤镜算法比较复杂（比如卷积核计算、高斯模糊），CPU会很快达到瓶颈，导致帧率下降，画面卡顿。
getImageData
和putImageData
本身也有一定的开销。 - 不适合复杂效果： 像实时美颜、背景虚化、AR增强现实这种需要大量并行计算的场景，CPU处理几乎是不可行的。
-
性能瓶颈明显： JavaScript是单线程的，即使有Web Workers也无法完全解决像素遍历的巨大开销。当视频分辨率较高（比如1080p），或者滤镜算法比较复杂（比如卷积核计算、高斯模糊），CPU会很快达到瓶颈，导致帧率下降，画面卡顿。
GPU处理 (WebGL):
- 技术原理： WebGL允许你在浏览器中使用OpenGL ES 2.0的API，直接在GPU上进行图形渲染。它通过着色器（Shaders）来定义顶点和像素的渲染方式。你将视频帧作为纹理上传到GPU，然后通过片元着色器（Fragment Shader）对每个像素并行地执行你的滤镜算法。
-
优点：
- 性能卓越： GPU天生就是为并行计算而生，处理大量像素数据是它的强项。对于复杂滤镜和高分辨率视频，WebGL能提供远超CPU的性能，保持高帧率。
- 实现复杂效果： 美颜、背景虚化、AR、风格迁移等前沿的实时视觉效果，几乎都依赖于WebGL（或WebGPU）。
- 省电： 相比于CPU满载运行，GPU在处理图形任务时通常更高效，可能更省电。
- 缺点：
技术选择建议：
- 初学者或简单需求： 如果你只是想尝试一些基本的、计算量不大的滤镜，或者对图形学不熟悉，从Canvas 2D API开始是最好的选择。它能让你快速看到效果。
- 专业开发或复杂需求： 如果你的项目需要实现高性能、复杂的实时滤镜，或者要处理高分辨率视频，那么学习并使用WebGL是必然的选择。虽然初期投入大，但长期来看，它的能力和性能优势是不可替代的。
-
折衷方案： 有些库（如
Pixi.js
、Three.js
、Babylon.js
）在底层封装了WebGL，提供了更友好的API，可以作为进入WebGL世界的跳板。还有一些专门的视频处理库（如MediaPipe
），它们提供了预训练的模型和WebAssembly/WebGL优化，能直接实现复杂效果。
我个人觉得，如果你真想在这块儿玩出花样，WebGL是绕不过去的。虽然有点儿难，但搞懂了你会发现新世界的大门。
如何将处理后的视频流重新用于WebRTC通话？
这部分其实是整个流程的“出口”，也是WebRTC和滤镜结合的关键点。当你辛苦地在Canvas上对视频帧进行了一系列处理后，你肯定希望这些带滤镜的效果能被远端的参与者看到，或者被录制下来。这里就要用到
canvas.captureStream()这个API了。
canvas.captureStream()方法允许你从一个元素创建一个新的
MediaStream对象。这个新的
MediaStream会实时地反映Canvas上的绘制内容。你可以指定捕获的帧率，比如
canvas.captureStream(25)表示以25帧每秒的速度捕获。
具体步骤：
-
创建PeerConnection： 首先，你需要有一个
RTCPeerConnection
实例，这是WebRTC通话的核心。// 假设你已经初始化了peerConnection // let peerConnection = new RTCPeerConnection();
-
获取处理后的Canvas流： 在你的
drawFrame
循环中，确保Canvas正在实时绘制带有滤镜的视频帧。然后，调用canvas.captureStream()
来获取这个新的视频流。let filteredStream; const filterCanvas = document.getElementById('filterCanvas'); // 假设这是你的滤镜Canvas function getFilteredCanvasStream() { if (filterCanvas.captureStream) { filteredStream = filterCanvas.captureStream(25); // 捕获25帧/秒的Canvas内容 console.log('Canvas stream captured:', filteredStream); return filteredStream; } else { console.warn('Your browser does not support canvas.captureStream().'); return null; } } -
替换或添加视频轨道： 现在你有了
filteredStream
，里面包含了一个视频轨道（MediaStreamTrack
）。你需要把它添加到你的RTCPeerConnection
中。这里有两种常见情况：-
情况一：你已经发送了原始视频流，现在想替换它。 这是最常见的场景。你可能一开始就通过
getUserMedia
获取了原始摄像头流并addTrack
到了peerConnection
。现在，你需要找到发送原始视频流的RTCRtpSender
，然后用replaceTrack()
方法把旧的视频轨道替换成新的滤镜视频轨道。function replaceVideoTrackWithFilteredStream(pc, canvasStream) { const newVideoTrack = canvasStream.getVideoTracks()[0]; if (!newVideoTrack) { console.error('No video track found in canvas stream.'); return; } const senders = pc.getSenders(); const videoSender = senders.find(sender => sender.track && sender.track.kind === 'video'); if (videoSender) { // 找到了发送原始视频流的sender，替换它 videoSender.replaceTrack(newVideoTrack) .then(() => console.log('Video track replaced successfully with filtered stream.')) .catch(error => console.error('Error replacing video track:', error)); } else { // 如果没有找到（比如还没发送过视频），那就直接添加新的 pc.addTrack(newVideoTrack, canvasStream); // 注意这里第二个参数是MediaStream console.log('Added filtered video track to peer connection.'); } } // 假设 peerConnection 已经建立，并且 canvasStream 已经获取 // replaceVideoTrackWithFilteredStream(peerConnection, getFilteredCanvasStream());replaceTrack()
是一个非常优雅的API，它允许你在不重新协商（re-negotiation）SDP的情况下更换媒体轨道，这对于保持通话的流畅性非常重要。 -
情况二：你还没有发送任何视频流，现在直接发送滤镜视频流。 如果你一开始就没有添加视频轨道，那么直接用
peerConnection.addTrack(newVideoTrack, canvasStream)
就可以了。// 假设 peerConnection 已经建立 // const canvasStream = getFilteredCanvasStream(); // if (canvasStream) { // canvasStream.getTracks().forEach(track => { // peerConnection.addTrack(track, canvasStream); // }); // console.log('Added filtered stream to peer connection.'); // }
-
注意事项：
-
性能：
canvas.captureStream()
本身也会消耗一定的CPU资源。如果你的滤镜处理已经很重，再加上捕获流的开销，可能会对性能造成额外压力。确保你的滤镜处理足够高效。 -
帧率：
canvas.captureStream(fps)
中的fps
参数很重要。设置过高可能导致性能问题，设置过低则可能导致视频不流畅。根据实际情况和设备性能进行调整。 -
浏览器兼容性： 尽管
canvas.captureStream()
现在已经得到了广泛支持，但在某些老旧或特定浏览器上可能仍然存在兼容性问题，最好进行特性检测。
通过这些步骤，你就能把浏览器里精心处理过的实时视频，再次无缝地
