OpenCVをEmscriptenでwasmにビルドする!Webブラウザから呼び出す。OpenCV.js

2018-09-16
javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencvwasm
    

目次

概要

OpenCVをLLVM→EmscriptenでWebAssembly(以下、wasm)をビルドする。\n JavaScriptからOpenCVを呼び出す。

環境 使用するもの

OpenCV4.0.0(pre)

https://github.com/opencv/opencv

Emscripten

https://kripken.github.io/emscripten-site/index.html

LLVM

https://llvm.org/

OpenCV.jsの紹介

About

OpenCV.jsに関する詳細は公式でも詳しく書かれています。

https://docs.opencv.org/3.3.1/df/d0a/tutorial_js_intro.html

Introduction to OpenCV.js and Tutorials - 公式

LLVMとEmscripten

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. WebAssembly aims to execute at native speed. WebAssembly is currently being designed as an open standard by W3C.

Introduction to OpenCV.js and Tutorials\n OpenCV.js: OpenCV for the JavaScript programmer\n https://docs.opencv.org/3.3.1/df/d0a/tutorial_js_intro.html

公式から引用。

Emscriptenとは、任意のプログラミング言語に対してのコンパイラ基盤である「LLVM」から「JavaScript」へのコンパイラです。LLVMを用いて、C/C++から生成されるLLVMコードをWebブラウザから直接実行できるasm.jsまたはWasmにコンパイルします。

チュートリアル

OpenCV introduces a new set of tutorials that will guide you through various functions available in OpenCV.js. This guide is mainly focused on OpenCV 3.x version.

The purpose of OpenCV.js tutorials is to:

  1. Help with adaptability of OpenCV in web development\n
  2. Help the web community, developers and computer vision researchers to interactively access a variety of web-based OpenCV examples to help them understand specific vision algorithms.

Because OpenCV.js is able to run directly inside browser, the OpenCV.js tutorial web pages are intuitive and interactive. For example, using WebRTC API and evaluating JavaScript code would allow developers to change the parameters of CV functions and do live CV coding on web pages to see the results in real time.

Prior knowledge of JavaScript and web application development is recommended to understand this guide.

Introduction to OpenCV.js and Tutorials\n OpenCV.js Tutorials\n https://docs.opencv.org/3.3.1/df/d0a/tutorial_js_intro.html

OpenCV.jsはブラウザ内で直接実行できます。\n 例えば、WebRTCとOpenCVを組み合わせたアプリケーションを、リアルタイムで結果を見ながら実装することができるようなメリットがあるようです。

OpenCV.jsのビルド

ここではOpenCV.jsのビルド方法について紹介します。

環境のセットアップ

nodejs,python,cmakeがなどが必要となります。

# Install Python
sudo apt install python2.7

# Install node.js
sudo apt install nodejs

# Install CMake
sudo apt install cmake

Emscripten

Emscripten 導入手順

任意のディレクトリに移動しgitからcloneします。

git clone https://github.com/juj/emsdk.git
cd emsdk

emsdkコマンドを利用して最新のツールをインストールします。\n 完了したら、パスを通します。

git pull
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

実行結果がこちら。

# result
Adding directories to PATH:
PATH += /path/to/emsdk
PATH += /path/to/emsdk/clang/e1.38.12_64bit
PATH += /path/to/emsdk/node/8.9.1_64bit/bin
PATH += /path/to/emsdk/emscripten/1.38.12

Setting environment variables:
EMSDK = /path/to/emsdk
EM_CONFIG = /Users/username/.emscripten
LLVM_ROOT = /path/to/emsdk/clang/e1.38.12_64bit
EMSCRIPTEN_NATIVE_OPTIMIZER = /path/to/emsdk/clang/e1.38.12_64bit/optimizer
BINARYEN_ROOT = /path/to/emsdk/clang/e1.38.12_64bit/binaryen
EMSDK_NODE = /path/to/emsdk/node/8.9.1_64bit/bin/node
EMSCRIPTEN = /path/to/emsdk/emscripten/1.38.12

