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

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

2018-09-164 min read

目次

  1. 概要
  2. opencvjsの紹介
  3. opencvjsのビルド
  4. 終わりに

概要

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

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

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 以上、よろしく

Recommends
OpenCVをEmscriptenでwasmにビルドする!Webブラウザから呼び出す。Op...
2018-09-16
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
opencv
OpenCV.jsを動かしてみる + デモ
2019-06-22
javascript
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
JavaScriptによる画像処理と便利なライブラリ
2019-01-14
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
【Python】顔画像をPOST 、 顔検出 、 canvasで顔にお絵かき【JS】
2018-07-11
javascript
canvas
python
Fisher-Yates shuffleで配列シャッフル [js/ts/php]
2022-06-19
javascript
node.js
typescript
JavaScriptでUTF-16コードを文字列に変換
2022-06-18
javascript
node.js
[JS]乱数でランダムな整数を生成する
2022-06-18
javascript
node.js
[JS]BigIntでMathが使えない件
2022-06-12
javascript
node.js
atcoder
[AmazonSES] node.js と ejs を利用してEメールを送信する
2022-04-09
javascript
node.js
amazon%20aws
javascriptで累積和を解く
2022-02-27
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%83%9F%E3%83%B3%E3%82%B0
atcoder
NestJSアプリケーションをwebpackでBundle
2022-02-20
javascript
typescript
nestjs
homebrewでnodejsインストール&任意のバージョン利用
2021-11-30
node.js
linux
javascript
Node.js で作成した REST API を Docker化
2021-08-08
docker
node.js
javascript
JSで32ビット符号付き整数に対してのビット演算でハマった
2021-02-17
javascript
node.js
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
JSでIPアドレスがサブネットマスクで指定した範囲内にあるか判定する
2021-02-16
javascript
node.js
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
New Posts
Amazon S3 でライフサイクルポリシーを設定する
2022-06-19
amazon%20aws
amazon%20s3
AWS Certified Developer Associate に合格した
2022-01-01
amazon%20aws
%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93
Fisher-Yates shuffleで配列シャッフル [js/ts/php]
2022-06-19
javascript
node.js
typescript
JavaScriptでUTF-16コードを文字列に変換
2022-06-18
javascript
node.js
[JS]乱数でランダムな整数を生成する
2022-06-18
javascript
node.js
[JS]BigIntでMathが使えない件
2022-06-12
javascript
node.js
atcoder
AWS SAPに合格しました
2022-06-11
amazon%20aws
%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93
[AWS]DataSync/Storage Gateway/Transfer Family...
2022-05-29
amazon%20aws
[AWS CDK]ECS FargateでNestJSで作成したRESTfull APIデ...
2022-05-24
nestjs
amazon%20aws
aws%20cdk
[AWS CDK]S3 CloudFront OAI Route53 構成 で NextJ...
2022-05-23
amazon%20aws
aws%20cdk
typescript
[CDK]SNS+SQS+DynamoDBでBounceとComplaint情報を収集する...
2022-04-11
amazon%20aws
node.js
typescript
[AmazonSES] node.js と ejs を利用してEメールを送信する
2022-04-09
javascript
node.js
amazon%20aws
GatsbyからNext.jsへのサイト移行
2022-04-04
next.js
gatsby
amazon%20aws
[AWS CDK] Lambda で S3 オブジェクトを読み書きするStackの構築
2022-03-18
aws%20cdk
amazon%20aws
typescript
[AWS CDK] S3 + CloudFrontの構築とOriginAccessIden...
2022-03-09
amazon%20aws
aws%20cdk
typescript
Hot posts!
Proxy環境下でcurlを実行する
2019-12-07
linux
curl
OpenCVのMatのタイプ一覧表
2018-11-25
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
opencv
Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
2019-12-21
linux
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9
mysql
TablePlusを使ってみる。シンプルでモダンなSQLクライアントツール
2018-09-30
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9
DBクライアントツールはDBeaverをおすすめしたい
2021-03-08
oracle
mysql
sqlite
AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成
2019-06-12
amazon%20aws
linux
amazon%20s3
AtCoderで初めて色がつくまでの話(茶色) レートが中々上がらなかった原因
2018-11-25
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0
%E9%9B%91%E8%AB%87
CentOS8でEPELとPowerToolsリポジトリの有効化
2020-11-30
centos
red%20hat
EPEL
Macでターミナルからポートスキャンを行う方法。
2018-12-09
linux
mac
apple
Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する
2018-11-27
python
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
opencv
Date
▶︎
2022 年 (31)
▶︎
2021 年 (40)
▶︎
2020 年 (30)
▶︎
2019 年 (90)
▶︎
2018 年 (89)
▶︎
2017 年 (1)
Tags
javascript(96)
linux(47)
amazon%20aws(45)
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0(36)
node.js(34)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86(30)
html5(29)
php(24)
centos(24)
typescript(23)
python(22)
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0(21)
canvas(18)
mac(18)
opencv(17)
mysql(17)
%E9%9B%91%E8%AB%87(15)
wordpress(15)
atcoder(14)
docker(14)
apache(12)
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92(12)
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9(12)
amazon%20s3(12)
red%20hat(12)
ubuntu(11)
github(10)
git(10)
vue.js(10)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF(10)
css3(8)
%E5%8F%AF%E8%A6%96%E5%8C%96(8)
%E5%B0%8F%E3%83%8D%E3%82%BF(8)
mariadb(8)
aws%20cdk(8)
amazon%20lightsail(7)
react(7)
%E3%83%96%E3%83%AD%E3%82%B0(6)
cms(6)
oracle(6)
perl(6)
gitlab(6)
next.js(6)
iam(5)
amazon%20ec2(5)
%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93(5)
aws%20amplify(5)
curl(4)
webassembly(4)
ssh(4)
Author
s-yoshiki
s-yoshiki
githubzenntwitterqiita
ただの備忘録です。
JavaScript/TypeScript/node.js/React/AWS/OpenCV
※このブログの内容は個人の見解であり、所属する組織等の見解ではありません。