前言
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 开发应用并且想要接入音视频通话和互动白板，那么本篇技术分享可能会对你有所帮助。
准备工作
拍乐云开发者账户（通过拍乐云官网注册）
React Native 0.60 及以上
iOS 9.0 及以上
Android 4.4 及以上
iOS/Android 设备（不支持模拟器）
开始接入
获取一个 App ID 和临时 Token
使用开发者账户登陆 Pano 控制台，创建应用，获取 App ID 和临时 Token，后面将会用到。（创建应用获取临时 Token 请参考文档：创建第一个应用 https://developer.pano.video/getting-started/firstapp/）
在应用中集成 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方法释放资源：
注意事项
开启音视频通话需要申请麦克风和相机权限。
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 相关链接：https://www.pano.video/download.html#sdk
关注 拍乐云 Pano，我们将为大家分享更多关于 RN 的开发经验，以及基于 Pano RN SDK 开发的详细教程。
评论