ライブオーディオストリーミングを構築する

ライブオーディオストリーミングはますます、ライブポッドキャストやインタビューの音楽パフォーマンスをライブから使用の広い範囲で人気が高まっている.可能性は無限の一度は、リアルタイムで視聴者と魅力的ないくつかのユーザーがあります.
AGRA反応ネイティブSDKを使用してライブオーディオストリーミングを達成する簡単な方法があります.このチュートリアルでは、我々はAgoraオーディオSDKを利用することにより、複数のブロードキャスターとホストの何千人ものユーザーを持つことができるライブオーディオ放送アプリを構築するまで歩いていきます.我々は、構造、セットアップ、およびアプリケーションの実行を実行する前にダイビングにコードをダイビングします.オープンソースコードが利用可能ですhere
私たちはAgora RTC SDK for React Native 例については.v 3を使っています.2.2書き込み時.

アゴラアカウントの作成
サインアップhttps://console.agora.io/ ダッシュボードにログインします.

「プロジェクト管理」タブの下にある「プロジェクト」タブに移動し、「BlueCreate」ボタンをクリックしてプロジェクトを作成します.
プロジェクトを作成し、アプリケーションIDを取得します.(アプリケーションID +証明書を使用するように求められたときにのみ、アプリケーションIDを選択します)アプリケーションIDは、トークンを生成せずに、アプリケーションを開発している間、あなたの要求を承認するために使用されます.

Note: This guide does not implement token authentication which is recommended for all RTE apps running in production environments. For more information about token-based authentication within the Agora platform please refer to this guide: https://docs.agora.io/en/Video/token?platform=All%20Platforms

例の構造
これはアプリケーションの構造です.

.
├── android
├── components
│ └── Permission.ts
│ └── Style.ts
├── ios
├── App.tsx
├── index.js
.

アプリの実行
あなたはノードの最近のバージョンを持っている必要があります.JSとNPMのインストール;

あなたがAGORA口座をセットアップして、プロジェクトをセットアップして、アプリID(上記で議論されるように)を生成したことを確認してください.

マスターブランチからzipファイルをダウンロードして抽出します.

ランnpm install アプリケーションの依存関係をunzipディレクトリにインストールします.

移動する./App.tsx としてアプリのIDを入力してappId: YourAppIdHere 州宣言で.

あなたがIOSのために建設しているならば、ターミナルを開けて、CD IOSとポッドインストールを実行してください.

お使いのデバイスを接続し、NPXを実行するネイティブのAndroid/NPXのネイティブアプリケーションの起動IOSの反応を起動するアプリを起動します.アプリを構築し、お使いのデバイスにインストールするには数分を与えます.

したら、デバイス上の[スタート]ボタンをクリックして、モバイルデバイス上のホーム画面を参照してください.

それです.あなたは2つのデバイス間のオーディオ放送を行く必要があります.
アプリを使用するchannel-x チャネル名として.

コードにダイブする前に、いくつかの基本的な方法を取り出しましょう.

我々は、チャンネルに接続して、オーディオ呼び出しに加わるために、AGORA RTC(リアルタイム通信)SDKを使用します.

我々は、複数のユーザーがチャンネルに放送することができます.そのチャンネルの視聴者としてのすべてのユーザーは、放送局に聞くことができます.

観客は動的にブロードキャスターの役割に切り替えることができます.

AGORA RTC SDKは、各ユーザに固有のID(UID)を使用します.これらのUIDをユーザ名に関連づけるために、我々はAGORA RTM(Real Time Messaging)SDKを使用して、ユーザ名を呼び出しで他のユーザーに通知します.以下にどのようにして行うかを議論します.
コードの仕組みを見てみましょう.

