Zenn
🎉

[環境構築]React+TypeScriptでWebAssembly003。UbuntuでWebAssemblyビルド。

2024/01/18に公開
C++
OpenCV
WebAssembly
cmake
ubunu
tech

<- React+TypeScriptでWebAssembly002
                      React+TypeScriptでWebAssembly004 ->

Abstract

WebAssemblyでOpenCVってなかなか情報でてこんよね～。それでもなんとか構築できたので公開します。
環境はUbuntu22.04,WebAssembly,OpenCV,C++,CMake。

バージョン
$ opencv_version
4.9.0
$ cmake --version
cmake version 3.28.20240119-g62ca955
$ emcc --version
emcc ～略～ 3.1.52

結論

今回の成果物はココ↓
https://github.com/aaaa1597/wasmprj_template/

前提

バージョン
$ git clone https://github.com/Kitware/CMake.git
$ cd CMake && ./bootstrap && make && sudo make install
  • Webカメラを準備。(内臓カメラを使用するならそれでもOK)

用語解説 ... WebAssembly=wasm=Emscripten=emsdk=emccと思いねぇ。
ホントはそれぞれ意味あるけど、もう全部ひっくるめて、WebAssembly関連の言葉だと思えばいいかと。

単語 説明
WebAssembly ネイティブをブラウザで動かす技術のこと。
wasm WebAssemblyの短縮形。フォルダ名とかでよく出てくる。
Emscripten WebAssemblyのビルドツール。*.wasm, *.jsとかを出力する。
emsdk Emscripten SDKの短縮形。
emcc WebAssemblyビルドのコマンド。

1.Emscripten のインストール

C++をEmscriptenにビルドするのにEmscriptenが必要なんだと。
参考 : Emscripten Download and install

Emscripten のインストール
cd ~
git clone https://github.com/emscripten-core/emsdk.git # gitから取得
cd emsdk                                               # emsdk移動
git pull                                               # 最新化
./emsdk install latest                                 # インストール
./emsdk activate latest                                # make
# source ./emsdk_env.sh                                # 環境変数設定
echo 'source "/home/jun/emsdk/emsdk_env.sh"' >> $HOME/.bash_profile
 # 環境変数設定の永続化

一旦、ログアウト -> ログイン

2.OpenCVビルド

OpenCVビルド
$ mkdir ~/tmp-opencv && cd ~/tmp-opencv
$ mkdir build && cd build
$ git clone https://github.com/opencv/opencv.git --depth 1
### git clone https://github.com/opencv/opencv_contrib.git --depth 1
$ cd opencv
$ python3 ./platforms/js/build_js.py build_wasm --build_wasm --emscripten_dir=../../../emsdk/upstream/emscripten --config_only
### --cmake_option="-DOPENCV_EXTRA_MODULES_PATH=build/opencv_contrib/"
$ export OPENCV_JS_WHITELIST=~/tmp-opencv/build/opencv/platforms/js/opencv_js.config.py
$ cd build_wasm
$ emmake make -j
$ emmake sudo make install
#        ↑↑↑ sudo付けんと file cannot create directory:～のエラーになるけん。

キタ!!
もう、ここで何日ハマったことか。

3.テンプレートのソースコード一式を取得

git取得
$ cd ~
$ git clone https://github.com/aaaa1597/wasmprj_template.git
$ cd wasmprj_template/wasm

4.ソースコードをビルド

srcをビルド
$ cd ~/wasmprj_template/wasm
$ mkdir build && cd build
$ emcmake cmake ..
$ emmake make
$ mv cppmain.js ..
$ mv cppmain.wasm ..

出来た!!

ls -l
$ ls -l ~/wasmprj_template/wasm
-rw-rw-r-- 1 jun jun    618  1月 20 14:29 CMakeLists.txt
drwxrwxr-x 3 jun jun   4096  1月 20 15:52 build
-rw-rw-r-- 1 jun jun 182218  1月 20 15:52 cppmain.js   # ← これが出来た!!
-rwxrwxr-x 1 jun jun 587651  1月 20 15:52 cppmain.wasm # ← これが出来た!!
-rw-rw-r-- 1 jun jun   1936  1月 20 15:13 index.html

~/wasmprj_template/wasm配下のindex.htmlと、cppmain.jsと、cppmain.wasmを、どこかのサーバに置けば動く!!

5.Webカメラの設定(内蔵カメラならこの手順は不要)

6.サーバ起動

サーバ起動
$ cd ~/wasmprj_template/wasm
$ python3 -m http.server 8080

7.サーバにアクセス。

ブラウザから http://localhost:8080/ にアクセスする。

出来た!!
お疲れ様でした。

ものすごいハマったんだけど、答えは、OpenCV公式にあった。見とけよって。

Discussion