amazon-chime-sdk でWebとReact Nativeでビデオ通話ができるアプリを作る(後編)
前編の続きです
要約
- Android/iOSともに殆どネイティブアプリを触ったことがない人が頑張った話
- Kotlin/Objective-Cデビューしながらの体験記です
- 誤記/誤解などありましたらDiscussionで教えてください🙏
- React Native 対応は結構しんどい
- 公式から RN のライブラリは出ていない - サンプル はある
- kotlin/Objective-Cの知識が必要
- ios/androidともにシミュレータだと動作に問題があるため開発には 実機が必須 となる
前提 amazon-chime-sdkとreact-native
公式からreact-nativeの対応ライブラリはでていないため、自前でネイティブモジュールをゴリゴリ書いていく必要があります。
公式から用意されたサンプルがあるため、まずはそちら読んだり動かしたりするのがオススメです。
理解のために、前編 で作ったバックエンドにaws-samples/amazon-chime-react-native-demo のデモアプリを繋いで、動作をみるなり機能を足すなり壊してみるなりする理解が捗ります。
基本的に、やること公式サンプルのHow to integrateです。
この記事ではこのREADMEに載っていない/見逃しがちなハマりポイントを、ネイティブアプリ弱々マンの視点でつらつらと書いていこうと思います。
android 編
ARMベースの命令セットアーキテクチャ上でないと動作しない
要するに、エミュレータなどでは動作しない です。
amazon-chime-sdk-androidはARMベースのABIに対応したデバイスでしか動作しません。
最近のandroidのemulatorは、x86アーキテクチャのCPU上で快適にandroidを動作させるため、x86のABIに対応したものが殆どです。一応、昔のemulatorのイメージを漁るとarm系のABIに対応したものもあるのですが、Chimeどうこう以前に動作が重すぎて、実用に耐えるものではありませんでした。 おそらくCPUレベルでの仮想化を行っているのが原因だと思います。
素直に実機を使った開発がオススメです。
あと、ARMベースじゃないCPUを使っているAndroidでは、当然実機でも動かないので、特殊な端末での用途を想定している場合は気をつけましょう。
参考
amazon-chime-android-sdkのインストール
android-sdkはmavenなどのjavaの公開リポジトリから配布がされていません。
そのため、ビルド時にgithubからバイナリソースコードをダウンロード/解凍し、フラットディレクトリリポジトリとして登録してやる必要があります。
BitriseなどのCIからアプリをリリースしている場合、CI上でこの操作を行えるシェルなりなんなりを書いてやる必要があります。
issue は立っているみたいなので今後に期待したいですね👀
参考
react-native + kotlinのビルド整備
aws-samples/amazon-chime-react-native-demo のnative moduleはkotlinで書かれているため、
移植に伴いkotlin対応をやる必要があります。
androidの公式が推奨しているやり方を各々のandroidプロジェクトに適用するので良いと思うのですが、
gradle6.1未満だと上記のやり方で追加されるpluginが動かず、逆にgradleが7以上だとそもそもreact-nativeが動かないらしいのでいい感じに調節しましょう。
gradleのバージョンなど諸々をaws-samples/amazon-chime-react-native-demoと合わせてしまうのも一つの手ですが、こちらのデモの実装はちょっと実装が古く、廃止予定のkotlin-android-extentionsなどが含まれているためあまりオススメできません。
そういえば、react-nativeとgradleのcompatibility tableってどこかにあるんですかね。。。
RNのissue commentで「rnではgradle7はまだ使えねえっす」と中の人が言っていたので使えないのは間違えないんですが。。。誰か知ってたら教えてください
参考
ios 編
iOS simulatorではカメラが使えない
そのままですが一応記載。
androidと違い、amazon-chime-sdkは正常に動作しますが、そもそもiOSのsimulatorはカメラが使えません。なので、ビデオ会議機能を開発しようとするとカメラがうまく映りません。実機を使いましょう。
amazon-chime-ios-sdkのインストール
こちらもandroidと似たような感じで、ライブラリ管理ツールに対応していません。
cocoapodsからのインストールができないわけです。
直接githubからsdkのバイナリをダウンロードし、.frameworkなり.xcframeworkなりを配置/設定してやる必要があります。
なお、.framework版で動作確認したところ、シミュレータ向けのビルドが通らなくなるため、xcode11以上を使っているなら、素直に.xcframeworkを使ってやるのが良さそうです。(chime以外の機能をメンテするのに実機が必要だと何かと面倒です)
ちなみに一応issueは立っているみたいですが、結構前から動いてないみたいです。
みんなで👍を押していきましょう。
参考
amazon-chime全体の所感
まだまだ未成熟だけど、基本的なAPIが素直で使いやすい といったところでしょうか。
WebRTC周りの処理を綺麗にwrapしてくれているのはとても体験が良いです。
android/iosのSDKも設計がシンプルで使いやすく、ネイティブアプリ初学者でも問題なく実装を進めることができました。
ライブラリ管理ツールが使えないなどのツラミはありますが、それらを帳消しにできるくらい触ってて楽しかったです。
今回の記事ではあまり触れませんでしたが、ReactのWeb componentも公式で用意されているため、React製webアプリへの統合はかなり簡単です。
あと、他の通話SaaSと比べた時の特徴として、エンタープライズレベルのもを構築するためのイニシャルコストがかなり安いと思います。
Chimeの料金 + AWSのサポートプランで、日本語商用サポート付きで導入できるのはなかなかですね。
動作もかなり安定しており、一般的なビデオ会議として使う分には特に困ることは無さそうです。
amazon-chime-sdk + react-native周りの所感
既存アプリに統合する分にはいいけど、通話専用アプリならあえてreact-nativeを使わなくてもいいかな と言ったところです。
ずっと睨めっこすることになるamazon-chime-react-native-demo ですが、あまり実装がリッチではないです。
特にネイティブのchime-sdkのイベントを拾うObserverについてはかなり実装が薄いです。
// Not implemented for demo purposes
とだけ実装がされたハンドラがたくさんあります。
最低限通話するだけなら実装する必要はないものなのですが、「イヤフォンの抜き差しを検知して音声出力先を変えたい」とか「通話音質悪化時にアラートを表示したい」とか「通話が切断された際になんかしらのイベントを発火させたい」などがあれば、結局このあたりにゴリゴリブリッジコードを書いていくことになると思います。
amazon-chime-sdk-androidのデモ やらamazon-chime-sdk-iosのデモなどを読んでみると、android/iosのAPIの勉強をしつつchimeの仕様もわかるのでオススメです。
【おまけ】キャッチアップでやったこと/使った教材まとめ
ネイティブモジュールもkotlinもObjective-Cも書いたことがない人がNative Moduleをなんとかメンテできるようになるまで読んだりしたもののまとめです。
似たような境遇の人いたら参考にどうぞ。
ネイティブアプリつよつよマンはオススメの情報源あったらむしろ教えてください。
- React Native/ Native Module周りのドキュメントを読んだ android / iOS
- Objective-CやるためにHead First Cを読んだ
- ついでに書評書いた
- Objective-Cの独自文法は、web上に転がってる基本文法のまとめ記事をパラ見した
- Kotlinについては、Javaが一応書けるのでいきなりコード読んでみた
- リファレンス片手に案外読めた(null safeなJavaだという前知識は一応あった)
- むしろgradleが思ったよりわからなかったので適宜https://docs.gradle.org で調べた
- 実装中、デバッカについて学んだ
Discussion