前言

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/getting-started/firstapp/）

在应用中集成 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/download.html#sdk

关注拍乐云Pano 的CSDN号，我们将为大家分享更多关于 RN 的开发经验，以及基于 Pano RN SDK 开发的详细教程。

Pano React Native SDK 来了！快速实现移动端音视频和白板相关推荐

如何快速实现移动端短视频功能？
在"互联网+"概念被炒的如火如荼的今天,短视频以视频短.传播快.生产流程简单.制作门槛低.参与性强等特点在互联网所有的热门的焦点中脱颖而出,出现在公众的视野里.那么如何快速实现移动 ...
Android移动端音视频的快速开发教程（五）
接 Android移动端音视频的快速开发教程(四) 3.3. 数据传输事件接口 3.3.1. 接口定义 package com.bairuitech.anychat; // 数据传输通知接口 pub ...
在抖音里怎么快速涨粉,抖音视频怎么发最容易上热门
在抖音里怎么快速涨粉,抖音视频怎么发最容易上热门新人运营抖音短视频,在试错期结束后要注意内容创作的标准化. 在抖音里怎么涨粉?抖音的形式从短视频变为直播.图片.长视频:变现形式也从广告扩展到直播.电 ...
android 音视频播放 SDK，几句代码即可实现音视频播放功能~
项目地址:wanliyang1990/wlmedia 简介:android 音视频播放 SDK,几句代码即可实现音视频播放功能~ 更多:作者提 Bug 标签: FFmpeg-Android音视 ...
快速实现移动端短视频功能？没你想得那么难！
在"互联网+"概念被炒的如火如荼的今天,短视频以视频短.传播快.生产流程简单.制作门槛低.参与性强等特点在互联网所有的热门的焦点中脱颖而出,出现在公众的视野里. ●●● 短视频推送 ...
Android移动端音视频的快速开发教程（十）
2019独角兽企业重金招聘Python工程师标准>>> 4.7. 系统设置 4.7.1. 枚举本地视频采集设备 INT EnumVideoCapture(CHAR** lpDevic ...
android 音视频教程,Android移动端音视频的快速开发教程（九）
4.6. 私聊函数 4.6.1. 更改当前的聊天模式 INT ChangeChatMode(INT ChatMode); 功能:更改本身的聊天模式(默认为公聊模式) 返回值:0表示成功,不然为出错代码 ...
快速创建React Native App
告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了. 快速创建React Native App 查看最新的React Native ...
庖丁解牛！深入剖析React Native下一代架构重构
Facebook在2018年6月官方宣布了大规模重构React Native的计划及重构路线图.目的是为了让React Native更加轻量化.更适应混合开发,接近甚至达到原生的体验.(也有可能是Re ...

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