OpenCV.jsを使ってカメラで撮影した映像にブラーをかける際はksizeに大きな値を入れすぎないようにする 📷

medianBlur、GaussianBlur、blurを使えば簡単に画像にぼかすことができますが、それなりのFPSを出したい場合は注意が必要です。

docs.opencv.org
docs.opencv.org
docs.opencv.org

基本的にどれも使い方に大差はないのですが、今回はmedianBlurで実装してみます。

ドキュメントに書いてある通りですが、medianBlurは第3引数（ksize）に渡す数値でぼかし量を制御できます。ksizeには1より大きい奇数を入れるというルールはあり、そこだけは注意しないといけないですが、大きくぼかしたい際は大きな値を入れるだけと非常に簡単に使うことができるのが魅力です。

しかし、実際のところ、ぼかしはかなり重い処理なので、カメラで撮影している映像にリアルタイムでぼかしをかけたりする際に、ksizeに5以上の数値を入れるとFPSがかなり低下します。

僕の環境（Apple M1 Max MacBook Pro、Google Chrome）で、requestAnimationFrameで実装すると、

ksize 3 👉 76.7fps
ksize 5 👉 2.4fps
ksize 7 👉 0fps ※ おそらく計測不能

となりました。
それなりにFPSを出したいのであれば、ksizeに5以上の値を入れるのは厳しそうです。

DEMO

以上、カメラのプレビューにリアルタイムにぼかしを入れる際などにksizeに大きな値を入れるとFPSがガクッと下がるという検証でした。
ちなみにGoogle ChromeでFPSメーターを表示したい場合、ディベロッパーツールから「command」+「shift」+「p」で表示されるコマンドメニューに「FPS」と入力すると有効にできます。
こういった検証の際に非常に便利です。