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>
其他功能看插件描述,根据自身需求调用即可