Android uni-app实现音视频通话

顺势而为47

前言

   上一篇讲解了怎么实现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 集成插件

1. const RtcModule = uni.requireNativePlugin('AR-RtcModule');

复制代码

• AR-RtcModule：插件名称，首页集成插件
  

4.2 初始事件回调

1. //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 创建实例

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

复制代码

4.4 设置角色

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

复制代码

4.5 加入频道

1. await RtcModule.joinChannel({        "token": "",        "channelId": this.channel,        "uid": this.uid}, (res) => {})

复制代码

• token: 注册不开启token验证，可以为空着。
  
• channelId: 你需要加入的频道ID。
  
• uid: 每个用户分配唯一UID,不能重复。
  

4.6 离开销毁

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

复制代码

5.总结

基本重要的接口，在这里就基本上介绍完啦，如果大家还有什么疑问，可以在评论区留言！
作者：anyRTC-东慕雨
点击查看原

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！