アプリ.TSX
アプリ.TSXは、アプリケーションにエントリポイントになります.このファイルにすべてのコードがあります.あなたがアプリケーションを開くと、3つのボタンでユーザー名フィールドがあります:呼び出しに参加し、呼び出しを終了し、ブロードキャスターと観客の間で私たちのユーザーロールを切り替える.
< div >
< p >使用するインポート文を書くことから始めます.次に、以下を含むアプリケーション状態のインターフェイスを定義しますappId : アゴラアプリID < br/>token : チャネルに参加するトークン< br/>isHost : オーディエンスとブロードキャスターを切り替えるブール値< br/>channelName : チャネル< br/>の名前joinSucceed : 私たちがうまく接続したならば保存するブール値rtcUid : RTCチャンネル< br/>に接続するローカルユーザのUIDmyUsername : RTM < br/>にログインするローカルユーザ名usernames : リモートユーザのRTC UIDをユーザ名に関連づける辞書で、RTM < br/>を使用しますpeerIds : 他のユーザのUIDをチャネルに保存する配列
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/EkaanshArora/c64e5a423b37318d207bdc9622778907.js//>
< div >
< p >クラスベースのコンポーネントを定義します_rtcEngine 変数は、RtcEngine クラスと_rtmEngine 変数は、RtmEngine SDK関数にアクセスするためのクラスです.p >
コンストラクタでは、状態変数を設定し、Android上でオーディオを録音するリクエストを許可します.(ヘルパー関数をpermission.ts , 後述する.コンポーネントがマウントされると、initRTC and initRTM アプリケーションIDを使用してRTCとRTMエンジンを初期化する関数.コンポーネントがアンマウントされると、エンジンインスタンスを破壊します.p >
< H >

RTC初期設定
<高橋潤子>
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/EkaanshArora/cb07d1ccdcfed7532ef7825c6545c774.js//>
< div >
< br/>
我々は、Appのインスタンスを使用してエンジンのインスタンスを作成します.次は設定しますchannelProfile 放送するclientRole 我々に基づきますisHost 状態変数値.
RTCがトリガするuserJoined 我々がチャンネルに加わるとき、そして、後で結合する各々の新しいユーザーのために、各々のユーザーのためのイベントは現れます.The userOffline イベントは、ユーザーがチャネルを離れるときにトリガされます.我々は、イベントリスナーを使用して同期するpeerIds 配列p >

Note: Audience members don’t trigger the userJoined/userOffline event.

< H >

RTM初期設定
<高橋潤子>
< tt > RTMを使ってユーザ名を他のユーザ名に送信します.そして、これは私たちのユーザ名をRTC UID

と関連づける方法です
<ウル>

ユーザーがチャンネルに参加すると、すべてのチャネルメンバーにメッセージを送信しますUID:Username .

チャネルメッセージを受信すると、すべてのユーザーがキーの値のペアをユーザ名の辞書に追加します.

新しいユーザーが結合すると、チャネル上のすべてのメンバーが同じスキーマでそのユーザーにピアメッセージを送信しますUID:Username .

ピアメッセージを受信すると、我々は(キーの値ペアを辞書に追加)と我々のユーザー名を更新します.
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/EkaanshArora/f05b2b2242227d3b6d4debd5ebfbae8e.js//>
< div >
我々の計画に続いて、我々はイベント・リスナーに機能を付けて、ユーザー名をchannelMessageReceived (ブロードキャストメッセージをチャネル)messageReceived (ピアメッセージ)channelMemberJoined イベント.また、同じアプリケーションIDを使用してエンジン上のクライアントを作成します.

< ull >
< H >

機能ボタン
<高橋潤子>
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/EkaanshArora/1e5a58e6b1582319a435c52e58c00ccf.js//>
< div >
< br/>
The toggleRole 関数は状態を更新し、setClientRole 関数はstateに基づいた正しい引数を指定します.br/>
The startCall 関数はユーザ名が入力されたかどうかを調べる.それから、それはRTCチャンネルに加わります.また、RTMにログインして、チャンネルに加わり、以前に議論したように、ユーザ名のためにチャンネルメッセージを送りますbr/>
The endCall 関数はRTCチャンネルを残し、リモートユーザ辞書からユーザ名を削除するために使用されるメッセージを送信し、その後RTMから出てログを出力する.
< H >

UIのレンダリング
<高橋潤子>
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/EkaanshArora/866730eb71496b1ee0658b81fa57f02d.js//>
< div >
< br/>
我々は、機能を切り替えるには、呼び出しを開始し、終了するボタンを表示するためのレンダリング機能を定義します.機能を定義する_renderUsers それはすべての放送局と観客のリストをレンダリングします.
< H >

許可.TS
<高橋潤子>
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/EkaanshArora/bf4ad0db0fcff4d7c8b8a33517698c97.js//>
< div >
< br/>
我々は、AndroidのOSからマイクのアクセス許可を要求するためにヘルパー機能をエクスポートしている.
< H >

スタイル.TS
<高橋潤子>
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/EkaanshArora/469608265b48f286226f9285f31bf6fe.js//>
< div >
< br/>
作風.TSファイルには、コンポーネントのスタイルが含まれます.
< H >

結論
<高橋潤子>
それはライブオーディオアプリケーションを構築する方法は簡単です.AGORA SDKSを使用したアプリケーションの構築についての詳細は、Agora Video Call Quickstart Guide and Agora API Reference .

私はあなたに加わるために招待しますAgora Developer Slack community . あなたは、アゴラについての質問をすることができます#react-native-help-me さんのチャンネルp >