Pano React Native SDK 来了!快速实现移动端音视频和白板

Posted 拍乐云Pano

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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设备(不支持模拟器)

开始接入

获取一个 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成功的回调后,调用RtcEngineKitstartAudio,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成功的回调后,调用RtcEngineKitwhiteboardEngine方法获取白板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

调用RtcEngineKitleaveChannel方法即可离开当前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 开发的详细教程。

以上是关于Pano React Native SDK 来了!快速实现移动端音视频和白板的主要内容,如果未能解决你的问题,请参考以下文章

FB SDK 错误:登录失败(react-native)

为啥 react-native 包使用原生 SDK 而不是 JS/web 版本?

在 react native 上安装 facebook SDK

哪个 Firebase javascript 包应该与 React Native 一起使用?常规的“Firebase Web SDK”还是“react-native-firebase”?

未找到用于 react-native 的 Android SDK

React-Native Spotify SDK iOS:关闭身份验证窗口