【React Native】集成声网Agora语音通讯
前言:
公司的产品是一款基于社交的内容聊天软件,需要集成语音通讯功能,在写iOS原生项目时,用到的就是Agora SDK,现在写React Native也直接采用了Agora的库。
集成iOS、Android的步骤:
请参考链接:https://github.com/syanbo/react-native-agora
提示:因为Agora的库有两个版本,必须采用最新版,以免有些功能不支持(笔者在集成时,当时没有注意,有不少折腾呢)
使用记录:
不知道怎么开头写的时候,参考官方Demo : https://github.com/agoraio-community/agora-rn-quickstart
1、主要功能代码:
configureAgora(){
var that = this;
const config = {
appid: "17423c8***********5cd46f89e",
channelProfile: this.props.channelProfile,
clientRole: this.props.clientRole,
audioProfile: AudioProfileMusicHighQuality,
audioScenario: AudioScenarioChatRoomGaming,
} console.log("[CONFIG]", JSON.stringify(config));
console.log("[CONFIG.encoderConfig", config.videoEncoderConfig);
RtcEngine.on('videoSizeChanged', (data) => {
console.log("[RtcEngine] videoSizeChanged ", data)
})
RtcEngine.on('remoteVideoStateChanged', (data) => {
console.log('[RtcEngine] `remoteVideoStateChanged`', data);
})
RtcEngine.on('userJoined', (data) => { //用户加入 })
RtcEngine.on('userOffline', (data) => {//用户下线 })
RtcEngine.on('audioVolumeIndication', (data) => {
console.log(data);
})
RtcEngine.on('clientRoleChanged', (data) => {
console.log("[RtcEngine] onClientRoleChanged", data);
})
RtcEngine.on('joinChannelSuccess', (data) => {
console.log('[RtcEngine] onJoinChannelSuccess', data);
// console.log(RtcEngine.options);
RtcEngine.startPreview().then(data => {
// this.setState({
// joinSucceed: true,
// animating: false
// }) })
// RtcEngine.setEnableSpeakerphone(true)
// RtcEngine.setDefaultMuteAllRemoteAudioStreams(true) global.channel = data.channel
global.voiceStatus = 'join'; }) RtcEngine.init(config);
RtcEngine.enableAudio()
}
2、加入频道
RtcEngine.joinChannel(this.props.childTribeId,Parse.User.current().attributes.uid,"","")
.then(result => { });
3、退出频道
RtcEngine.leaveChannel((status)=>{
console.log(status) })
4、当有人加入或退出时,播放提示音
提示:
1、在以下代码中filepath:为绝对路径或url,不能使用相对路径
2、soundid是正确的,如果直接粘贴demo,会出错误(Demo中是:soundId)
RtcEngine.on('userJoined', (data) => { //用户加入
console.log('[RtcEngine] onUserJoined', data);
let playEffectOption = {
soundid: 1,
filepath:'https://oops-*****.cos.ap-shanghai.myqcloud.com/in.mp3',
loopcount: 0,
pitch: 1,
pan: 0,
gain: 40,
publish: false,
};
RtcEngine.playEffect(playEffectOption)
// const {peerIds} = this.state;
// if (peerIds.indexOf(data.uid) === -1) {
// this.setState({
// peerIds: [...peerIds, data.uid]
// })
// }
})
RtcEngine.on('userOffline', (data) => {//用户下线
console.log('[RtcEngine] onUserOffline', data);
let playEffectOption = {
soundid: 2,
filepath:'https://oops-*****.cos.ap-shanghai.myqcloud.com/in.mp3',
loopcount: 0,
pitch: 1,
pan: 0,
gain: 40,
publish: false,
}; RtcEngine.playEffect(playEffectOption)
})
【React Native】集成声网Agora语音通讯的更多相关文章
- 将React Native集成至Android原生应用
将React Native集成至Android原生应用 Android Studio 2.1 Preview 4生成的空项目 react-native 环境 0.22.2 初次编译后apk有1.1M, ...
- Angular团队公布路线图,并演示怎样与React Native集成
本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧 ...
- 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结
将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...
- React Native集成Redux框架讲解与应用
学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...
- react native 集成react navigation报错
集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:
- 基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
- 移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native
React Native使用初探 February 06 2015 Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法.该方法 ...
- 在Mac上搭建React Native开发环境
概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装Node ...
- React Native (0.57)开发环境搭建(注意:Node不要随便更新到最新版,更新完后莫名其妙的问题一大堆)
搭建开发环境 一.安装依赖 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. 1.首先安装 Homebrew 2.安装 Node, Watchm ...
随机推荐
- 从头学pytorch(二十二):全连接网络dense net
DenseNet 论文传送门,这篇论文是CVPR 2017的最佳论文. resnet一文里说了,resnet是具有里程碑意义的.densenet就是受resnet的启发提出的模型. resnet中是把 ...
- 编译调试 .NET Core 5.0 Preview 并分析 Span 的实现原理
很久没有写过 .NET Core 相关的文章了,目前关店在家休息所以有些时间写一篇新的
- 实验13:VLAN/TRUNK/VTP/
实验10-1: 划分VLAN Ø 实验目的通过本实验,读者可以掌握如下技能:(1) 熟悉VLAN 的创建(2) 把交换机接口划分到特定VLAN Ø 实验拓扑 实验步骤要配置VLAN,首先要 ...
- CCNA的基础知识及要点
一.CCNA中的基础知识及要点: 2.网线的制作:568B:橙白,橙,绿白,蓝,蓝白,绿,棕白,棕 568A的排线顺序从左到右依次为:白绿.绿.白橙.蓝.白蓝.橙.白棕.棕.实验目的:初学者常为做网线 ...
- conCat()的应用
编写一个Java应用程序,从键盘读取用户输入两个字符串,并重载3个函数分别实现这两个字符串的拼接.整数相加和浮点数相加.要进行异常处理,对输入的不符合要求的字符串提示给用户: package com. ...
- 火狐的一个bug
发现这个bug是因为最近眼睛不太好,所以网页大小都是正常大小的140% 就发现火狐游览器好多网页上的输入框与按钮对不齐 测试代码 <!DOCTYPE html> <html lang ...
- MSVC下快速Unicode I/O
http://blog.kingsamchen.com/archives/863 如果需要往console输出包含非ASCII字符的宽字符串,一个比较快速的方法是使用WriteConsoleW这个AP ...
- ps-如何移动照片里的内容
1.我们用内容感知移动工具把所要移动的区域大致勾选出来. 2.然后我们将所选区域拖动(点击鼠标左键不放拖动). 3.松开鼠标 4.仿制图章工具,alt 键取样,涂抹
- Luogu P1280 尼可的任务(dp)
题意: 时间为n,有k个任务,每个任务有一个开始时间和持续时间,从第一分钟开始,如果有开始的任务就要做,问最大空闲时间 n,k<=1e5 思路: 设 dp[i]为i~n时间中最大空闲时间,vec ...
- 第一节——词向量与ELmo(转)
最近在家听贪心学院的NLP直播课.都是比较基础的内容.放到博客上作为NLP 课程的简单的梳理. 本节课程主要讲解的是词向量和Elmo.核心是Elmo,词向量是基础知识点. Elmo 是2018年提出的 ...