揚げログ

Karaage(krgpi)の技術開発関連のブログです

AR kit で顔面キャスアプリを作る (その2 ARFaceAnchorを理解してみる)

前回、SwiftでSocketIOをアプリに実装するところまで終わりました。

今回は、ソケットで送る内容について検討していきます。

まず大前提として、ソケットで送れるのはStringのみですので、必要な情報を適当なJSON配列にしていきたいと思います。

f:id:en0qi:20190124224051j:plain

続きを読む

AR kit で顔面キャスアプリを作る (その1 xcodeprojにsocketIOを導入)

前回(昨日)に引き続きやって行きます。

 

実装

実際キャスティングアプリとなると、配信者が何人もいて、それぞれの配信ページに多数の閲覧者がいる状況が自然な想定になります。 しかし、まずは実験ということで、配信者は1人、閲覧者が数人という状況(手持ちの端末数にも制約があるため)で動くように作っていきたいと思います。

socketIOでARAnchorデータを転送する

端末側SocketIO準備(Swift)

Carthageを使ってXcode projectにsocketIOを導入していきます。導入するライブラリはこれです。

github.com

Carthageはbrewでインストールできるので、簡単に構築できました。(普段からbrewをよく使うので)

carthageインストール手順 (as of 2019/01/24, macOS 10.14.3, Homebrew 1.9.2)

brew install carthage

これで通常は完了ですが、このように怒られる場合があります。

Linking /usr/local/Cellar/carthage/0.31.2... Error: Permission denied @ dir_s_mkdir - /usr/local/Frameworks

これはそもそも /usr/local/Frameworks が存在しないことが原因ですので、

sudo mkdir /usr/local/Frameworks

sudo chown $(whoami):admin /usr/local/Frameworks

sudo brew link carthage

で解決します。

CarthageでsocketIO-Client-Swiftを導入

cd [Xcode Projectが入ってるディレクトリ]

nano Cartfile

github "socketio/socket.io-client-swift" ~> 13.3.0

と書き保存(バージョン番号は更新されていくので、

Carthage/README.md at master · Carthage/Carthage · GitHubCarthage/README.md at master · Carthage/Carthage · GitHub

で確認してください。)

carthage update --platform ios

Xcode projectの依存関係に追加

dyld: Library not loaded のエラーが出まくって詰まったので、以下を参考に進めました。画像付きでわかりやすいです。

Step by step guide on using Carthage dependency manager

重要 同時にCarthage/Build/iOSに導入されるStarscream.frameworkも同時に追加する必要があります。

コーディング

2019/01/24現在、以下のStackOverFlowの解答に記載されているサンプルコードで動きました。 swift - Socket.io for swift4 ios - Stack Overflow

サーバー側SocketIO準備(nodeJS)

サーバー側については、同内容の分かりやすい記事がたくさんあるのと、すでにAWSにSocketIOをセットアップ済みのページを準備してあったので、飛ばします。

動作確認

f:id:en0qi:20190124144410p:plain

ひとまずString型変数をアプリからPostすることに成功しました。 次回は、ARAnchorをPostするところから始めたいと思います。

AR kit で顔面キャスアプリを作る (その0 なんで作るのか)

今回から、1つのアプリを作る過程を、0の状態から完成まで、何回かに分けて記事を投稿していきます。

今回はまだ実装には入らず、前提の確認です。ちょうど卒論に時期で、頭が卒論になってるので、見出しが論文っぽくなってますが、まあ分かりやすいのでいいとしましょう。

お題

AR kit の FaceTrackingConfigurationを使ったVR顔面キャスティングアプリを作る

ツイキャスのAnimoji版というと分かりやすい…?

iPhone Xから搭載され始めたインカメのデプスカメラ、これを使った何か面白いアプリを作ってみようと思います。ただ作ってる間に違う方向にいくことは十分ありえます。

f:id:en0qi:20190123233015j:plain
Animojiで作った自分の顔(似てない)

完成予想図を描いてみる

続きを読む