前言
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/...）
在应用中集成 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
...
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
...
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
...
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以后需要动态申请。
...
...
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/downlo...
关注拍乐云Pano，我们将为大家分享更多关于 RN 的开发经验，以及基于 Pano RN SDK 开发的详细教程。