前言
上一篇讲解了怎么实现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-东慕雨
点击查看原