如何用 React Native 開發實時音視頻應用

歡迎訪問 RTC 開發者社區，與更多實時音視頻開發者交流經驗。 

對於 Web、iOS、Android 開發者來說，React Native 給跨平臺開發工做帶來了很大的幫助。僅用 JavaScript 就能夠建立運行於移動端的應用。同時，你也能夠將 React Native 代碼與 Native 代碼結合，不論你是用 Objective C、Java 仍是用 Swift 開發。

有一位 Agora 開發者，同時也是 React Native 愛好者（Github：syanbo）採用 Agora SDK 寫了一個 React Native 封裝模塊，可實現直播、多人語音或視頻會議，固然，同時支持 Android、iOS 平臺。

他的 Github 在這裏：github.com/syanbo/reac…

當他在 Agora 的交流羣裏發出來時，咱們也是稍感意外。感謝開發者們對咱們的支持。若是你也默默地作了什麼新鮮嘗試，並用到了 Agora SDK，歡迎私信告訴咱們，咱們也很樂意幫你分享給更多開發者。

另外一方面，如今聲網Agora SDK 已經支持 React Native，能幫助你利用 React Native 爲應用增長實時音視頻功能。咱們以前也開源了一個 Demo，實現了基本的視頻通話功能，與 @syanbo 的有些差異。爲了方便你們開發，咱們簡單介紹一下，作一個 React Native 實時視頻通話應用的接口調用邏輯，若是你也正在作 React Native 開發，會對你有幫助：

開發環境

首先須要你註冊一個 Agora 開發者帳號，並準備好 Node.js 6.9.1+開發環境。

Android 開發者還須要：

• Android Studio 2.0+

• 編輯器，如 Sublime Text

• Android 設備（不支持模擬器）

iOS 開發者則須要：

• Xcode 8.0+

• iPhone 或 iPad（不支持模擬器）

快速開始

下面咱們來爲應用建立 Agora React Native wrapper

註冊帳號，並獲取一個 App ID

1. 在 Agora.io 註冊一個開發者帳號，每一個帳號每月有10000分鐘的免費通話，能夠知足你們平常開發與測試

2. 進入 Dashboard ，選擇左側邊欄的項目->項目列表

3. 複製頁面中的 App ID

更新並運行 Sample App

1. 打開 App.js 文件。在 render() 中，將裏面的 App ID 更新爲你剛剛複製的 App ID。

render() {
    AgoraRtcEngine.createEngine('YOUR APP ID');
}
複製代碼

1. 使用終端或Command Prompt，cd進入你的項目目錄，而後輸入npm install，生成項目文件。

2. 添加適當的 SDK，鏈接設備，而後按以下所述步驟運行項目：

Android：

1. 下載 Agora Video SDK。

2. 解壓縮下載的 SDK 包並將libs/agora-rtc-sdk.jar文件複製到該android/app/libs文件夾中。

3. 而後將libs/arm64-v8a/x86/armeabi-v7a文件夾複製到該android/app/src/main/jniLibs文件夾中。

4. 在 Android Studio 中，打開 Android 項目文件夾並鏈接 Android 設備。

5. 同步並運行項目。

iOS：

1. 下載 Agora Video SDK。

2. 解壓縮下載的 SDK 包並將libs/AograRtcEngineKit.framework文件複製到該ios/RNapi文件夾中。

3. 打開RNapi.xcodeproj並鏈接iPhone或iPad設備。

4. 應用有效的配置文件並運行該項目。

爲已有 React Native 應用添加視頻通話

如下要介紹的接口主要實現：

• 渲染視圖

• 加入頻道

• 離開頻道

• 切換攝像頭

• 切換 Audio Route

• 添加事件監聽器

文件中的App類擴展App.js包含React Native Android/iOS 示例應用程序的相關 Agora SDK 代碼。

export default class App extends Component {
    ...
}
複製代碼

渲染視圖

該render()方法在其return中生成 UI 元素。在return以前的代碼中，根據須要來配置 Agora engine。

render（）{ 
  ... 
  return（
    ... 
  ）; 
}
複製代碼

在渲染以前，咱們須要先建立 RTC Engine。在以下代碼中填寫你的 App ID。

AgoraRtcEngine.createEngine('YOUR APP ID');
複製代碼

建立完成以後，啓用視頻與音頻

AgoraRtcEngine.enableVideo();
AgoraRtcEngine.enableAudio();
複製代碼

設置視頻和頻道配置文件。以下述代碼中，視頻被設定爲寬度360、高度640，幀率爲15，比特率爲300：

