实时视频滤镜（Video Filter）

WebRTC 摄像头 → Rust WASM → 实时滤镜

摄像头

滤镜效果

需要摄像头权限。所有画面帧均由 WASM 处理。

📖 原理说明

打开摄像头，把每一帧画面实时交给 WASM 做滤镜处理。和「图像滤镜」用的是完全相同的 Rust 函数，只是输入从一张静态图片变成了每秒几十帧的视频流。

🧮算法原理

1 帧 ≈ 33ms30fps 下每帧的处理预算

5 种滤镜的算法与「图像滤镜」相同：灰度（BT.601 加权亮度）、反色、3×3 均值模糊、Sobel 边缘检测、方向卷积浮雕。区别在于它们必须在一帧的时间（约 33ms）内完成，才能保持画面流畅。

🔄Rust 与 JavaScript 的分工

  1. JSJS 通过 WebRTC 的 getUserMedia() 请求 320×240 的摄像头视频流，放入隐藏的 <video> 元素。
  2. JS每当有新的视频帧（requestVideoFrameCallback，不支持时退回 requestAnimationFrame），JS 把这一帧画到左侧 Canvas，再用 getImageData() 取出像素。
  3. RustJS 调用 apply_filter()，由 Rust 处理这一帧的像素。
  4. JSJS 把结果 putImageData() 到右侧 Canvas，并统计 FPS 和每帧耗时。

⚡性能要点

  • 每帧有 320 × 240 × 4 = 307,200 字节的数据要复制进 WASM、再复制出来。底部的「ms/帧」包含了这部分开销。
  • 摄像头需要安全上下文：通过 http://localhost 访问可以使用，通过局域网 IP 访问则需要 HTTPS。

源码crates/media/image-filter/src/lib.rs与图像滤镜共用www/video-filter/index.js