Sendbird Callsを使用してReact Nativeビデオチャットアプリを構築する方法
最近、新しい React Native SDK をリリースしました。これにより、アプリにチャットをこれまでより簡単に追加できるようになります。このチュートリアルは不要な回避策であることに注意してください。
通話の構築を開始するには、新しいSDKと直接用のサンプル アプリをダウンロードしてください。 > およびグループ 呼び出し。 iOS および Android 用のデモ アプリをダウンロードして、Sendbird を体験することもできます。通話 – GitHub のクイックスタート コード も役立つかもしれません。追加のガイダンスについてはドキュメントを、詳細についてはブログをご覧ください。 ！ハッピーコールの構築! 📞
はじめに
この記事では、React Native アプリケーション内でSendbird 呼び出しを実装する方法を説明します。このチュートリアルを終えると、Android と iOS の両方でプッシュ通知を有効にして、別のユーザーに電話をかけたり、着信を受ける方法を学習できるようになります。
このチュートリアルでは 2 つのソリューションが取り上げられており、どちらも WebRTC 通信に WebView コンポーネントを使用します。
- リモートサーバーを使用したWebView
- ローカルサーバーを使用したWebView
リモート サーバー ソリューションは、React Native アプリ内からリンクできるため、Sendbird Calls を実装する Web アプリをすでにホストしている場合に最適です。
ローカル サーバー ソリューション (2) は、メンテナンスがより容易なソリューションであり、すべての物理ファイルが 1 つのプロジェクトまたはリポジトリの下にあるため、最も高速で使いやすい開発エクスペリエンスが得られます。
2 つのソリューションに進む前に、準備する必要のある基礎作業がいくつかあります。これらについては個別に説明します。
ステップ1: 環境設定
前提条件として、React Native アプリが必要です。セットアップを迅速に行うには、create-react-native-app を使用します。独自のアプリケーションがすでにある場合は、次の手順をコードベースに適用できます。
注: ネイティブの反応ネイティブ WebView は非推奨になりました。したがって、代わりに react-native-webview を使用する必要があります。
React Native >= 0.6.x を使用している場合は、手動でリンクする必要はありません。インストール後に ios ディレクトリで pod install を実行するだけです。古いバージョンを使用している場合は、React Native Webview の入門ドキュメントを確認してください。
次に、<WebView> をレンダリングするコンポーネントに移動します。コンポーネント (この例では <App> コンポーネント) を作成し、次のコードを挿入します。
iOS では、allowsInlineMediaPlayback プロパティと uri の ?playsinline=1 パラメータが true である必要があります。そうでない場合は、WebView コンポーネント内のビデオが全画面で表示されます。
プッシュ通知
プッシュ通知を含めたい場合は、react-native-push-notification を確認してリモートの処理方法を確認してください。プッシュ通知。 Sendbird Calls からのリモート プッシュ通知を処理するには、onRegister コールバック を実装する必要があることに注意してください。登録トークンが公開されます。 SendBirdCall.reigsterPushToken() によってそれを Sendbird サーバーに渡し、Sendbird サーバーからプッシュ通知を取得する必要があります。
SendBirdCall.reigsterPushToken() 関数は認証後に呼び出される必要があることに注意してください。
onNotification コールバックは、アプリケーションがリモート プッシュ通知を取得するたびに呼び出されます。これは、それが Sendbird メッセージであるかどうかを判断する必要があることを意味します。これらを区別するには、データ オブジェクトの sendbird_call プロパティを検索します。プロパティが設定されている場合、それは Sendbird メッセージであるため、JavaScript SDK に渡して適切に処理できます。
実装例については、RemotePushController.js ファイルを参照してください。
ポリフィル WebView
WebView がさまざまなデバイスで均一に動作するには、react-native-webrtc を使用して WebView をポリフィルする必要があります。あ>
App.js ファイル内に次のコードを追加します。
バイパス関数をできるだけ早く呼び出すことが重要です。
WebRTC が導入された WebView v37 をサポートする Android の最小バージョンは Android 5.0 (Lollipop) であることにも注意してください。 >
ログイン機能を追加する
基本認証機能の場合、アプリ ID、ユーザー ID、およびアクセス トークン (該当する場合) を追加できるテキスト入力フィールドを追加します。 App.js ファイル内に以下を追加します。
authQuery 変数には、WebView コンポーネント内でレンダリングされる Web サイトにログインするために使用されるアプリ ID、ユーザー ID、およびアクセス トークンに関するエンコードされた情報が含まれています。 authQuery がどのようにエンコードされるかを確認するには、次の手順を確認してください。
次に、状態フックとイベント リスナーを追加しましょう。
次のステップでは、WebView コンポーネントの uri フィールドにある 2 つのオプションを見ていきます。リモートサーバーを使用したWebViewから始めましょう。
ステップ2a: リモートサーバーを使用したWebView
HTML ページを提供するには、Sendbird Calls JS SDK などのパブリック リモート サーバーを準備する必要があります。このガイドでは自己ホスト型サンプルを使用します。
このリモート サーバーは、最終的に呼び出しビューに移動する HTML ページを提供する必要があります。通話ビューには <audio> が含まれている必要があります。または <ビデオ>タグには、プロパティとして autoPlay、playsInline、および場合によっては muted が必要です。コール ビューの最小形式をサンプル リポジトリで確認してください。
前に説明した設定に従って、WebView コンポーネントを使用して React Native アプリ内から Sendbird Call サンプル Web アプリをレンダリングできます。
ここで必要なのは、上記の URL を WebView のソース プロパティの uri フィールドに渡すことだけです。
ステップ2b: ローカルサーバーを使用したWebView（推奨）
あるいは、React Native アプリ プロジェクト内でいくつかのローカル ファイルをホストするローカル サーバーを起動することもできます。これにより、すべてのファイルが 1 つのプロジェクト/リポジトリに統合されるため、開発が迅速化されます。また、これを機能させるためにライブウェブサイトをホストする必要がないため、諸経費も削減されます。
まず、react-native-static-server と react-native-fs< をインストールします。 /span>をインストールします。適切な reverse-native-fs バージョン パッケージ。 React Native と Gradle のバージョンに応じて、
React Native >= 0.6.x を使用している場合、手動リンクは必要ありません。それ以外の場合は、次のコマンドを実行します。
次に、iOS に対して次のコマンドを実行します。
ローカルサーバー用のファイルを作成する
プロジェクトのルートに、assets/www という名前のディレクトリを追加します。ここにビルド アーティファクトが配置され、ローカル サーバーによってホストされます。次の手順でこのローカル サーバーを作成します。
これらのビルド アーティファクトのソースについては、SendbirdCalls というフォルダ内にこのリポジトリのクローンを作成します。 React Native プロジェクトのルート内で、次のコマンドを実行します。
したがって、プロジェクトの構造は次のようになります。
最後に、依存関係をインストールし、複製したばかりの SendbirdCalls プロジェクトをビルドします。
上記のコマンドが完了すると、<project root>/assets/www/ ディレクトリ内にビルド アーティファクトが取得されます。
iOS バンドルにファイルを追加する
まず、Xcode で iOS プロジェクトを開きます。 iOS プロジェクトは、React Native プロジェクトのルート内の ios/<ProjectName>.xcodeproj に配置する必要があります。
次に、プロジェクトの最上位ディレクトリを右クリックし、[ファイルを <ProjectName> に追加] を選択します。
次に、プロジェクトのルート内のassets/wwwディレクトリを選択します。
「追加」をクリックすると、iOS プロジェクトにバンドルされたアセットが表示されます。
Android バンドルにファイルを追加する
<project root>/android/app/build.gradle ファイル内に次の行を追加して、静的サーバーのファイルを Android アプリにバンドルします。
次に、Android Studio 内で Android ディレクトリを開くと、Android アプリにバンドルされているアセット ディレクトリが表示されるはずです。
Android でクリアテキスト トラフィックを有効にする
この手順は、localhost 上のローカル サーバーにアクセスする場合に重要です。 Android はデフォルトでローカルホストからのトラフィックを許可しません。これを有効にするには、いくつかのネットワーク セキュリティ パラメータを設定する必要があります。
これを行うには、app/src/main/res/xml に network_security_config.xml という新しいファイルを作成し、次のコードを含めます。
次に、app/src/main/AndroidManifest.xml ファイル内に次の 2 行を追加します。
ここで、デバッグ ディレクトリ (app/src/debug/res/xml) 内で上記の手順を繰り返します。
詳細については、この記事をご覧ください。
ローカルサーバーフックを作成する
このステップでは、コンポーネントがマウントされて URL を返すときにローカル静的サーバーを起動する useStaticServer フックを作成します。これにより、それを <WebView> に渡すことができます。成分。
useStaticServer フックの場合、次のようなファイル StaticServer.js を作成します。
新しい StaticServer を作成するときは、{localOnly: true} を渡すことが重要です。そうしないと、ホスティングはローカルホストで機能しません。
これまでチュートリアル全体を実行し、SendbirdCalls ディレクトリ内にこのリポジトリのクローンを作成した場合は、アイコンもコピーできます。ただし、これはこのチュートリアルの目的には必要ありません。これを行いたい場合は、アイコンをコピーする前に別のディレクトリを作成する必要があります。
このプロジェクトで使用されるアイコンの完全なリストは次のとおりです。
このローカル静的サーバーはローカルホスト上で実行されることに注意してください。サーバーがデバイスのローカル IP (192.168.10.1 など) を介してアクセスされる場合、HTTPS 接続が必要か、またはローカルホストで実行する必要があるため、Sendbird コールは正しく初期化されません。
最後に、App.js コード内に次のコード行を追加し、WebView コンポーネントのソース プロパティ内に URL 変数を渡します。
ステップ3: アプリを実行する
アプリを実行するには、プロジェクトのルートから実行するだけです。npm run android または npmターミナルで ios を実行して、実際のデバイスまたはエミュレータでアプリを実行します。
ローカル サーバーの実装に従い、Sendbird Calls リポジトリのクローンを作成した場合は、2 番目のターミナル コマンドを実行できます。 npm run watch SendbirdCalls ディレクトリ内で、Sendbird Calls Web サイトを自動的に再構築し、Android デバイスまたはエミュレータ内で実行されている React Native アプリをリロードします。
エミュレータで Android をテストしている場合は、 を実行する前にすべてのエミュレータ インスタンスを閉じていることを確認してください。 npm run android を実行しないと、メトロ サーバーがエミュレータ内のアプリから切断されます。エミュレータが実行されていない場合、React Native スクリプトはエミュレータを自動的に起動し、メトロ サーバーに正常に接続する必要があります。
マイクとカメラの使用許可を求めるプロンプトが表示される場合があります。解決するとブラウザ版と同様に通話が可能になります。
ステップ4: トラブルシューティング
iOS
- エラー「NSNumber 型の JSON 値「1」は NSString に変換できません」
a。 WebView コンポーネントから allowedReadAccessToURLs 属性を削除します。詳細については、この記事をご覧ください。 - 白い画面または HTTPS エラー
a. StaticServer から返された IP (例: 192.168.18.1) ではなく、https://localhost/ のローカル サーバーの URL にアクセスする必要があります。 ) - macOS で React-native run-ios を実行した後のエラー「ビルド エラー ドメイン=com.apple.CoreSimulator.SimError、コード=405」:
a.シミュレータ名を指定して同じコマンドを実行します。
Android
- 白い画面または HTTPS エラー
a. AndroidManifest.xml 内でクリアテキスト トラフィックを有効にする必要があります (「Android でクリアテキスト トラフィックを有効にする」手順に従ってください)。詳細については、この記事をご覧ください。を搭載したモバイル デバイス用に自動更新されます) .Android L 以降 (WebView は を必ず更新してください。 Play ストアからの Android システム WebView と Google Play サービス
b. Google Play サービスと自動更新のないエミュレータでテストする場合は、
c. [ アップデート] に Android システム WebView が表示されない場合は、デバイス設定のアプリ情報セクションからデバイスでこれを有効にする必要がある場合があります。そこからも有効にできない場合は、Android システム WebView を有効にして更新する前に、Chrome を一時的に無効にする必要がある場合があります。 - エラー「スクリプトを読み込めません。 Metro サーバーを実行しているか、バンドル「index.android.bundle」がリリースに向けて正しくパッケージ化されていることを確認してください。」
a。 npm run android を実行する前に、必ずすべてのエミュレータ インスタンスを閉じてください。エミュレータが実行されていない場合、React Native スクリプトはエミュレータを自動的に起動し、メトロ サーバーに正常に接続する必要があります - WebView が読み込まれるとエラー「net::ERR_CONNECTION_REFUSED」が表示されます
a.新しい静的サーバー (new StaticServer(PORT, path, {localOnly: true})) を作成するときは、localOnly パラメーターを true に設定する必要があります。
結論は
このチュートリアルでは、WebView を使用した React Native アプリケーションでの Sendbird Calls の実装について説明しました。これで、JavaScript の力を活用して、ユーザーが Android および iOS デバイス上のアプリで 1 対 1 通話を発信し、プッシュ通知を受信できるようにする方法がわかりました。よくやった！
高品質な WebRTC 対応の音声およびビデオ チャットにより、アプリのエンゲージメント レベルとユーザーの満足度を向上させる取り組みは順調に進んでいます。
いつものように、ご質問がございましたらコミュニティ サイトでお問い合わせください。Sendbird をご利用いただきありがとうございます。
コーディングを楽しんでください! 🖥