内容简介:点击阅读原文了解更多
对于 Web、iOS、Android 开发者来讲,React Native 给跨平台开发工作带来了很大的帮助。仅用 JavaScript 就可以创建运行于移动端的应用。同时,你也可以将 React Native 代码与 Native 代码结合,不论你是用 Objective C、 Java 还是用 Swift 开发。
有一位 Agora 开发者,同时也是 React Native 爱好者(Github:syanbo)采用 Agora SDK 写了一个 React Native 封装模块,可实现直播、多人语音或视频会议,当然,同时支持 Android、iOS 平台。
Github 地址: https://github.com/syanbo/react-native-agora
当他在 Agora 的交流群里发出来时,我们也是稍感意外。感谢开发者们对我们的支持。如果你也默默地做了什么新鲜尝试,并用到了 Agora SDK,欢迎私信告诉我们,我们也很乐意帮你分享给更多开发者。
另一方面,现在声网Agora SDK 已经支持 React Native,能帮助你利用 React Native 为应用增加实时音视频功能。我们之前也开源了一个 Demo, 点击「阅读原文」可以查看详细代码 ,实现了基本的视频通话功能,与 @syanbo 的有些差别。为了方便大家开发,我们 简单介绍一下,做一个 React Native 实时视频通话应用的接口调用逻辑,如果你也正在做 React Native 开发,会对你有帮助:
开发环境
首先需要你注册一个 Agora 开发者账号,并准备好 Node.js 6.9.1+开发环境。
Android 开发者还需要:
-
Android Studio 2.0+
-
编辑器,如 Sublime Text
-
Android 设备(不支持模拟器)
iOS 开发者则需要:
-
Xcode 8.0+
-
iPhone 或 iPad(不支持模拟器)
快速开始
下面我们来为应用创建 Agora React Native wrapper
注册账号,并获取一个 App ID
-
在 Agora.io 注册一个开发者账号,每个账号每个月有10000分钟的免费通话,可以满足大家日常开发与测试
-
进入 Dashboard ,选择左侧边栏的
项目->项目列表
-
复制页面中的 App ID
更新并运行 Sample App
-
打开
App.js
文件。在render()
中,将里面的 App ID 更新为你刚刚复制的 App ID。
1render() { 2 AgoraRtcEngine.createEngine('YOUR APP ID'); 3}
-
使用终端或Command Prompt,
cd
进入你的项目目录,然后输入npm install
,生成项目文件。 -
添加适当的 SDK,连接设备,然后按如下所述步骤运行项目:
Android:
-
下载 Agora Video SDK。
-
解压缩下载的 SDK 包并将
libs/agora-rtc-sdk.jar
文件复制到该android/app/libs
文件夹中。 -
然后将
libs/arm64-v8a/x86/armeabi-v7a
文件夹复制到该android/app/src/main/jniLibs
文件夹中。 -
在 Android Studio 中,打开 Android 项目文件夹并连接 Android 设备。
-
同步并运行项目。
iOS:
-
下载 Agora Video SDK。
-
解压缩下载的 SDK 包并将
libs/AograRtcEngineKit.framework
文件复制到该ios/RNapi
文件夹中。 -
打开
RNapi.xcodeproj
并连接iPhone或iPad设备。 -
应用有效的配置文件并运行该项目。
为已有 React Native 应用添加视频通话
以下要介绍的接口主要实现:
-
渲染视图
-
加入频道
-
离开频道
-
切换摄像头
-
切换 Audio Route
-
添加事件监听器
文件中的 App
类扩展 App.js
包含React Native Android/iOS 示例应用程序的相关 Agora SDK 代码。
1export default class App extends Component { 2 ... 3}
渲染视图
该 render()
方法在其 return
中生成 UI 元素。在 return
之前的代码中,根据需要来配置 Agora engine。
1render(){ 2 ... 3 return( 4 ... 5 ); 6}
在渲染之前,我们需要先创建 RTC Engine。在如下代码中填写你的 App ID。
1AgoraRtcEngine.createEngine('YOUR APP ID');
创建完成之后,启用视频与音频
1AgoraRtcEngine.enableVideo(); 2AgoraRtcEngine.enableAudio();
设置视频和频道配置文件。如下述代码中,视频被设定为宽度360、高度640,帧率为15,比特率为300:
1AgoraRtcEngine.setVideoProfileDetail(360,640,15,300); 2 AgoraRtcEngine.setChannelProfile(AgoraRtcEngine.AgoraChannelProfileCommunication);
该 return()
方法为 Sample App 显示视图。 AgoraRendererView
是用来显示音频/视频的 UI 元素。示例应用程序创建了两个 AgoraRendererView
元素,即 _localView
和 _remoteView
。
1return( 2 <View style = {styles.container}> 3 <AgoraRendererView 4 ref = {component => this._localView = component} 5 style = {{width:360,height:240}} 6 /> 7 8 <AgoraRendererView 9 ref = {component => this ._remoteView = component} 10 style = {{width:360,height:240}} 11 /> 12 13 ... 14 15 </ View> 16);
然后在 return()
添加UI按钮元素让用户能够加入频道、离开频道、切换摄像头、切换音频线路。详细代码请见「阅读原文」。
加入频道
使用 _joinChannel()
方法将用户加入特定频道。
1_joinChannel(){ 2 ... 3}
在 _joinChannel()
方法中,以下方法执行其他任务:
AgoraRtcEngine.setLocalVideoView()
设置本地视频 view。
Sample App 将本地视频 view 应用于在 render()
中创建的 _localView
UI 元素。
1AgoraRtcEngine.setLocalVideoView(this._localView,AgoraRtcEngine.AgoraVideoRenderModeFit);
AgoraRtcEngine.setVideoProfile()
将视频配置文件设置为默认的 Agora 配置文件,且不更改 orientation 属性。
1AgoraRtcEngine.setVideoProfile(AgoraRtcEngine.AgoraVideoProfileDEFAULT,false);
AgoraRtcEngine.startPreview()
启动 Agora SDK 预览,并让 AgoraRtcEngine.joinChannel()
加入频道。
1AgoraRtcEngine.startPreview(); 2AgoraRtcEngine.joinChannel(null,“rnchannel01”,“React Native for Agora RTC SDK”,0);
上述代码中 joinChannel
的参数设置是这样的:
-
token为null。加入通道后,Agora Engine将设置token为新值。
-
频道名为
rnchannel01
-
info
记录了关于频道的信息“React Native for Agora RTC SDK” -
uid
为0,这是通用用户ID值
离开频道
Sample App 应用了 _leaveChannel()
,会调用 AgoraRtcEngine.stopPreview()
和 AgoraRtcEngine.leaveChannel()
。需要注意的是, _leaveChannel()
不会自动停止预览,因此需要先调用 stopPreview()
。
1_leaveChannel(){ 2 AgoraRtcEngine.stopPreview(); 3 AgoraRtcEngine.leaveChannel(); 4}
切换相机
Sample App 中,我们通过 AgoraRtcEngine.switchCamera()
切换摄像头。
1switchCamera(){ 2 AgoraRtcEngine.switchCamera(); 3}
切换 Audio Route
调用 AgoraRtcEngine.setEnableSpeakerphone()
打开或关闭扬声器。这里需要注意由于 isSpeakerPhone
用于全局检测用户是否处于扬声器模式,所以在 setEnableSpeakerphone
后必须更改。
1_switchAudio(){ 2 AgoraRtcEngine.setEnableSpeakerphone(isSpeakerPhone); 3 isSpeakerPhone =!isSpeakerPhone; 4}
添加事件监听器
通过 agoraKitEmitter.addListener()
添加 remoteDidJoineChannelNoti
事件侦听器来检测远程用户加入频道的动作。
事件监听器的名称是 RemoteDidJoinedChannel
。触发时,它会执行以下操作:
-
将远程视频视图添加到
_remoteView
-
为用户应用远程视频视图,
notify.uid
-
保证视频内容全部显示
1remoteDidJoineChannelNoti = agoraKitEmitter.addListener( 2 'RemoteDidJoinedChannel', 3 (notify)=> { 4 AgoraRtcEngine.setRemoteVideoView(this._remoteView,notify.uid,AgoraRtcEngine.AgoraVideoRenderModeFit); 5 } 6 );
在 React Native 视图移除后,调用 remoteDidJoineChannelNoti.remove()
来移除事件侦听器。
点击
阅读原文
了解更多
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 如何使用 Qt 开发音视频通话应用
- Agora 教程 | 如何使用 Qt 开发视频通话应用
- Android端实现1对1音视频实时通话
- 利用 Agora Flutter SDK 开发多人视频通话 APP
- 从0到1搭建视频通话系统,我1天就搞定了
- WebRTC实操经验分享:如何快速构建音视频通话APP?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
B端产品经理必修课
李宽 / 电子工业出版社 / 2018-9 / 59
《B端产品经理必修课:从业务逻辑到产品构建全攻略》主要讲述了“单个产品管理流程”,以展示B 端产品经理的工作方法及B 端产品的设计方法。《B端产品经理必修课:从业务逻辑到产品构建全攻略》分为三个部分。第一部分主要讲述的是B 端产品经理的工作流程和定义(即单个产品管理流程),以及从事B 端产品经理的职业现状和规划,还包括设计B 端产品时需要了解的指导思想。第二部分是通过各个章节来讲述单个产品管理流程......一起来看看 《B端产品经理必修课》 这本书的介绍吧!