AgoraRtcEngine.setVideoProfileDetail（360,640,15,300）; 
    AgoraRtcEngine.setChannelProfile（AgoraRtcEngine.AgoraChannelProfileCommunication）;
複製代碼

該return()方法爲 Sample App 顯示視圖。AgoraRendererView是用來顯示音頻/視頻的 UI 元素。示例應用程序建立了兩個AgoraRendererView元素，即_localView和_remoteView。

return（
     <View style = {styles.container}> 
     <AgoraRendererView 
         ref = {component => this._localView = component} 
         style = {{width：360，height：240}} 
     /> 
 
     <AgoraRendererView 
         ref = {component => this ._remoteView = component} 
        style = {{width：360，height：240}} 
    /> 

    ... 

    </ View> 
）;
複製代碼

而後在return()添加UI按鈕元素讓用戶可以加入頻道、離開頻道、切換攝像頭、切換音頻線路。詳細代碼請見文末連接。

加入頻道

使用_joinChannel()方法將用戶加入特定頻道。

_joinChannel（）{ 
    ... 
}
複製代碼

在_joinChannel()方法中，如下方法執行其餘任務：

AgoraRtcEngine.setLocalVideoView() 設置本地視頻 view。

Sample App 將本地視頻 view 應用於在render()中建立的_localViewUI 元素。

AgoraRtcEngine.setLocalVideoView（this._localView，AgoraRtcEngine.AgoraVideoRenderModeFit）;
複製代碼

AgoraRtcEngine.setVideoProfile()將視頻配置文件設置爲默認的 Agora 配置文件，且不更改 orientation 屬性。

AgoraRtcEngine.setVideoProfile（AgoraRtcEngine.AgoraVideoProfileDEFAULT，false）;
複製代碼

AgoraRtcEngine.startPreview()啓動 Agora SDK 預覽，並讓AgoraRtcEngine.joinChannel()加入頻道。

AgoraRtcEngine.startPreview（）; 
AgoraRtcEngine.joinChannel（null，「rnchannel01」，「React Native for Agora RTC SDK」，0）;
複製代碼

上述代碼中joinChannel的參數設置是這樣的：

• token爲null。加入通道後，Agora Engine將設置token爲新值。

• 頻道名爲rnchannel01

• info記錄了關於頻道的信息「React Native for Agora RTC SDK」

• uid 爲0，這是通用用戶ID值

離開頻道

Sample App 應用了_leaveChannel()，會調用 AgoraRtcEngine.stopPreview()和AgoraRtcEngine.leaveChannel()。須要注意的是，_leaveChannel()不會自動中止預覽,所以須要先調用stopPreview()。

_leaveChannel（）{ 
    AgoraRtcEngine.stopPreview（）; 
    AgoraRtcEngine.leaveChannel（）; 
}
複製代碼

切換相機

Sample App 中，咱們經過AgoraRtcEngine.switchCamera()切換攝像頭。

switchCamera（）{ 
    AgoraRtcEngine.switchCamera（）; 
}
複製代碼

切換 Audio Route

調用AgoraRtcEngine.setEnableSpeakerphone()打開或關閉揚聲器。這裏須要注意因爲isSpeakerPhone用於全局檢測用戶是否處於揚聲器模式，因此在setEnableSpeakerphone後必須更改。

_switchAudio（）{ 
    AgoraRtcEngine.setEnableSpeakerphone（isSpeakerPhone）; 
    isSpeakerPhone =！isSpeakerPhone; 
}
複製代碼

添加事件監聽器

經過agoraKitEmitter.addListener()添加remoteDidJoineChannelNoti事件偵聽器來檢測遠程用戶加入頻道的動做。

事件監聽器的名稱是RemoteDidJoinedChannel。觸發時，它會執行如下操做：

• 將遠程視頻視圖添加到_remoteView

• 爲用戶應用遠程視頻視圖，notify.uid

• 保證視頻內容所有顯示

remoteDidJoineChannelNoti = agoraKitEmitter.addListener（
    'RemoteDidJoinedChannel'，
    （notify）=> { 
        AgoraRtcEngine.setRemoteVideoView（this._remoteView，notify.uid，AgoraRtcEngine.AgoraVideoRenderModeFit）; 
    } 
  ）;
複製代碼

在 React Native 視圖移除後，調用remoteDidJoineChannelNoti.remove()來移除事件偵聽器。

以上代碼詳見 Github AgoraIO

與更多 RTC 開發者交流開發經驗，歡迎訪問 RTC 開發者社區​​​​​​​