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

聲網Agora發表於2018-12-07
React Native

對於 Web、iOS、Android 開發者來講，React Native 給跨平臺開發工作帶來了很大的幫助。僅用 JavaScript 就可以建立執行於移動端的應用。同時，你也可以將 React Native 程式碼與 Native 程式碼結合，不論你是用 Objective C、Java 還是用 Swift 開發。

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

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

他的 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



相關文章