【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)
        })
复制代码

 

posted @   Mr·Xu  阅读(1253)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示