More than 3 years have passed since last update.

agora.io Video SDK for React Native クイックスタートガイド (2020-11-26 改訂版)

Last updated at 2020-11-26Posted at 2020-11-26

はじめに

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

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

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

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

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 とを接続し、デバイスの種類に応じて以下のコマンドを実行し、アプリを起動

npx react-native run-android

以下のコマンドを打つことで、ビルドしたアプリは 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」と名前のチャンネルに接続します。
※ グラデーションの画像処理をかけている部分にカメラ映像が映ります