Pano React Native SDK 來了！快速實現移動端音視頻和白板

前言

React Native 是 Facebook 於2015年4月開源的跨平臺移動應用開發框架，支持iOS和安卓兩大平臺。React Native 着力於提升多平臺開發的開發效率 —— Learn once, write anywhere。背靠着巨人的肩膀出生，React Native 一路風光無限，經受住了重重考驗。至今，它仍然是移動端跨平臺開發的熱門框架之一。

拍樂雲Pano 是專業的實時通訊PaaS雲服務提供商，開發者經過集成 Pano SDK 便可在應用裏快速實現高清、穩定、易用、低時延的實時音視頻和互動白板等。當 React Native 與 Pano SDK 相碰撞，會迸發出怎樣絢爛的火花呢？

因而，Pano React Native SDK 來了！

Pano React Native SDK 是基於 Pano SDK 封裝的npm靜態庫。若是你也在使用 React Native 開發應用而且想要接入音視頻通話和互動白板，那麼本篇技術分享可能會對你有所幫助。

開始接入

獲取一個 App ID 和臨時 Token

使用開發者帳戶登錄Pano控制檯，建立應用，獲取 App ID 和臨時 Token，後面將會用到。（建立應用獲取臨時Token請參考文檔：建立第一個應用）

###在應用中集成panortc-react-native-sdk

在工程根目錄下執行如下命令添加panortc-react-native-sdk依賴:

yarn add @pano.video/panortc-react-native-sdk
複製代碼

或者

npm i --save @pano.video/panortc-react-native-sdk
複製代碼

初始化RtcEngineKit

import RtcEngineKit, {
  RtcEngineConfig,
  RtcChannelConfig,
  ChannelMode,
  ChannelService,
  ResultCode
} from '@pano.video/panortc-react-native-sdk';
...
_initEngine = async () => {
  let engineConfig = new RtcEngineConfig('YOUR APPID');
  this._engine = await RtcEngineKit.create(engineConfig);
};
複製代碼

加入頻道（joinChannel）

_joinChannel = async () => {
  let serviceFlags = new Set([
    ChannelService.Media,
    ChannelService.Whiteboard
  ]);
  let channelConfig = new RtcChannelConfig(
    ChannelMode.Meeting,
    serviceFlags,
    true,
    'USER NAME'
  );
  await this._engine?.joinChannel(
    'YOUR TOKEN',
    'CHANNEL ID',
    '123456', //number轉成的字符串
    channelConfig
  );
};
複製代碼

開啓音視頻通話

在收到joinChannel成功的回調後，調用RtcEngineKit的startAudio,startVideo方法開啓音視頻：

//localViewRef用來顯示本地視頻畫面
private localViewRef = React.createRef<RtcSurfaceView>();
...
this._engine?.addListener('onChannelJoinConfirm', (result) => {
  console.info('onChannelJoinConfirm', result);
  if (result == ResultCode.OK) {
    this._engine?.startAudio();
    this._engine?.startVideo(this.localViewRef)
  }
});
複製代碼

訂閱其餘用戶音視頻

在收到其餘用戶加會的回調後，開啓訂閱：

//remoteViewRef用來顯示訂閱視頻畫面
private remoteViewRef = React.createRef<RtcSurfaceView>();
...
this._engine?.addListener('onUserJoinIndication', (userId, userName) => {
  this._engine?.subscribeAudio(userId);
  this._engine?.subscribeVideo(userId, this.remoteViewRef);
});
複製代碼

白板

在收到joinChannel成功的回調後，調用RtcEngineKit的whiteboardEngine方法獲取白板Engine實例,而後就能夠經過白板Engine實例打開白板並進行後續一些列白板相關操做：

//whiteboardView用來顯示白板區域
private whiteboardView = React.createRef<RtcWhiteboardSurfaceView>();
...
this._engine?.addListener('onChannelJoinConfirm', (result) => {
  if (result == ResultCode.OK) {
    //獲取白板Engine實例
    this._engine?.whiteboardEngine().then((whiteboardEngine) => {
      //打開白板
      whiteboardEngine?.open(this.whiteboardView).then((result) => {
        if (result == ResultCode.OK) {
          //設置白板工具類型爲Path，設置成功後就能夠在白板上繪製路徑
          whiteboardEngine?.setToolType(WBToolType.Path)
        }
      });
    });
  }
});
複製代碼

###離開Channel 調用RtcEngineKit的leaveChannel方法便可離開當前Channel：

this._engine?.leaveChannel();
複製代碼

若是再也不須要使用RtcEngineKit，請調用destroy方法釋放資源：

this._engine?.destroy();
複製代碼

##注意事項

開啓音視頻通話須要申請麥克風和相機權限。

Android

在 AndroidManifest.xml 添加如下必要權限，部分權限在Android6.0之後須要動態申請。

<manifest>
    ...
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.BLUETOOTH" /> <!--藍牙耳機-->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    ...
</manifest>
複製代碼

iOS

打開 info.plist 文件而且添加：

• Privacy - Microphone Usage Description，而且在 Value 列中添加描述。
• Privacy - Camera Usage Description, 而且在 Value 列中添加描述。

應用能夠在後臺運行音視頻通話，前提是您開啓了後臺模式。在 Xcode 中選擇您的 app target，點擊 Capabilities 標籤，開啓 Background Modes，而且勾選 Voice over IP。

結語

React Native SDK 目前已開源，你可直接在Pano官網下載和體驗。

React Native SDK 相關連接：www.pano.video/download.ht…

關注 拍樂雲Pano，咱們將爲你們分享更多關於 RN 的開發經驗，以及基於 Pano RN SDK 開發的詳細教程。