如何用 React Native 开发实时音视频应用
对于 Web、iOS、Android 开发者来讲,React Native 给跨平台开发工作带来了很大的帮助。仅用 JavaScript 就可以创建运行于移动端的应用。同时,你也可以将 React Native 代码与 Native 代码结合,不论你是用 Objective C、Java 还是用 Swift 开发。
有一位声网社区的开发者,同时也是 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 开发,会对你有帮助。
目前声网官方维护的 React Native SDK 可以通过 Github 获取:https://github.com/AgoraIO/React-Native-SDK
开发环境
首先需要你注册一个 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。
render() {AgoraRtcEngine.createEngine('YOUR APP ID');
}
使用终端或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 代码。
export default class App extends Component {...
}
渲染视图
该render()
方法在其return
中生成 UI 元素。在return
之前的代码中,根据需要来配置 Agora engine。
render(){ ... return(... );
}
在渲染之前,我们需要先创建 RTC Engine。在如下代码中填写你的 App ID。
AgoraRtcEngine.createEngine('YOUR APP ID');
创建完成之后,启用视频与音频
AgoraRtcEngine.enableVideo();
AgoraRtcEngine.enableAudio();
设置视频和频道配置文件。如下述代码中,视频被设定为宽度360、高度640,帧率为15,比特率为300:
AgoraRtcEngine.setVideoProfileDetail(360,640,15,300); AgoraRtcEngine.setChannelProfile(AgoraRtcEngine.AgoraChannelProfileCommunication);
该return()
方法为 Sample App 显示视图。AgoraRendererView
是用来显示音频/视频的 UI 元素。示例应用程序创建了两个AgoraRendererView
元素,即_localView
和_remoteView
。
return(<View style = {styles.container}> <AgoraRendererView ref = {component => this._localView = component} style = {{width:360,height:240}} /> <AgoraRendererView ref = {component => this ._remoteView = component} style = {{width:360,height:240}} /> ... </ View>
);
然后在return()
添加UI按钮元素让用户能够加入频道、离开频道、切换摄像头、切换音频线路。详细代码请见文末链接。
加入频道
使用_joinChannel()
方法将用户加入特定频道。
_joinChannel(){ ...
}
在_joinChannel()
方法中,以下方法执行其他任务:
AgoraRtcEngine.setLocalVideoView()
设置本地视频 view。
Sample App 将本地视频 view 应用于在render()
中创建的_localView
UI 元素。
AgoraRtcEngine.setLocalVideoView(this._localView,AgoraRtcEngine.AgoraVideoRenderModeFit);
AgoraRtcEngine.setVideoProfile()
将视频配置文件设置为默认的 Agora 配置文件,且不更改 orientation 属性。
AgoraRtcEngine.setVideoProfile(AgoraRtcEngine.AgoraVideoProfileDEFAULT,false);
AgoraRtcEngine.startPreview()
启动 Agora SDK 预览,并让AgoraRtcEngine.joinChannel()
加入频道。
AgoraRtcEngine.startPreview();
AgoraRtcEngine.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()
。
_leaveChannel(){ AgoraRtcEngine.stopPreview(); AgoraRtcEngine.leaveChannel();
}
切换相机
Sample App 中,我们通过AgoraRtcEngine.switchCamera()
切换摄像头。
switchCamera(){ AgoraRtcEngine.switchCamera();
}
切换 Audio Route
调用AgoraRtcEngine.setEnableSpeakerphone()
打开或关闭扬声器。这里需要注意由于isSpeakerPhone
用于全局检测用户是否处于扬声器模式,所以在setEnableSpeakerphone
后必须更改。
_switchAudio(){ AgoraRtcEngine.setEnableSpeakerphone(isSpeakerPhone); isSpeakerPhone =!isSpeakerPhone;
}
添加事件监听器
通过agoraKitEmitter.addListener()
添加remoteDidJoineChannelNoti
事件侦听器来检测远程用户加入频道的动作。
事件监听器的名称是RemoteDidJoinedChannel
。触发时,它会执行以下操作:
- 将远程视频视图添加到
_remoteView
- 为用户应用远程视频视图,
notify.uid
- 保证视频内容全部显示
remoteDidJoineChannelNoti = agoraKitEmitter.addListener('RemoteDidJoinedChannel',(notify)=> { AgoraRtcEngine.setRemoteVideoView(this._remoteView,notify.uid,AgoraRtcEngine.AgoraVideoRenderModeFit); } );
在 React Native 视图移除后,调用remoteDidJoineChannelNoti.remove()
来移除事件侦听器。
以上代码详见 Github AgoraIO
与更多 RTC 开发者交流开发经验,欢迎访问 RTC 开发者社区
如何用 React Native 开发实时音视频应用相关推荐
- 聊天语音APP开发|聊天语音软件开发-实时音视频技术
聊天语音软件的开发应该是一个以视频和语音直播为核心的社交系统.对于用户来说,更好的视频和语音直播功能可以增强用户的接受感,让用户持续使用.为了方便视频和语音直播的采用体验,减少直播的延时,聊天语音软件 ...
- 实时音视频开发理论必备:如何省流量?视频高度压缩背后的预测技术
本文引用了"拍乐云Pano"的"深入浅出理解视频编解码技术"和"揭秘视频千倍压缩背后的技术原理之本文引用了"拍乐云Pano"的&q ...
- 技术福利:最全实时音视频开发要用到的开源工程汇总
[转自] https://my.oschina.net/jb2011/blog/1619628 1.前言 实时音视频的开发学习有很多可以参考的开源项目.一个实时音视频应用共包括几个环节:采集.编码.前 ...
- 福利贴:最全实时音视频开发要用到的开源工程汇总
1.前言 实时音视频的开发学习有很多可以参考的开源项目.一个实时音视频应用共包括几个环节:采集.编码.前后处理.传输.解码.缓冲.渲染等很多环节.每一个细分环节,还有更细分的技术模块.比如,前后处理环 ...
- 18个实时音视频开发中会用到开源项目
实时音视频的开发学习有很多可以参考的开源项目.一个实时音视频应用共包括几个环节:采集.编码.前后处理.传输.解码.缓冲.渲染等很多环节.每一个细分环节,还有更细分的技术模块.比如,前后处理环节有美颜. ...
- 实时音视频聊天中超低延迟架构的思考与技术实践
1.前言 从直播在线上抓娃娃,不断变化的是玩法的创新,始终不变的是对超低延迟的苛求.实时架构是超低延迟的基石,如何在信源编码.信道编码和实时传输整个链条来构建实时架构?在实时架构的基础之上,如果通过优 ...
- 从0到1 构建实时音视频引擎
最近几年,实时音视频领域越来越热,今年的疫情更是"火上浇油"了一把.网易智企旗下产品网易云信在实时音视频领域深耕多年,积累了不少实践经验.在本文里,笔者将以烹饪为比喻,深入浅出地将 ...
- 微信团队分享:微信每日亿次实时音视频聊天背后的技术解密
本文内容整理自腾讯专家研究员 & 微信视频技术负责人谷沉沉在 2017 ArchSummit 全球架构师峰会上的技术分享. 1.前言 2012 年 7 月,微信 4.2 版本首次加入了实时音视 ...
- 移动端实时音视频直播技术详解(一):开篇
移动端实时音视频直播技术详解(一):开篇 1.引言 随着互联网用户消费内容和交互方式的升级,支撑这些内容和交互方式的基础设施也正在悄悄发生变革.手机设备拍摄视频能力和网络的升级催生了大家对视频直播领域 ...
最新文章
- redis集群之REDIS CLUSTER
- 编程语言python入门要电脑什么配置能带动-要学一门编程语言,那我一定选择Python!...
- CodeForces - 1000C Covered Points Count(差分+思维)
- nginx系列之七:限流配置
- SSH(Secure Shell) 介绍一
- mysql删除选课为空的学生_MySQL一些简单的操作题
- Linq 中按照多个值进行分组(GroupBy)
- Java集合框架源码解读(5)——TreeMap
- 测试VGA12H直接写屏速度 V1.1
- iptables命令结构之匹配扩展
- 5个免费全球DEM数据源-数字高程模型
- ISACA最新白皮书助力企业了解中国《个人信息保护法》
- TJUPT 无法与服务器建立连接问题的解决方法
- 证券公司交易系统架构演进探析
- java接口对带宽的要求,常见的接口带宽分析
- 谷歌身份验证器 java demo实现 及使用中问题分析
- 荣耀4a android art,荣耀4A黑科技大揭秘,真是给工程师给跪了!!
- 【转】偷偷告诉你快速提高app下载量和安装量
- 机器人莫麟_国内机器人/机甲动画汇总——2013年
- 使用牛顿迭代法求根 一元三次方程的根
热门文章
- Springboot 项目金蝶中间件AAS-9.0启动报错 javax.persistence.Table.indexes()[Ljavax/persistence/Index 问题解决
- 地质年代及地层时序表
- git的详细用法和基础教程
- Python 3学习笔记(16):PyOpenGL之绘制螺纹
- 用 Python 解决“鸡生蛋”问题
- 这台计算机怎么磁盘清理,磁盘空间不足怎么清理?
- 【C语言】实现俄罗斯方块
- 浮点数的存储(Normalized Denormalized 特殊值)
- 斯蒂文斯理工学院计算机专业排名,斯蒂文斯理工学院:院系设置及大学排名
- ue5,ue4(虚幻5)安卓触摸