OpenCV のAR (ArUco)ライブラリをハイブリッドアプリで動かす #OpenCV #Ionic #AR

シェアする

この記事はOpenCV Advent Calendar 2017の12/17のエントリーです。

ここのところIonic3を使ってモバイルアプリを作ることが良くあります。なぜ、React NativeではなくIonicなのかは、本題ではありませんが、Ionicには非常によくできたアプリのテンプレートが多数あって、都合が良かったからです。

OpenCVには、高速軽量のARライブラリArUcoがあります。これはiPhone6ぐらいでもストレスなく動くので、Ionic3などのハイブリッドアプリで使えれば便利と思ったのですが、探しても見つけられなかったので、試しに作ってみました。

今回はiOS用のみを作ります。開発環境はMac (OSX 10.13.2)、Ionic 3.19.0、Xcode 9.2です。

OpenCV3のビルド

まず、opencv_contribを含んだiOS用OpenCVをビルドします。以下の記事を参考にしました。

opencv_contribを有効にしたopencv2.framework(for iOS)生成方法

ただし、OpenCV3.3.1ではopencv_contribに対応済みなので、ステップ3のbuild_framework.pyの差し替えは必要ありません。

今回のビルド手順は以下のようになります。

  1. 作業用のディレクトリを作ります。ここではaruco-ionic/opencv3にしました。
  2. https://github.com/opencv/opencv/releasesから最新(使いたい)バージョンのソースコードを作業用ディレクトリにダウンロードします。ここではOpenCV 3.3.1のsource codeをダウンロードし、展開します。
  3. https://github.com/opencv/opencv_contrib/releasesからopencvのバージョンに合わせたソースコードをダウンロードします。今回は3.3.1のソースコードをダウンロードし、展開します。
  4. ビルドスクリプトを実行してビルドします。
  5. ビルドが終了すると、./ios/の下にopencv2.frameworkができています。

cmakeのバージョンが新しいとステップ4でビルドエラーとなることがあります。その場合は古いバージョンを試してください。今回はcmake 3.9.4でビルドできました。

Cordova Pluginを作る

Ionic3, cordovaのpluginの作成方法については、ionic3のNative pluginを作るに書いています。これに従って作っていきます。最初にCordova Pluginを作ります。

まず、作業用のディレクトリにcordova pluginのテンプレートをgithubからクローンします。

これでカレントディレクトリにArUcoCordovaPluginというディレクトリができました。ディレクトリは以下のようになっています。

この後、*をつけたファイルを変更していきます。

package.jsonを変更

package.jsonにcordovaプラグインのパッケージ名を設定します。ここではパッケージ名をcordova-plugin-arucoにしましたので、package.jsonを以下のようにします。

plugin.xmlの変更

次にplugin.xmlを変更します。cordovaプラグインを呼び出す名前をcordova.plugins.ArUcoとします。また、ios用のソースファイルの名前を”ArUco.mm”,  “ArUco.h”とし、フレームワークとして”opencv2.framework”を指定します。さらに、カメラを使うので、NSCameraUsageDescriptionを記述します。全体で以下のようになります。

以上がプラグインの設定関係のファイルです。

plugin.jsの変更

このファイルでJavaScript (TypeScript)から呼び出すときのメソッドを定義します。今回はOpenCVのバージョンを返すメソッド openCVVersionString とArUcoをスタートするメソッド

startCameraの2つだけを定義します。いずれも引数は取らなく、コールバックを指定するのみです。

MyCordovaPlugin.m、MyCordovaPlugin.hの変更

これらのファイルがプラグインの実体のなります。ファイル名をそれぞれArUco.mm、ArUco.hに変更して、Objective-C++でOpenCVの呼び出しを記述します。

ArUco.hは以下のようになります。

ここではOpenCVが持っているカメラ機能を使うので、カメラオブジェクトの宣言とメソッドの宣言をしています。

次にArUco.mmを示します。

pluginInitializeの中でArUcoで使うマーカーのディクショナリーを設定しています。今回は簡単にするために、ディクショナリーは固定です。

openCVVersionStringメソッドではバージョン文字列をCDVPluginResultオブジェクトを使ってコールバックで返しています。

startCameraメソッドでカメラを設定し、スタートしています。openCVのカメラは以下のように画像を描画するImageViewを与えて起動すると、勝手にviewに描画してくれます。

ここでは簡単に表示させるために、以下のように、単純に現在のViewの上にカメラ画像用のViewを載せています。

OpenCVフレームワークの設定

最初にビルドしたopencv2.frameworkをArUco.mmと同じディレクトリにコピーします。

最終的なディレクトリ構成は以下の通りです。

Ionic3 Native Pluginを作る

IonicでNative Pluginとして呼び出せるように、Native Pluginのラッパーを作ります。まず、作業用ディレクトリの下にnative pluginのコードをgithubからクローンします。

この中には全てのnative pluginのコードが入っており、そのままだとビルドに時間がかかるので全部消します。

次にnative pluginのためのテンプレートファイルを生成します。

コマンドが終了すると以下のファイルができていますので、それを編集します。

このファイルにCordovaプラグインの情報、メソッドの定義を書き加えます。書き加えたファイルを示します。

Cordovaプラグインの時はコールバックで返り値を返していましたが、Ionic NativeプラグインではPromiseで返します。ここではopenCVVersionStringがこの記述だけでPromiseで値を返すようになります。startCameraは何も返さないので、返り値をvoidにしています。

ここまででOpenCV ArUcoをプラグインとして使う準備は終わりました。次は、このプラグインを試すアプリを作ります。

デモアプリを作る

まず、作業用ディレクトリにionicのアプリの雛形を生成し、先ほどのプラグインを読み込みます。

これでプラグインのインストールは終わりです。あとはファイルを編集していきます。

デモアプリのコードの作成

デモアプリのコードははsrc/pages/homeの下のhome.htmlとhome.tsに記述します。それぞれ以下のようになります。

home.html

home.ts

アプリのビルド

ios用のプラットフォームを追加してアプリのビルドを行います。アプリのトップディレクトリで以下のコマンドを実行します。

ここで一つ注意が必要です。このままXcodeでビルドすると、OpenCVのビルドでエラーとなります。OpenCVの中で使っている”NO”というマクロとiOSの標準のマクロの”NO”がぶつかるためです。いくつか回避方法は出ていますが、Ionicで使える方法の一つで、platforms/ios/ArUcoDemoAppの中にあるArUcoDemoApp-Prefix.pchに以下を書き加えます。

書き加えたファイルは次の通りです。

このファイルは、iosプラットフォームを削除すると無くなりますので、iosプラットフォームを追加するたびに変更が必要です。

最後にXcodeを立ち上げてビルドし、デバイスに転送します。

アプリの実行

アプリを起動し、ArUcoのチェスボードを写してみたところです。

終わりに

OpenCVは今時のモバイル機器で十分に動作するので、カメラやマイクの付いているモバイル機器では色々と活用できると思います。今回、iOSしか作りませんでしたが、最初に想像したより簡単にプラグイン化することができました。Androidのプラグインも難しくないと思います。

Ionic/CordovaやReact NativeなどでOpenCVが使用できると手軽にモバイルアプリに組み込むことができるようになります。

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク