前言:

  公司的产品是一款基于社交的内容聊天软件,需要集成语音通讯功能,在写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、主要功能代码:

  1. configureAgora(){
  2. var that = this;
  3. const config = {
  4. appid: "17423c8***********5cd46f89e",
  5. channelProfile: this.props.channelProfile,
  6. clientRole: this.props.clientRole,
  7. audioProfile: AudioProfileMusicHighQuality,
  8. audioScenario: AudioScenarioChatRoomGaming,
  9. }
  10.  
  11. console.log("[CONFIG]", JSON.stringify(config));
  12. console.log("[CONFIG.encoderConfig", config.videoEncoderConfig);
  13. RtcEngine.on('videoSizeChanged', (data) => {
  14. console.log("[RtcEngine] videoSizeChanged ", data)
  15. })
  16. RtcEngine.on('remoteVideoStateChanged', (data) => {
  17. console.log('[RtcEngine] `remoteVideoStateChanged`', data);
  18. })
  19. RtcEngine.on('userJoined', (data) => { //用户加入
  20.  
  21. })
  22. RtcEngine.on('userOffline', (data) => {//用户下线
  23.  
  24. })
  25. RtcEngine.on('audioVolumeIndication', (data) => {
  26. console.log(data);
  27. })
  28. RtcEngine.on('clientRoleChanged', (data) => {
  29. console.log("[RtcEngine] onClientRoleChanged", data);
  30. })
  31. RtcEngine.on('joinChannelSuccess', (data) => {
  32. console.log('[RtcEngine] onJoinChannelSuccess', data);
  33. // console.log(RtcEngine.options);
  34. RtcEngine.startPreview().then(data => {
  35. // this.setState({
  36. // joinSucceed: true,
  37. // animating: false
  38. // })
  39.  
  40. })
  41. // RtcEngine.setEnableSpeakerphone(true)
  42. // RtcEngine.setDefaultMuteAllRemoteAudioStreams(true)
  43.  
  44. global.channel = data.channel
  45. global.voiceStatus = 'join';
  46.  
  47. })
  48.  
  49. RtcEngine.init(config);
  50. RtcEngine.enableAudio()
  51. }

  2、加入频道

  1. RtcEngine.joinChannel(this.props.childTribeId,Parse.User.current().attributes.uid,"","")
  2. .then(result => {
  3.  
  4. });

  3、退出频道

  1. RtcEngine.leaveChannel((status)=>{
  2. console.log(status)
  3.  
  4. })

  4、当有人加入或退出时,播放提示音

  提示:

  1、在以下代码中filepath:为绝对路径或url,不能使用相对路径

  2、soundid是正确的,如果直接粘贴demo,会出错误(Demo中是:soundId)

  1. RtcEngine.on('userJoined', (data) => { //用户加入
  2. console.log('[RtcEngine] onUserJoined', data);
  3. let playEffectOption = {
  4. soundid: 1,
  5. filepath:'https://oops-*****.cos.ap-shanghai.myqcloud.com/in.mp3',
  6. loopcount: 0,
  7. pitch: 1,
  8. pan: 0,
  9. gain: 40,
  10. publish: false,
  11. };
  12. RtcEngine.playEffect(playEffectOption)
  13. // const {peerIds} = this.state;
  14. // if (peerIds.indexOf(data.uid) === -1) {
  15. // this.setState({
  16. // peerIds: [...peerIds, data.uid]
  17. // })
  18. // }
  19. })
  20. RtcEngine.on('userOffline', (data) => {//用户下线
  21. console.log('[RtcEngine] onUserOffline', data);
  22. let playEffectOption = {
  23. soundid: 2,
  24. filepath:'https://oops-*****.cos.ap-shanghai.myqcloud.com/in.mp3',
  25. loopcount: 0,
  26. pitch: 1,
  27. pan: 0,
  28. gain: 40,
  29. publish: false,
  30. };
  31.  
  32. RtcEngine.playEffect(playEffectOption)
  33. })

【React Native】集成声网Agora语音通讯的更多相关文章

  1. 将React Native集成至Android原生应用

    将React Native集成至Android原生应用 Android Studio 2.1 Preview 4生成的空项目 react-native 环境 0.22.2 初次编译后apk有1.1M, ...

  2. Angular团队公布路线图,并演示怎样与React Native集成

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧 ...

  3. 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结

    将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...

  4. React Native集成Redux框架讲解与应用

    学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...

  5. react native 集成react navigation报错

    集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:

  6. 基于React Native的58 APP开发实践

    React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...

  7. 移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native

    React Native使用初探 February 06 2015 Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法.该方法 ...

  8. 在Mac上搭建React Native开发环境

    概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装Node ...

  9. React Native (0.57)开发环境搭建(注意:Node不要随便更新到最新版,更新完后莫名其妙的问题一大堆)

    搭建开发环境 一.安装依赖 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. 1.首先安装 Homebrew 2.安装 Node, Watchm ...

随机推荐

  1. Web 开发工具类(3): JsonUtils

    JsonUtils 整合了一些对Json的相关操作: package com.evan.common.utils; import java.util.List; import com.fasterxm ...

  2. c++产生非常量引用的初始值必须是左值

    出现这种情况是因为调用函数的形参类型是  T&(T为某一类型),该类型与调用参数值传入不一致,比如函数中形参是int型,而传入实参是double,存在隐式类型转化,系统会自动产生临时变量tem ...

  3. 《 Java 编程思想》CH02 一切都是对象

    用引用操纵对象 尽管Java中一切都看作为对象,但是操纵的标识符实际上对象的一个"引用". String s; // 这里只是创建了一个引用,而不是一个对象 String s = ...

  4. 为什么建议使用Guid结构体做为数据库及排序时的主键

    在.net2.0中,Guid结构体表示一个全局唯一标识符,是一个在生成时就可以肯定为全世界唯一的16字节值.Guid在数据库中通常可以作为各种排序的主键.比如 public class Company ...

  5. Codeforces_714_B

    http://codeforces.com/problemset/problem/714/B 当不同大小整数有1.2个时,肯定成立,3个时,需要判断,大于等于4个,则肯定不成立. #include & ...

  6. MongoDB、Redis和Memcached介绍

    MongoDB MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非 ...

  7. Elasticsearch原理学习--为什么Elasticsearch/Lucene检索可以比MySQL快?

    转载于:http://vlambda.com/wz_wvS2uI5VRn.html 同样都可以对数据构建索引并通过索引查询数据,为什么Lucene或基于Lucene的Elasticsearch会比关系 ...

  8. 文件图片上传目录 禁止执行php

    apache配置上传目录禁止运行php的方法 导读: 禁止上传目录运行php等可执行文件可以从一定程度上增加网站的安全性, 禁止上传目录运行php的方法可以用.htaccess文件, 也可以直接在ap ...

  9. spark sql 查询hive表并写入到PG中

    import java.sql.DriverManager import java.util.Properties import com.zhaopin.tools.{DateUtils, TextU ...

  10. 对CAN signal 的一点理解

      首先每个 ECU是一个网络节点,每个网络节点可收发一些 Message,每个Message 由CAN signals构成.每个 CAN signal利用一个或多个连续的2进制位来表示承载的信息.下 ...