长岛冰茶丶
长岛冰茶丶
  • 发布:2020-12-25 10:47
  • 更新:2022-08-09 09:56
  • 阅读:3574

Android uni-app实现音视频通话

分类:uni-app

前言

上一篇讲解了怎么实现Android uni-app封装原生插件,这篇讲解一下,把anyRTC的RTC(音视频通讯)封装uni-app 实现音视频通话。

不了解anyRTC的小伙伴,可以点击下面链接:

开发者官网

1.效果图

先上图,后讲解!

1.1 首页

1.2 游客界面

1.3 主播界面

2.GitHub地址

uni-app demo: 点击下载

3.demo下载:

下载地址:点击下载

扫码下载:

4.代码

4.1 集成插件

const RtcModule = uni.requireNativePlugin('AR-RtcModule');
  • AR-RtcModule:插件名称,首页集成插件

4.2 初始事件回调

//callback 接收  
callbackFn() {  
    RtcModule.setCallBack((res) => {  
        switch (res.engineEvent) {  
            case "onWarning":  
                this.promptFn("warn", res.warningCode);  
                break;  
            case "onError":  
                res.errorCode != 18 ? this.promptFn("error", res.errorCode) : '';  
                break;  
            case "onJoinChannelSuccess": //用户加入成功  
                uni.hideLoading();  
                this.role == 1 ? this.PeerVideoUser.push(res.uid) : "";  
                this.videoShow = true;  
                setTimeout(() => {  
                    // this.videoShowBg = false;  
                    this.promptText = ""  
                    //扬声器  
                    RtcModule.setEnableSpeakerphone({  
                        "enabled": true  
                    }, (res) => {})  
                    setTimeout(() => {  
                        // 启用视频模块。  
                        this.role == 1 ? this.setupLocalVideoFn() : RtcModule.enableVideo((res) => {});  
                    }, 200)  
                }, 2000)  
                break;  
            case "onLeaveChannel": //离开频道回调  
                setTimeout(() => {  
                    this.closeAll()  
                }, 500)  
                break;  
            case "onUserJoined": //远端用户加入当前频道回调。  
                // this.promptFn("info", "远端用户加入当前频道回调");  
                this.PeerVideoUser.push(res.uid);  
                break;  
            case "onUserOffline": //远端用户离开当前频道回调。  
                this.PeerVideoUser = this.PeerVideoUser.filter((x) => x !== res.uid);  
                break;  

            case "onFirstLocalAudioFrame": //已发送本地音频首帧的回调。(页面上添加音频)  
                break;  
            case "onFirstLocalVideoFrame": //已显示本地视频首帧的回调。(页面添加本地视频)  
                // this.promptFn("error", "已显示本地视频首帧的回调");  
                break;  
            case "onFirstRemoteVideoDecoded": //已完成远端视频首帧解码回调。(页面添加远端视频)  
                // this.promptFn("info", "已完成远端视频首帧解码回调");  
                this.promptText = "请稍等。。。"  
                let uid = []  
                uid.push(res.uid)  
                setTimeout(() => {  
                    this.promptText = "";  
                    // this.videoShowBg = false; //设置背景开关  
                    setTimeout(() => {  
                        uid.map(item => {  
                            this.$refs[`popup${item}`][0].setupRemoteVideo({  
                                "renderMode": 1,  
                                "channelId": this.chanel,  
                                "uid": item,  
                                "mirrorMode": 0  
                            }, (res) => {})  
                            //预览  
                            RtcModule.startPreview((res) => {});  
                        })  
                    }, 500)  

                }, 2000)  
                break;  
        }  

    })  
},  
  • res.engineEvent:接收各种回调,加入频道成功,离开频道,错误码等。

4.3 创建实例

await RtcModule.create({  
    "appId": this.appid  //anyRTC 为 App 开发者签发的 App ID。每个项目都应该有一个独一无二的 App ID。如果你的开发包里没有 App ID,请从anyRTC官网(https://www.anyrtc.io)申请一个新的 App ID  
}, (res) => {});  

4.4 设置角色

setClientRole(num) {  
    this.role = num;  
    //设置直播场景下的用户角色  
    RtcModule.setClientRole({  
        "role": Number(num) //1:为主播,2:游客  
    }, (ret) => {});  
},  

4.5 加入频道

await RtcModule.joinChannel({  
    "token": "",  
    "channelId": this.channel,  
    "uid": this.uid  
}, (res) => {})  
  • token: 注册不开启token验证,可以为空着。
  • channelId: 你需要加入的频道ID。
  • uid: 每个用户分配唯一UID,不能重复。

4.6 离开销毁

RtcModule.leaveChannel((res) => {}); //离开频道  
RtcModule.destroyRtc((res) => {});    //销毁频道  

5.总结

基本重要的接口,在这里就基本上介绍完啦,如果大家还有什么疑问,可以在评论区留言!

作者:anyRTC-东慕雨

点击查看原

0 关注 分享

要回复文章请先登录注册

即时通讯开发

即时通讯开发

https://ext.dcloud.net.cn/plugin?id=9024 不依赖第三方非原生webrtc
2022-08-09 09:56
s***@163.com

s***@163.com

要钱么
2021-12-03 20:32
长岛冰茶丶

长岛冰茶丶 (作者)

回复 MonikaChen :
是p2p的
2021-01-14 17:22
长岛冰茶丶

长岛冰茶丶 (作者)

回复 MonikaChen :
p2p的
2020-12-28 14:50
[已删除]

[已删除]

承接H5、小程序、APP等外包:
1. 经验丰富,做过多种类型项目,有案例可看;
2. 整个项目外包可以找我(小团队接单,面向客户、产品);
3. 只需要前端部分也可以找我(个人接单,面向服务端合作伙伴);
4. wechat、tel(13070273424);
2020-12-26 11:55
MonikaChen

MonikaChen

是P2P的吗?还是服务器中转?
2020-12-25 23:53