Help us understand the problem. What is going on with this article?

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

はじめに

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

概要

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

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

image.png

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 を使わない場合は、空文字列で代用します

app_tsx.png

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」と名前のチャンネルに接続します。
※ グラデーションの画像処理をかけている部分にカメラ映像が映ります

Screenshot_20201116-140842.png

最後に

agora.ioに関するお問い合わせはこちらから
スクリーンショット 0001-08-15 13.41.56.png

v-cube
株式会社ブイキューブのagora.io Video SDKの開発者ブログです。便利なサンプルコードや、ライブ配信やビデオ通話の初心者向けチュートリアルなどを公開しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away