正文

panoreactnativesdk来了！快速实现移动端音视频和白板

拍乐云Pano  2022-02-13  617

关键词：

前言

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以后需要动态申请。

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 开发的详细教程。

kafka快速入门---思考与实现

...典的消息引擎，它以高性能、高可用著称。那么问题来了，它是怎么做到高性能、高可用的？它的消息是以什么样的形式持久化的？既然写了磁盘&#x 查看详情

kafka快速入门---思考与实现

完全开源！快速上手ai理论及应用实战来了

大家好，好久没给大家推荐优质的机器学习GitHub开源资料了。最近逛GitHub，发现了一个非常不错的AI资料，兼顾理论和实战，非常不错！首先放上该资源的GitHub地址：https://github.com/ben1234560/AiLearning-Theory-Appl... 查看详情

完全开源！快速上手ai理论及应用实战来了

vsphere+vsan+来了！vmware混合云聚焦：原生快速迁移混合负载

编辑|宋慧出品|CSDN云计算vSphere、vSAN，从云计算兴起，就是VMware在虚拟化、分布式存储里大名鼎鼎的核心技术产品。不过随着云的发展到云原生、以及国内混合云快速发展的今天，虚拟化的领导者VMware有哪些最新的方... 查看详情

chatgpt来了，让我们快速做个ai应用(代码片段)

...新开源的模型，以及看到别人提供的示例代码。ChatGPT来了，更快的速度更低的价格我在第03讲里，已经给你看了如何通过Completion的接口，实现一个聊天机器人的功能。在那个时候，我们采用的是自己将整个对... 查看详情

全栈项目实战直播课，来了！

学相伴旅游项目全栈实战课程班旅游项目实战课程学相伴打造级企业级开发，打造Java项目实战的精品之作，针对Java开发研发，对标企业级工程师能力水平从入门到全栈开发到项目构建，系统提升开发能力针对企... 查看详情

无需数学基础，ai项目全流程开发神器来了！（附亲妈级教程）

想要应用AI技术进行产业智能化升级，又担心缺乏计算机、数学等理论基础？AI算法训练完成，优化部署上线又是一个趟不过去的大坑？别担心，今天就教大家应用一个开源项目——飞桨全流程开发工具PaddleX&#x... 查看详情

一个基于wkhtmltox实现的开箱即用的http服务，帮助服务端快速生成pdf/image

...项目需要将html转成pdf，那时候用的是dompdf/dompdf。后面又来了个需求，需要将html转成image。后来去找了下发现wkhtmltopdf既可以生成pdf又可以生成html。立马喜出望外地折腾起来。不可否认wkhtmltopdf和wkhtmltoimage可能不是一个最好的选... 查看详情

kvm系列之虚拟克隆技术

...情况下，虚拟机承载主机上不止跑一台虚拟机，那么问题来了，如何快速批量部署？难道每台都从头根据系统提示一步一步进行安装？我真会疯掉的，那有没有什么好点的办法解决？办法肯定是有的，可以通过克隆技术制作相同... 查看详情

kvm系列之虚拟克隆技术

快速幂基本模板(代码片段)

...这样，我们就可以将a^14拆成了a^8 *a^4*a^2*1。那么问题来了，如何实现呢？很简单，运用位运算，b&1==1时进行乘法运算，否则底数底数自乘达到自增的目查看详情

❤️答应粉丝的maven仓库学习笔记,今天它来了!一起来学习快速入门maven❤️(代码片段)

文章目录背景Maven第一部分1.1什么是Maven1.2仓库1.3maven环境搭建1.3.1下载1.3.2安装1.3.3配置：系统环境变量1.4Maven使用1.4.1私有仓库配置1.4.2配置镜像（第三方仓库，私服）1.5IDEA配置1.5.1IDEA配置maven1.5.2新项目配置1.5.3配... 查看详情

❤️答应粉丝的maven仓库学习笔记,今天它来了!一起来学习快速入门maven❤️(代码片段)

快速学会java面向对象三大特征(代码片段)

来了来了，我又来了！今天我们学习Java中继承与多态! 目录1.包2.继承3.多态4.重写和重载1.包的意义：在Java中我们有时需要用到大量的类，我们为了确保能对类进行分门别类的管理，我们就需要把类存储在包... 查看详情

pandas学习大礼包来了

速查表Pandas是Python的核心数据分析支持库，拥有快速、灵活、明确的数据结构，旨在简单、直观、快速地处理关系型、标记型数据，是一款强大、灵活的开源数据分析工具。但是pandas的知识点很多，需要经常看、... 查看详情

springboot项目快速实现过滤器功能

...xff08;interceptor）也有类似AOP的功能特性，那么问题来了：为什么一般说面向切面编程就是指AOP，而不是过滤器和拦截器？过滤器和拦截器在Springboot中怎么实现？这三者之间有什么区别？Springboot项目快速... 查看详情