Uni-App之实时音视频通话

UNI没有相关api.我们需要引入原生插件TX-TRTCCloud
插件收费10软妹币，可以试用，试用仅支持云打包自定义基座

为要使用的app绑定试用后，在manifest.json中启用

以下是本人项目中使用到的语音通话功能代码

<template>
    <view class="bg">
        <view class="customerImg"></view>
        {{ roomId }}---{{ userName }}
        <view class="fixedBottom">
            <view class="speaker">
                <view class="icon" @click="loudspeaker()"><text class="cuIcon-notification"></text></view>
            </view>
            <view class="">
                <!-- <view v-if="!userIn"  @click="join()" class="icon mainBtn loading-btn"><text class="cuIcon-loading2"></text></view> -->
                <view v-if="userIn" @click="stopAll" class="icon mainBtn rotate"><text class="cuIcon-phone"></text></view>
            </view>
            <view class="">
                <view class="icon"><text class="cuIcon-comment"></text></view>
            </view>
        </view>
    </view>
</template>

<script>
const trtcCloud = uni.requireNativePlugin('TX-TRTCCloud');
export default {
    data() {
        return {
            hisId: null,
            userIn: true,
        };
    },
    computed: {
        roomId() {
                      //通话房间号
            return this.$store.state.user.curInstantID ? this.$store.state.user.curInstantID : 13141516;
        },
        userName() {
                      //我的通话名字，唯一即可。加入房间时会带过去
            return plus.device.uuid;
        },
                //房间中其他用户人数（不含自己）统计这个是为了当房间没有其他用户的时候提示自己
        otherUserSum:{
            get: function () {
                            return this.$store.state.user.otherUserSum
            },
            set: function (v) {
                            this.$store.state.user.otherUserSum=v
            }
        }
    },
    onLoad() {
    
    },
    onReady() {
                //页面打开自动创建通话
        this.join();
    },
    methods: {
        stopAll() {
            console.log('关闭会话')
            trtcCloud.stopLocalAudio();
            trtcCloud.exitRoom();
                uni.navigateBack({
                    delta: 1,
                    animationType: 'pop-out',
                    animationDuration: 200
                });
        },
        join() {
            console.log('join',trtcCloud);
            trtcCloud.startLocalAudio();

            trtcCloud.enterRoom(
                {
                    appId: 1400249380,
                    appKey: 'e1262d907666861cefb431c67a859d9ac0cf369bd9126c4f337116e9571b8073',
                    roomId: this.roomId,
                    userId: this.userName,
                    role: 20,
                    scene: 0
                },
                result => {
                    //3. onUserEnter 收到远程用户加入的消息后初始化对应视图 ,并拿到userid
                    console.log(result);
                    switch (result.type) {
                        //有用用户加入
                        case 'onUserEnter':
                            console.log('用户加入--',result.userId)
                            this.hisId = result.userId;
                            this.$store.commit('SET_OTHERUSERSUM','add')
                            this.userIn = true;
                            console.log(this.otherUserSum,'用户加入--',result.userId)
                            break;
                        case 'onUserExit':
                            this.$store.commit('SET_OTHERUSERSUM','cut')
                            if(this.otherUserSum==0){
                                uni.showModal({
                                    title: '提示',
                                    content: '其他用户已退出房间,是否结束会话',
                                    success: (res)=> {
                                        if (res.confirm) {
                                            this.stopAll()
                                        }
                                    }
                                });
                            }
                            console.log(this.otherUserSum,'用户退出');
                            break;
                    }
                }
            );
        },
        loudspeaker(){
            // let speakerlist = trtcCloud.getSpeakerDevicesList()
            
            console.log('扬声器暂时无法使用',trtcCloud)
        }
    }
};
</script>

<style>
.bg {
    background-image: linear-gradient(to top, #d6cdf5 0%, #6950bd 100%);
    /* height: calc(100vh - 44px); */
    height: 100vh;
    padding-top: 80rpx;
}
.customerImg {
    border-radius: 50%;
    height: 130rpx;
    width: 130rpx;
    margin: 0 auto;
    background: url(../static/HM-chat/img/customer.png) center center no-repeat;
}
.fixedBottom {
    width: 100%;
    position: fixed;
    z-index: 10;
    /* bottom: 84rpx; */
    bottom: 0;
    padding-bottom: 84rpx;
    display: flex;
    justify-content: space-around;
    background: none;
}
.icon {
    font-size: 80rpx;
    color: #ffffff;
}
.mainBtn {
    height: 140rpx;
    width: 140rpx;
    background: red;
    border-radius: 50%;
    text-align: center;
    line-height: 140rpx;
}
.rotate {
    transform: rotate(-126deg);
}
.loading-btn {
    animation: rotate 1.5s infinite linear;
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
</style>

其他功能看插件描述，根据自身需求调用即可