如何用WebRTC实现浏览器端的实时视频滤镜？

答案：实现实时视频滤镜需通过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处理几乎是不可行的。

GPU处理 (WebGL):

技术原理： WebGL允许你在浏览器中使用OpenGL ES 2.0的API，直接在GPU上进行图形渲染。它通过着色器（Shaders）来定义顶点和像素的渲染方式。你将视频帧作为纹理上传到GPU，然后通过片元着色器（Fragment Shader）对每个像素并行地执行你的滤镜算法。优点：性能卓越： GPU天生就是为并行计算而生，处理大量像素数据是它的强项。对于复杂滤镜和高分辨率视频，WebGL能提供远超CPU的性能，保持高帧率。实现复杂效果： 美颜、背景虚化、AR、风格迁移等前沿的实时视觉效果，几乎都依赖于WebGL（或WebGPU）。省电： 相比于CPU满载运行，GPU在处理图形任务时通常更高效，可能更省电。缺点：学习曲线陡峭： WebGL涉及到图形学概念、GLSL着色器语言、矩阵变换等，对于前端开发者来说，学习门槛相对较高。调试困难： WebGL的调试工具不如JS调试那么直观，错误信息有时也比较晦涩。代码量大： 即使是一个简单的效果，WebGL的代码量也比Canvas 2D API多不少。

技术选择建议：

初学者或简单需求： 如果你只是想尝试一些基本的、计算量不大的滤镜，或者对图形学不熟悉，从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'); // 假设这是你的滤镜Canvasfunction 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()

现在已经得到了广泛支持，但在某些老旧或特定浏览器上可能仍然存在兼容性问题，最好进行特性检测。

通过这些步骤，你就能把浏览器里精心处理过的实时视频，再次无缝地

以上就是如何用WebRTC实现浏览器端的实时视频滤镜？的详细内容，更多请关注创想鸟其它相关文章！