はじめに

本記事は 2020-01-31 の記事「agora.io Video SDK for React Native クイックスタートガイド」 の改訂版となります。

概要

agora.io では ReactNative を利用した開発が可能です。
元々はコミュニティから始まったプロジェクトですが、現在は Agora が公式にメンテナンスをしています。

agora.io の Download Center には下図のような画面が表示されますが、こちらは npm に公開している SDK パッケージへのリンクとなっています。
※ 2020-11-26 時点

SDK 自体の入手は上記リンク先で紹介されていますが、こちらはサンプルプロジェクトを含みません。もしサンプルを使って動作確認したい場合は、コミュニティに公開されているものをお使いください。

リンク: https://github.com/AgoraIO-Community/Agora-RN-Quickstart

本記事では、このサンプルを使ったアプリのビルド方法を紹介します。

ビルド方法

1.github コミュニティから Agora React Native Demo をダウンロード
2.ファイルを展開し、プロジェクトのルートフォルダへ移動
3.下記コマンドを実行し、必要なパッケージを追加

npm install

または

yarn

4.App.tsx を開き、以下の行に AppID と token を追加
※ token を使わない場合は、空文字列で代用します

5.iOS でビルドしたい場合、以下のコマンドを実行

cd ios && pod install

6.デバイスと PC とを接続し、デバイスの種類に応じて以下のコマンドを実行し、アプリを起動

• Android の場合

npx react-native run-android

• iOS の場合:

以下のコマンドを打つことで、ビルドしたアプリは iOS シミュレーター上で起動します:

npx react-native run-ios

実機にインストールしたい場合は、ReactNative の Running On Device を参考にしてください:
https://reactnative.dev/docs/running-on-device

ここまでの間に何らかのエラーが出た場合、開発環境に必要なツールが足りていない場合がありますので、ReactNative の公式サイトから開発環境のセットアップ方法をご確認ください:
https://reactnative.dev/docs/environment-setup

アプリの画面

アプリを起動し、「Start Call」を押すと「channel-x」と名前のチャンネルに接続します。
※ グラデーションの画像処理をかけている部分にカメラ映像が映ります

最後に

agora.ioに関するお問い合わせはこちらから