如何用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()

解决方案

要实现浏览器端的实时视频滤镜，大致可以分解为以下几个步骤，这中间有些细节处理起来确实需要花点心思：

1. 获取原始视频流： 首先，我们需要通过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();

   登录后复制

2. 视频流到Canvas的实时绘制： 这是滤镜处理的关键一步。我们不能直接在

   video

   登录后复制
   标签上做像素级的修改。所以，我们需要一个

   <canvas>

   登录后复制
   元素作为我们的“画板”。通过

   requestAnimationFrame

   登录后复制
   循环，我们把

   videoElement

   登录后复制
   的当前帧画面不断地绘制到

   canvas

   登录后复制
   上。

   <canvas id="filterCanvas"></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);
   }

   登录后复制

3. 滤镜处理： 这部分是核心创意所在。你可以用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）。大致流程是：创建一个纹理，将视频帧上传到纹理，然后用一个简单的矩形绘制到屏幕上，在片元着色器中对每个像素进行滤镜计算。这块儿的技术深度就上来了，不是三言两语能说清的，但性能优势是巨大的。

4. 将处理后的流重新用于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的执行效率都有一定的要求。

为什么直接在

<video>

登录后复制

标签上应用CSS滤镜不够用？

说实话，很多人一开始都会想到这个点，觉得CSS滤镜多方便啊，一行代码就搞定。比如

filter: grayscale(100%);

这就意味着：

1. 无法发送处理后的流： 如果你的目的是把带有滤镜效果的视频通过WebRTC发送给对方，CSS滤镜就无能为力了。因为WebRTC发送的是原始的

   MediaStream

   登录后复制
   数据，它并不知道你浏览器里用CSS做了什么视觉上的改变。对方接收到的仍然是未经处理的原始视频。
2. 滤镜种类和复杂性受限： CSS滤镜虽然提供了像

   blur

   登录后复制
   、

   grayscale

   登录后复制
   、

   sepia

   登录后复制
   、

   brightness

   登录后复制
   等基本效果，但它的能力非常有限。你无法实现像素级的复杂算法，比如人脸识别后的局部美白、背景替换、AR贴纸、或是那种需要多帧信息进行计算的动态效果。这些都超出了CSS的能力范畴。
3. 性能瓶颈： 即使是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):

百度智能云·曦灵

百度旗下的AI数字人平台

83

查看详情

• 技术原理： 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()

canvas.captureStream()

<canvas>

MediaStream

MediaStream

canvas.captureStream(25)

具体步骤：

1. 创建PeerConnection： 首先，你需要有一个

   RTCPeerConnection

   登录后复制
   实例，这是WebRTC通话的核心。

   // 假设你已经初始化了peerConnection
   // let peerConnection = new RTCPeerConnection();

   登录后复制

2. 获取处理后的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;
       }
   }

   登录后复制

3. 替换或添加视频轨道： 现在你有了

   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实现浏览器端的实时视频滤镜？的详细内容，更多请关注php中文网其它相关文章！