OpenCV.jsでFace Detectionを試してみた。

こんにちは。
腰を痛めて家で療養中です。あまりにも暇なので、以前から気になっていたOpenCVについて調べてみました。 んで調べてみると、OpenCV.jsなるものがあるんですね。
「ブラウザで動くじゃん、モバイルでも動くかな?」
OpenCVの勉強をするつもりが、主目的がOpenCV.jsをモバイルブラウザで動かすことに代わってしまいました。あるあるですね。
というわけで、そんな勉強がてらOpenCVのFace Detectionをブラウザで動かしてみました。

作ったもの

こんなのです。
youtu.be

もう、どうしようもないくらいカックカクですね。
ASUS ZenfoneAR(Snapdragon 821)なのでそんなにスペック悪くないですけどねー。
PC(Lenovo X260)側だとぬるぬるなので、現時点でのスマホの限界なのでしょうね。
Web Assembly化するともうちょとましになるのかな。暇になったら対応してみよう。

あと、画像がぼやけているせいか、小さな顔は認識しませんでした。寄ると認識します。

作業手順

手順というか、参考にしたサイトの羅列です。

まずここ

qiita.com

そしてそこで紹介されているここ

OpenCV: Build OpenCV.js

emsdkのインストールはここがわかりやすかった

Developer’s Guide - WebAssembly

「./emsdk install」実行後、ものすごく時間がかかるので覚悟することw

そのあと手順通りに実行していくと、
python ./platforms/js/build_js.py build_js」
を実行した後で、opencv.jsが出来上がる。
このコマンドもものすごく時間がかかります。

できたOpencv.jsを使って、チュートリアルで一番簡単そうなのを実装してみた。

OpenCV: Changing Colorspaces

問題なく動いたので、次に本題のFace Detectionです。

OpenCV: Face Detection in Video Capture

これも問題なく動いたので、あとはHTMLとかそこいらへんをいじって全画面化しています。

まとめ

Javascriptは遅い、スマホのは特にって言われているのは知っていましたが、VRとかARとか普通に動くし問題ないんじゃ?ってどこかで思っていましたが、OpenCVを動かしてみたら、カックカクだし「あー、これはだめだぁ」って思いました。
asm.jsやWebAssemblyはこれを解決しようとがんばっているのですね。一人で納得

明らかに重い処理でなければ、ブラウザ上でOpenCVが動くということは様々な使い道があるのではと感じています。
今まで画像を扱う場合、クラウド上にファイルをそのまま送信し下処理の上AIに食わせるという流れでしたが、スマホ上で下処理および軽量化したうえで送信できるので、サーバ負荷が少なくなるでしょう。サーバ側はAI処理に集中できるので良いことだと思いました。

以上