关于ios: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 开发利用并且想要接入音视频通话和互动白板，那么本篇技术分享可能会对你有所帮忙。

拍乐云开发者账户（通过拍乐云官网注册）
React Native 0.60 及以上
iOS 9.0 及以上
Android 4.4 及以上
iOS/Android 设施（不反对模拟器）

应用开发者账户登陆 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

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 = 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();

注意事项

开启音视频通话须要申请 麦克风 和相机 权限。

在 AndroidManifest.xml 增加以下必要权限，局部权限在 Android6.0 当前须要动静申请。

关上 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 开发的具体教程。

关于ios:Pano-React-Native-SDK-来了快速实现移动端音视频和白板

筹备工作

开始接入

获取一个 App ID 和长期 Token

初始化 RtcEngineKit

退出频道（joinChannel）

开启音视频通话

订阅其余用户音视频

白板

Android

iOS

结语