Webブラウザで画像処理を行うOpenCV.jsを試したい.

パッと使いたいと思って調べたけど、幾らか方法があるのだろうか?

・OpenCVのC/C++からJavaScriptをビルドするOpenCV.js
https://docs.opencv.org/3.4/df/df7/tutorial_js_table_of_contents_setup.html

・npmのパッケージとしてOpenCV対応をしたnode-opencv
(どうも2年前に更新が終わっている模様.ただ今でもダウンロード数が多い気がする)
https://www.npmjs.com/package/opencv

前者が一応公式サポートっぽいので、とりあえずそっちをやってみる.
https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html

公式のサンプルはこちらにあるみたい(だいぶ揃っているので、基本的にこれだけやれば良さそう)

https://docs.opencv.org/3.4/d2/df0/tutorial_js_table_of_contents_imgproc.html

 

適当に拾ってやってみる?

多分簡単にやるには、公式の

https://docs.opencv.org/master/opencv.js

https://docs.opencv.org/3.4/opencv.js

をダウンロードしてしまえばいいのかな?

https://docs.opencv.org/master/js_face_detection_camera.html
https://docs.opencv.org/3.4/js_setup_usage.html

上記のサンプルが自分のブラウザでちゃんと動くなら、「デベロッパーツール」とかでページのソースコードを見ればアドレスを拾えると思う.

 

真面目にOpenCV.jsをローカルで用意する

EmscriptenでLLVMからJavaScriptへasm.jsかWebAssemblyの形で出力する?

Emscripten is an LLVM-to-JavaScript compiler. It takes LLVM bitcode – which can be generated from C/C++ using clang, and compiles that into asm.js or WebAssembly that can execute directly inside the web browsers. . Asm.js is a highly optimizable, low-level subset of JavaScript. Asm.js enables ahead-of-time compilation and optimization in JavaScript engine that provide near-to-native execution speed. WebAssembly is a new portable, size- and load-time-efficient binary format suitable for compilation to the web

OpenCV.jsのビルドからやるらしい.(https://docs.opencv.org/3.4/d4/da1/tutorial_js_setup.html)

基本的に上のページに沿ってやればできそう.

javascriptへの変換のためのコンパイラemscriptenを持ってくる
https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html
で、

# Get the emsdk repo (レポジトリ取得)
git clone https://github.com/juj/emsdk.git
# Enter that directory (ディレクトリ移動
cd emsdk
# Fetch the latest version of the emsdk (not needed the first time you clone)
# 最新のemsdkを取得 (上でgit cloneしているならいらない)
git pull
# Download and install the latest SDK tools.
# 最新のSDKツールをダウンロードしてインストール
./emsdk install latest
# Make the “latest” SDK “active” for the current user. (writes ~/.emscripten file)
#現在のユーザで最新のSDKを有効にする
./emsdk activate latest
# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh
#以下で値がでれば問題なし
echo ${EMSCRIPTEN}

他にはOSごとに必要な対応があるはず.まぁどれもインストールされているものな気がするけど,

OpenCVのレポジトリをgit clone して中のスクリプトを実行すると生成される.

ただ、asm版が欲しいかwebAssembly版が欲しいかはスクリプト実行時にオプション指定する.

以上でおわりみたい.

ビルドは意外と時間がかかっている気がする.

ビルドが終わると
build_js/binにファイルができる.
opencv.jsを取るべきなのかopencv_js.jsを取るべきなのかよくわからないけど、
できてるっぽい.

他サンプル味見

スムージングとか試してみたけど、よく動きますね.十分早いし.

https://docs.opencv.org/3.4/dd/d6a/tutorial_js_filtering.html

Template Matching は流石にちょっと遅いけど、多分Cでもそこそこ遅いだろうししょうがないのかな?

https://docs.opencv.org/3.4/d8/dd1/tutorial_js_template_matching.html

 

webだとサンプルが試しやすくていいっすね.

 

About the author

コメントを残す