これで完了です。\n パスを通すことでshell変数にパスが格納されます。

echo ${EMSCRIPTEN}
# /path/to/emsdk/emscripten/1.38.12

OpenCVの準備

gitでopencvをcloneします。

git clone https://github.com/opencv/opencv.git

クローンが完了したらpythonからビルドスクリプトを実行します。

公式では詳しく書かれていませんでしたが、\n 自分の環境ではPython3系で実行すると転びました。なので2.7で実行しました。

cd opencv/platforms/js/
ls ./
# README.md   build_js.py

build_jsディレクトリを構築する場合

python ./build_js.py build_js

上記のコマンドは、デフォルトでasm.jsをビルドします。\n wasmバージョンを作成するには、--build_wasmオプションを追加します。

python ./build_wasm --build_wasm

そのほかにも --builddoc や --buildtestオプションなどが存在します。

python ./build_js.py build_js

正しくインストールされれば以下のようにファイルが生成されています。

ls build_wasm/bin
# opencv.js      opencv_js.js   opencv_js.wasm

テスト

上にも書いたように、--build_testオプションでテストを行うことができます。

build_js.py build_js --build_test
cd bin
npm install
node test.js

nodejsでコマンドラインからテストの結果を確認。

ブラウザからテスト結果を確認\n http://localhost:8080/tests.htmlでサーバをスタート

こんな形でビルド結果を確認することができます。\n 1件エラーがあるのが気になりますね。

終わりに

近いうちにJSでの実装に関する記事を書きたいと思います。\n 以上、よろしく

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…

JavaScriptで幅優先探索 (bfs) を実装する
bfsソースコード 前提 bfs関数 テストコード JavaScriptで幅優先探索 (bfs) を実装し簡単な最短経路の探索問題を解いてみました。 AtCoderの問題を参考にしています bfsソースコード 前提 bfs 関数の定義について 引数 table…

JavaScriptでbig-integerでできること
定数 メソッド abs add, plus and bitLength compare compareTo compareAmb divide, over divmod equals, eq greater, gt greaterOrEquals, geq…

macOSにOpenCV4をインストール
パッケージの情報 インストール 試す with Python3 macOS (MacBook Pro 2018 13 inchi)にhomebrewを用いてOpenCVをインストールする方法。 パッケージの情報 まず、brew search と brew info…

0埋め・ゼロ埋め処理 のコードJavaScript
サンプル コード 呼び出す 説明 参考 追記 JavaScriptで 0埋め / ゼロ埋め / zero埋め 処理を行うサンプルコード サンプル コード 呼び出す 説明 記事タイトルが…

順列・組み合わせ のサンプルコード JS [permutation] [combination]
順列 - permutation サンプルコード Usage 組み合わせ - combination サンプルコード Usage 順列(permutation) と 組み合わせ(combination) のサンプルコードをJavaScript…

最新の投稿

SQL整形ツールを作成した
特徴 使い方 FW/ライブラリ等 nuxt sql-formatter-plus Monaco Editor おまけ ソース SQL整形ツールを作成しました。 URLはこちらです。 SQL…

ファイルの1行目を表示 Linuxコマンド head
head コマンド例 headコマンドでファイルの 1行目もしくは指定した行数だけ表示する方法。 head 利用できるオプション コマンド例 の 1行目だけを表示 の 5行目までを表示 カレントディレクトリ以下の全てのtxtファイルの1行目を表示

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

github.io / gitlab.ioで公開されている質の高い技術ドキュメント
AWSによるクラウド入門 Pythonプログラミング入門 普通の人が資産運用で99点をとる方法とその考え方 2018年の段階で私が知らないこと github.io / gitlab.io で無料で公開されている興味深いドキュメントのmemo AWS…

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Tags

Dates

© 2020   404 motivation not found