共计 3791 个字符，预计需要花费 10 分钟才能阅读完成。
前言
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<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 相干链接：https://www.pano.video/downlo…
关注拍乐云 Pano，咱们将为大家分享更多对于 RN 的开发教训，以及基于 Pano RN SDK 开发的具体教程。
