Android 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-东慕雨

点击查看原