root/uniapp-im-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化音视频通话

Browse Source
This commit is contained in:
cc
2026-02-06 17:56:44 +08:00
parent 3389a8eaa9
commit 946cff6c52
5 changed files with 208 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
pages/room/incom.vue
View File

@@ -1,118 +1,3 @@
<script setup>
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
import { ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { TUIUserService } from '@tencentcloud/chat-uikit-engine-lite'
import { useUI } from '../../utils/use-ui'
import { navigateBack } from '../../utils/router'
CallLib.init({})
const { showLoading, hideLoading } = useUI()
const callBackground = ref('/static/images/public/random2.png')
/** 呼叫用户信息 */
const callerInfo = ref({})
/** 通话状态 */
const isRinging = ref(true)
/** 控制按钮状态 */
const activeBtn = ref(null)
/**
* 拨打状态
* call: 发起呼叫
* answer: 接听
* dialogue: 对话中
*/
const callState = ref('')
CallLib.onCallReceived(res => {
console.log(
'Engine:OnCallReceived=>' + '监听通话呼入, 目标id=>',
res.data.targetId
)
})
CallLib.onCallOutgoing(res => {
console.log(
'主叫端拨出电话后，通过回调 onCallOutgoing，通知当前 call 的详细信息',
res
)
})
CallLib.onCallConnected(res => {
console.log(res)
console.log(
'Engine:OnCallConnected=>' +
'已建立通话通话接通时，通过回调 onCallConnected 通知当前 call 的详细信息',
res
)
})
CallLib.onRemoteUserJoined(res => {
console.log(
'Engine:OnRemoteUserJoined=>' +
'主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>',
res.data.userId
)
})
/** 挂断电话 */
const isDisconnected = ref(true)
CallLib.onCallDisconnected(res => {
console.log(
'Engine:OnCallDisconnected=>' + '挂断成功, 挂断原因=>',
res.data.reason
)
isDisconnected.value = false
})
watch(
() => isDisconnected.value,
v => {
navigateBack()
}
)
CallLib.onRemoteUserRinging(res => {
console.log(
'主叫端拨出电话，被叫端收到请求，发出振铃响应时触发，对端Id为=>',
res.data.userId
)
})
CallLib.onError(res => {
console.log('通话过程中，发生异常，异常原因=>', res.data.reason)
})
/** 按钮状态 */
const cutFn = show => {
if (show) {
// 接听电话 dialogue
CallLib.enableMicrophone(true)
CallLib.accept()
callState.value = 'dialogue'
} else {
//取消接听，返回上一页
CallLib.hangup()
navigateBack()
}
}
onLoad(async e => {
callState.value = e.type
console.log(e.type)
showLoading()
const res = await TUIUserService.getUserProfile({
userIDList: [e.userID]
})
hideLoading()
callerInfo.value = res.data[0]
if (e.type === 'call') {
CallLib.enableMicrophone(true)
CallLib.startSingleCall(callerInfo.value.userID, 0, 'answer')
}
console.log('===好友信息', res)
})
</script>
<template>
<!-- 来电接听界面 -->
<view class="incoming-call">
@@ -147,9 +32,9 @@
{{ callerInfo?.nick || callerInfo?.userID }}
</text>
<text class="call-type">
{{ callState === 'call' ? '语音呼叫中...' : '对话中...' }}
{{ callState === 'call' ? '呼叫中，等待对方接受邀请...' : '对话中...' }}
</text>
<!-- <text class="call-status">未接听</text> -->
<text class="call-status">{{ mediaType === 'audio' ? "语音通话" : "视频通话" }}</text>
</view>
<!-- 控制按钮 -->
@@ -161,7 +46,7 @@
>
<uni-icons type="closeempty" size="32" color="#fff"></uni-icons>
</view>
<text class="btn-text">拒绝</text>
<text class="btn-text">{{ callState === 'call' || callState == 'dialogue' ? "挂断" : "拒绝" }}</text>
</view>
<view
@@ -185,6 +70,114 @@
</view>
</template>
<script setup>
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
import { ref, watch } from 'vue'
import { onLoad, onUnload, onHide } from '@dcloudio/uni-app'
import { TUIUserService } from '@tencentcloud/chat-uikit-engine-lite'
import { useUI } from '../../utils/use-ui'
import { navigateBack } from '../../utils/router'
CallLib.init({})
const { showLoading, hideLoading } = useUI()
const callBackground = ref('/static/images/public/random2.png')
/** 呼叫用户信息 */
const callerInfo = ref({})
/** 通话状态 */
const isRinging = ref(true)
/** 控制按钮状态 */
const activeBtn = ref(null)
/**
* 拨打状态
* call: 发起呼叫
* answer: 接听
* dialogue: 对话中
*/
const callState = ref('')
CallLib.onRemoteUserJoined(res => {
console.log(
'Engine:OnRemoteUserJoined=>' +
'主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>',
res.data.userId
)
callState.value = 'dialogue'
})
// CallLib.onRemoteUserRinging(res => {
// console.log(
// '主叫端拨出电话，被叫端收到请求，发出振铃响应时触发，对端Id为=>',
// res.data.userId
// )
// })
// CallLib.onError(res => {
// console.log('通话过程中，发生异常，异常原因=>', res.data.reason)
// })
/** 按钮状态 */
const cutFn = show => {
if (show) {
// 接听电话 dialogue
if(mediaType.value === 'audio'){
CallLib.enableMicrophone(true)
}
CallLib.accept()
callState.value = 'dialogue'
if(mediaType.value === 'video'){
uni.redirectTo({
url: "/pages/room/room"
})
}
} else {
//取消接听，返回上一页
CallLib.hangup()
navigateBack()
}
}
const mediaType= ref("audio")
onLoad(async e => {
callState.value = e.type
mediaType.value = e.mediaType
console.log(e)
showLoading()
const res = await TUIUserService.getUserProfile({
userIDList: [e.userID]
})
hideLoading()
callerInfo.value = res.data[0]
if (e.type === 'call') {
CallLib.enableMicrophone(true)
CallLib.startSingleCall(callerInfo.value.userID, 0, 'answer')
}
if(e.callType == "in"){
// 接听语音通话
callState.value = 'answer'
}
console.log('callState.value: ',callState.value);
console.log('===好友信息', res)
})
// onUnload( ()=>{
// removeAllListeners()
// })
// onHide( ()=>{
// removeAllListeners()
// })
function removeAllListeners(){
//移除监听-接收到通话呼入
CallLib.removeRemoteUserJoinedListener();
// 移除监听-通话已结束
CallLib.removeCallDisconnectedListener();
// 移除监听-通话出现错误的回调
CallLib.removeErrorListener();
}
</script>
<style lang="scss" scoped>
.incoming-call {
position: fixed;