前言

React Native 是 Facebook 于2015年4月開(kāi)源的跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)框架，支持iOS和安卓?jī)纱笃脚_(tái)。React Native 著力于提高多平臺(tái)開(kāi)發(fā)的開(kāi)發(fā)效率 —— Learn once, write anywhere。背靠著巨人的肩膀出生，React Native 一路風(fēng)光無(wú)限，經(jīng)受住了重重考驗(yàn)。至今，它仍然是移動(dòng)端跨平臺(tái)開(kāi)發(fā)的熱門(mén)框架之一。

拍樂(lè)云Pano 是專(zhuān)業(yè)的實(shí)時(shí)通信PaaS云服務(wù)提供商，開(kāi)發(fā)者通過(guò)集成 Pano SDK 即可在應(yīng)用里快速實(shí)現(xiàn)高清、穩(wěn)定、易用、低時(shí)延的實(shí)時(shí)音視頻和互動(dòng)白板等。當(dāng) React Native 與 Pano SDK 相碰撞，會(huì)迸發(fā)出怎樣絢爛的火花呢？

于是，Pano React Native SDK 來(lái)了！

Pano React Native SDK 是基于 Pano SDK 封裝的npm靜態(tài)庫(kù)。如果你也在使用 React Native 開(kāi)發(fā)應(yīng)用并且想要接入音視頻通話(huà)和互動(dòng)白板，那么本篇技術(shù)分享可能會(huì)對(duì)你有所幫助。

?

準(zhǔn)備工作

• 拍樂(lè)云開(kāi)發(fā)者賬戶(hù)（通過(guò)拍樂(lè)云官網(wǎng)注冊(cè)）
• React Native 0.60 及以上
• iOS 9.0及以上
• Android 4.4及以上
• iOS/Android設(shè)備（不支持模擬器）

開(kāi)始接入

獲取一個(gè) App ID 和臨時(shí) Token

使用開(kāi)發(fā)者賬戶(hù)登陸 Pano 控制臺(tái)，創(chuàng)建應(yīng)用，獲取 App ID 和臨時(shí) Token，后面將會(huì)用到。（創(chuàng)建應(yīng)用獲取臨時(shí) Token 請(qǐng)參考文檔：創(chuàng)建第一個(gè)應(yīng)用?https://developer.pano.video/getting-started/firstapp/）

在應(yīng)用中集成 panortc-react-native-sdk

在工程根目錄下執(zhí)行以下命令添加panortc-react-native-sdk依賴(lài):

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轉(zhuǎn)成的字符串channelConfig ); };

開(kāi)啟音視頻通話(huà)

在收到j(luò)oinChannel成功的回調(diào)后，調(diào)用RtcEngineKit的startAudio,startVideo方法開(kāi)啟音視頻：

//localViewRef用來(lái)顯示本地視頻畫(huà)面 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)} });

訂閱其他用戶(hù)音視頻

在收到其他用戶(hù)加會(huì)的回調(diào)后，開(kāi)啟訂閱：

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

白板

在收到j(luò)oinChannel成功的回調(diào)后，調(diào)用RtcEngineKit的whiteboardEngine方法獲取白板Engine實(shí)例,然后就可以通過(guò)白板Engine實(shí)例打開(kāi)白板并進(jìn)行后續(xù)一些列白板相關(guān)操作：

//whiteboardView用來(lái)顯示白板區(qū)域 private whiteboardView = React.createRef<RtcWhiteboardSurfaceView>(); ... this._engine?.addListener('onChannelJoinConfirm', (result) => {if (result == ResultCode.OK) {//獲取白板Engine實(shí)例this._engine?.whiteboardEngine().then((whiteboardEngine) => {//打開(kāi)白板whiteboardEngine?.open(this.whiteboardView).then((result) => {if (result == ResultCode.OK) {//設(shè)置白板工具類(lèi)型為Path，設(shè)置成功后就可以在白板上繪制路徑whiteboardEngine?.setToolType(WBToolType.Path)}});}); } });

離開(kāi)Channel

調(diào)用RtcEngineKit的leaveChannel方法即可離開(kāi)當(dāng)前Channel：

this._engine?.leaveChannel();

如果不再需要使用RtcEngineKit，請(qǐng)調(diào)用destroy方法釋放資源：

this._engine?.destroy();

注意事項(xiàng)

開(kāi)啟音視頻通話(huà)需要申請(qǐng)麥克風(fēng)和相機(jī)權(quán)限。

Android

在?AndroidManifest.xml?添加以下必要權(quán)限，部分權(quán)限在Android6.0以后需要?jiǎng)討B(tài)申請(qǐng)。

<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" /> <!--藍(lán)牙耳機(jī)--><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

打開(kāi)?info.plist?文件并且添加：

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

應(yīng)用可以在后臺(tái)運(yùn)行音視頻通話(huà)，前提是您開(kāi)啟了后臺(tái)模式。在 Xcode 中選擇您的 app target，點(diǎn)擊?Capabilities?標(biāo)簽，開(kāi)啟?Background Modes，并且勾選?Voice over IP。

?

結(jié)語(yǔ)

React Native SDK 目前已開(kāi)源，你可直接在Pano官網(wǎng)下載和體驗(yàn)。

React Native SDK 相關(guān)鏈接：https://www.pano.video/download.html#sdk

關(guān)注 拍樂(lè)云Pano 的CSDN號(hào)，我們將為大家分享更多關(guān)于 RN 的開(kāi)發(fā)經(jīng)驗(yàn)，以及基于 Pano RN SDK 開(kāi)發(fā)的詳細(xì)教程。

總結(jié)

以上是生活随笔為你收集整理的Pano React Native SDK 来了！快速实现移动端音视频和白板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。