💡

React+TypeScriptでWebAssembly006。今回は純粋C++。OpenCV,ArUcoマーカを生成(と検出も)してみた。

2024/01/27に公開

C++

<- React+TypeScriptでWebAssembly005
React+TypeScriptでWebAssembly007 ->

Abstract

前回で、開発環境が構築できたので、さっそくOpenCVのアプリを作ってみた。
最終的にはWebAssemblyにするものの、ひとまず純粋C++アプリで。
作るのはArUcoライブラリを使ったHelloWorld的なもの。
じゃ、はじめ!!

結論

今回の成果物はココ↓

前提

windowsでOpenCV,C++の開発環境構築済み。 [環境構築]React+TypeScriptでWebAssembly002。WindowsでOpenCV,C++,VSCode,CMake。
WebAssemblyのビルド環境も構築済み。[環境構築]Ubuntu22.04で、WebAssemblyのOpenCV,C++,CMakeの開発環境を構築してみた。
React+Typescriptの開発環境は構築済 [環境構築]WindowsにVSCode+React+TypeScriptの開発環境を構築してみた。
ベースはこれ→reacttscppwasm_tmplate。

WindowsでC++開発。

準備

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

github取得

$ cd D:\Products\React.js
$ git chttps://github.com/aaaa1597/reacttscppwasm_tmplate.git
$ ren reacttscppwasm_tmplate ReactTs-WebAsm006
$ cd ReactTs-WebAsm006/cpp

2. VSCodeでプロジェクトフォルダを開く

VSCodeの拡張機能C/C++、CMake Toolsを入れてなければ入れておく。
　　　　　　↓

C/C++: Edit Configurations(JSON)を選択
Ctrl + Shift + P -> "C/C++: Edi"まで入力と出てくる。

　　　　　　↓
c_cpp_properties.jsonが生成される。ついでに右下にビルド/デバッグ/実行ボタンも表示される。

3. CMakeの設定

Ctrl + Shift + P -> "CMake: Configure"を選択。
X86を選ぶ。(WebAssemblyは32bitなので。)

↓

4. インクルードパスを追加

ifcpp.cppに戻ると、赤波線でエラーになっている。

↓
OpenCVのインストールパスを設定。
D:\apps\opencv\opencv-4.x\build\install\include

↓
赤波線が消えている。

5. 実行

ブレークポイントを設定して、カブト虫ボタンを押す。

↓
ちょっと待つと、ブレークポイントで止まる。

↓
再開

出来た!!
準備完了。

手順

ここから、ArUcoマーカを生成をコーディングする。
とはいえ、↓ここにサンプルコードがあるので、ほぼそのまんま。

成果物はココにコミットしたので、そっち参照してもらうということで。

で、実行。

出来た!!
ちょっと分かりにくいけど、生成と検出の処理が動作している。

Pose Estimation

D:\apps\opencv\opencv_contrib-4.x\modules\aruco\samples\tutorial_camera_params.yml