1026 lines
31 KiB
Vue
1026 lines
31 KiB
Vue
<template>
|
||
<!-- 可拖拽、可调整大小的浮动窗口 -->
|
||
<div
|
||
v-if="visible"
|
||
class="floating-video-window"
|
||
:style="windowStyle"
|
||
ref="windowRef"
|
||
>
|
||
<!-- 窗口头部 - 可拖拽区域 -->
|
||
<div
|
||
class="window-header"
|
||
@mousedown="startDrag"
|
||
>
|
||
<div class="window-title">
|
||
<el-icon><VideoCamera /></el-icon>
|
||
<span>{{ callInfo.isGroup ? '群组视频通话' : '视频通话' }} - {{ callInfo.patientName }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 窗口内容 -->
|
||
<div class="window-content">
|
||
<div class="video-call-container">
|
||
<!-- 被拒绝状态 -->
|
||
<div v-if="callRejected" class="call-rejected">
|
||
<el-icon class="rejected-icon" :size="60" color="#F56C6C"><CircleClose /></el-icon>
|
||
<p class="mt-4 text-lg">{{ statusText }}</p>
|
||
<p class="text-gray-500">{{ callInfo.patientName }}</p>
|
||
</div>
|
||
|
||
<!-- 初始化前的等待状态 -->
|
||
<div v-else-if="!isInitialized" class="call-waiting">
|
||
<el-icon class="loading-icon" :size="60"><VideoCamera /></el-icon>
|
||
<p class="mt-4">{{ statusText }}</p>
|
||
<p class="text-gray-500">{{ callInfo.patientName }}</p>
|
||
</div>
|
||
|
||
<!-- TUICallKit 视频通话界面 -->
|
||
<div v-else class="video-wrapper">
|
||
<!-- 将 TUICallKit 放在我们的容器中，并隐藏其默认全屏 UI -->
|
||
<TUICallKit
|
||
class="tui-call-kit"
|
||
:allowedFullScreen="false"
|
||
:allowedMinimized="false"
|
||
/>
|
||
|
||
<!-- 等待接听时的浮层提示 -->
|
||
<div v-if="calling && !callConnected" class="waiting-overlay">
|
||
<div class="waiting-content">
|
||
<el-icon class="waiting-icon" :size="40"><Phone /></el-icon>
|
||
<p class="waiting-text">{{ statusText }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 窗口底部操作栏 -->
|
||
<div class="window-footer">
|
||
<el-button
|
||
@click="handleClose"
|
||
:disabled="calling && !callRejected"
|
||
size="small"
|
||
>
|
||
{{ callRejected ? '关闭' : '取消' }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="!isInitialized && !callRejected"
|
||
type="primary"
|
||
@click="startCall"
|
||
:loading="initializing"
|
||
size="small"
|
||
>
|
||
开始通话
|
||
</el-button>
|
||
<el-button
|
||
v-else-if="!callRejected"
|
||
type="danger"
|
||
@click="handleHangup"
|
||
size="small"
|
||
>
|
||
挂断
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 调整大小的拖拽点 -->
|
||
<div
|
||
class="resize-handle resize-handle-se"
|
||
@mousedown="startResize"
|
||
></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onUnmounted, nextTick, computed } from 'vue'
|
||
import { VideoCamera, CircleClose, Phone } from '@element-plus/icons-vue'
|
||
import { getCallSignature, endCall } from '@/api/tcm'
|
||
import feedback from '@/utils/feedback'
|
||
import { formatTUICallUserError } from '@/utils/tuicall-error'
|
||
import { TUICallKitAPI, TUICallKit, TUICallType, STATUS } from '@trtc/calls-uikit-vue'
|
||
|
||
interface CallInfo {
|
||
diagnosisId: number
|
||
patientId: number
|
||
patientName: string
|
||
userId?: string // 一对一通话时使用
|
||
assistantId?: number // 群组通话时的医助ID
|
||
userIds?: string[] // 群组通话时的用户ID列表
|
||
isGroup: boolean // 是否为群组通话
|
||
}
|
||
|
||
const visible = ref(false)
|
||
const isInitialized = ref(false)
|
||
const initializing = ref(false)
|
||
const calling = ref(false)
|
||
const callConnected = ref(false)
|
||
const callRejected = ref(false)
|
||
const shouldAutoClose = ref(false) // 标记是否应该自动关闭
|
||
const statusText = ref('准备通话...')
|
||
const callInfo = ref<CallInfo>({
|
||
diagnosisId: 0,
|
||
patientId: 0,
|
||
patientName: '',
|
||
userId: '',
|
||
isGroup: false
|
||
})
|
||
|
||
// 窗口位置和大小
|
||
const windowRef = ref<HTMLElement>()
|
||
const windowPosition = ref({ x: 100, y: 100 })
|
||
const windowSize = ref({ width: 300, height: 750 })
|
||
|
||
// 拖拽相关
|
||
const isDragging = ref(false)
|
||
const dragStart = ref({ x: 10, y: 0 })
|
||
|
||
// 调整大小相关
|
||
const isResizing = ref(false)
|
||
const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 })
|
||
|
||
// 计算窗口样式
|
||
const windowStyle = computed(() => ({
|
||
left: `${windowPosition.value.x}px`,
|
||
top: `${windowPosition.value.y}px`,
|
||
width: `${windowSize.value.width}px`,
|
||
height: `${windowSize.value.height}px`
|
||
}))
|
||
|
||
// 开始拖拽
|
||
const startDrag = (e: MouseEvent) => {
|
||
isDragging.value = true
|
||
dragStart.value = {
|
||
x: e.clientX - windowPosition.value.x,
|
||
y: e.clientY - windowPosition.value.y
|
||
}
|
||
|
||
document.addEventListener('mousemove', onDrag)
|
||
document.addEventListener('mouseup', stopDrag)
|
||
e.preventDefault()
|
||
}
|
||
|
||
const onDrag = (e: MouseEvent) => {
|
||
if (!isDragging.value) return
|
||
|
||
windowPosition.value = {
|
||
x: e.clientX - dragStart.value.x,
|
||
y: e.clientY - dragStart.value.y
|
||
}
|
||
}
|
||
|
||
const stopDrag = () => {
|
||
isDragging.value = false
|
||
document.removeEventListener('mousemove', onDrag)
|
||
document.removeEventListener('mouseup', stopDrag)
|
||
}
|
||
|
||
// 开始调整大小
|
||
const startResize = (e: MouseEvent) => {
|
||
isResizing.value = true
|
||
resizeStart.value = {
|
||
x: e.clientX,
|
||
y: e.clientY,
|
||
width: windowSize.value.width,
|
||
height: windowSize.value.height
|
||
}
|
||
|
||
document.addEventListener('mousemove', onResize)
|
||
document.addEventListener('mouseup', stopResize)
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
}
|
||
|
||
const onResize = (e: MouseEvent) => {
|
||
if (!isResizing.value) return
|
||
|
||
const deltaX = e.clientX - resizeStart.value.x
|
||
const deltaY = e.clientY - resizeStart.value.y
|
||
|
||
windowSize.value = {
|
||
width: Math.max(400, resizeStart.value.width + deltaX),
|
||
height: Math.max(300, resizeStart.value.height + deltaY)
|
||
}
|
||
}
|
||
|
||
const stopResize = () => {
|
||
isResizing.value = false
|
||
document.removeEventListener('mousemove', onResize)
|
||
document.removeEventListener('mouseup', stopResize)
|
||
}
|
||
|
||
// 监听通话状态变化
|
||
const handleStatusChange = ({ oldStatus, newStatus }: any) => {
|
||
console.log('========== statusChanged 回调触发 ==========')
|
||
console.log('状态变化:', {
|
||
oldStatus,
|
||
newStatus,
|
||
calling: calling.value,
|
||
callConnected: callConnected.value,
|
||
visible: visible.value
|
||
})
|
||
console.log('STATUS 常量:', {
|
||
IDLE: STATUS.IDLE,
|
||
DIALING_C2C: STATUS.DIALING_C2C,
|
||
CALLING_C2C_VIDEO: STATUS.CALLING_C2C_VIDEO
|
||
})
|
||
|
||
// 通话接通
|
||
if (newStatus === STATUS.CALLING_C2C_VIDEO || newStatus === STATUS.CALLING_GROUP_VIDEO ||
|
||
newStatus === STATUS.CALLING_C2C_AUDIO || newStatus === STATUS.CALLING_GROUP_AUDIO) {
|
||
console.log('>>> 通话已接通')
|
||
callRejected.value = false
|
||
callConnected.value = true
|
||
calling.value = true
|
||
shouldAutoClose.value = false // 通话接通时，不自动关闭
|
||
statusText.value = '通话中...'
|
||
feedback.msgSuccess('通话已接通')
|
||
|
||
// 如果是多人通话且还有其他用户需要邀请
|
||
if (callInfo.value.isGroup && callInfo.value.userIds && callInfo.value.userIds.length > 1) {
|
||
inviteOtherUsers()
|
||
}
|
||
}
|
||
|
||
// 正在呼叫
|
||
if (newStatus === STATUS.DIALING_C2C || newStatus === STATUS.DIALING_GROUP) {
|
||
console.log('>>> 正在呼叫')
|
||
callConnected.value = false
|
||
calling.value = true
|
||
shouldAutoClose.value = false
|
||
statusText.value = '等待对方接听...'
|
||
}
|
||
|
||
// 通话结束，回到空闲状态
|
||
if (newStatus === STATUS.IDLE) {
|
||
console.log('>>> 回到空闲状态')
|
||
|
||
// 从呼叫状态直接回到空闲 - 对方拒绝或未接听
|
||
if (oldStatus === STATUS.DIALING_C2C || oldStatus === STATUS.DIALING_GROUP) {
|
||
console.log('>>> 对方拒绝或未接听')
|
||
callRejected.value = true
|
||
callConnected.value = false
|
||
|
||
// 根据具体情况给出不同的提示
|
||
const rejectReasons = [
|
||
'对方已拒绝通话',
|
||
'对方未接听',
|
||
'对方设备不支持视频通话',
|
||
'对方网络连接失败',
|
||
'对方麦克风或摄像头未授权'
|
||
]
|
||
|
||
// 这里可以根据实际错误码判断具体原因
|
||
statusText.value = '对方未能接听'
|
||
|
||
feedback.msgWarning('通话未能接通，可能原因：对方拒绝、未接听、设备不支持或网络问题')
|
||
calling.value = false
|
||
shouldAutoClose.value = true
|
||
|
||
setTimeout(() => {
|
||
if (visible.value && shouldAutoClose.value) {
|
||
console.log('>>> 5秒后关闭窗口（拒绝）')
|
||
visible.value = false
|
||
isInitialized.value = false
|
||
statusText.value = '准备通话...'
|
||
}
|
||
}, 5000) // 延长到5秒，让用户看清提示
|
||
}
|
||
// 从通话中状态回到空闲 - 通话已挂断
|
||
else if (oldStatus === STATUS.CALLING_C2C_VIDEO || oldStatus === STATUS.CALLING_GROUP_VIDEO ||
|
||
oldStatus === STATUS.CALLING_C2C_AUDIO || oldStatus === STATUS.CALLING_GROUP_AUDIO) {
|
||
console.log('>>> 通话中挂断')
|
||
feedback.msg('通话已结束')
|
||
calling.value = false
|
||
callConnected.value = false
|
||
shouldAutoClose.value = true
|
||
|
||
setTimeout(() => {
|
||
if (visible.value && shouldAutoClose.value) {
|
||
console.log('>>> 1秒后关闭窗口（挂断）')
|
||
visible.value = false
|
||
isInitialized.value = false
|
||
statusText.value = '准备通话...'
|
||
}
|
||
}, 1000)
|
||
}
|
||
// 其他情况也关闭窗口
|
||
else if (calling.value || callConnected.value) {
|
||
console.log('>>> 其他情况结束')
|
||
calling.value = false
|
||
callConnected.value = false
|
||
shouldAutoClose.value = true
|
||
|
||
setTimeout(() => {
|
||
if (visible.value && shouldAutoClose.value) {
|
||
console.log('>>> 1秒后关闭窗口（其他）')
|
||
visible.value = false
|
||
isInitialized.value = false
|
||
statusText.value = '准备通话...'
|
||
}
|
||
}, 1000)
|
||
} else {
|
||
console.log('>>> 未匹配任何关闭条件')
|
||
}
|
||
}
|
||
}
|
||
|
||
// 监听通话错误
|
||
const handleCallError = (error: any) => {
|
||
console.error('========== 通话错误 ==========', error)
|
||
|
||
let errorMessage = '通话失败'
|
||
|
||
// 根据错误码给出具体提示
|
||
if (error.code) {
|
||
switch (error.code) {
|
||
case 60006:
|
||
errorMessage = '当前环境不支持 WebRTC，请使用 HTTPS 访问或在 localhost 测试'
|
||
break
|
||
case 60007:
|
||
errorMessage = '对方设备不支持视频通话'
|
||
break
|
||
case 60008:
|
||
errorMessage = '对方拒绝了通话'
|
||
break
|
||
case 60009:
|
||
errorMessage = '对方未接听'
|
||
break
|
||
case 60010:
|
||
errorMessage = '对方忙线中'
|
||
break
|
||
case 60011:
|
||
errorMessage = '对方不在线'
|
||
break
|
||
case 60012:
|
||
errorMessage = '网络连接失败'
|
||
break
|
||
case 60013:
|
||
errorMessage = '对方麦克风或摄像头未授权'
|
||
break
|
||
default:
|
||
errorMessage = error.message || '通话失败，请稍后重试'
|
||
}
|
||
}
|
||
|
||
feedback.msgError(errorMessage)
|
||
callRejected.value = true
|
||
statusText.value = errorMessage
|
||
calling.value = false
|
||
shouldAutoClose.value = true
|
||
|
||
setTimeout(() => {
|
||
if (visible.value && shouldAutoClose.value) {
|
||
visible.value = false
|
||
isInitialized.value = false
|
||
}
|
||
}, 5000)
|
||
}
|
||
|
||
// 邀请其他用户加入通话
|
||
const inviteOtherUsers = async () => {
|
||
if (!callInfo.value.userIds || callInfo.value.userIds.length <= 1) {
|
||
return
|
||
}
|
||
|
||
console.log('开始邀请其他用户加入通话')
|
||
|
||
// 从第二个用户开始邀请
|
||
for (let i = 1; i < callInfo.value.userIds.length; i++) {
|
||
try {
|
||
const userId = callInfo.value.userIds[i]
|
||
console.log(`正在邀请用户: ${userId}`)
|
||
|
||
// 使用 calls 方法邀请用户（在已有通话的情况下会自动转为邀请加入）
|
||
await TUICallKitAPI.calls({
|
||
userIDList: [userId],
|
||
type: TUICallType.VIDEO_CALL
|
||
})
|
||
|
||
console.log(`已成功邀请用户: ${userId}`)
|
||
feedback.msgSuccess(`已邀请 ${userId} 加入通话`)
|
||
|
||
// 等待一下再邀请下一个
|
||
await new Promise(resolve => setTimeout(resolve, 500))
|
||
} catch (error) {
|
||
console.error(`邀请用户失败: ${callInfo.value.userIds[i]}`, error)
|
||
feedback.msgWarning(`邀请 ${callInfo.value.userIds[i]} 失败`)
|
||
}
|
||
}
|
||
|
||
console.log('所有用户邀请完成')
|
||
}
|
||
|
||
// 通话结束后的回调（兜底机制）
|
||
const handleAfterCalling = () => {
|
||
console.log('========== afterCalling 回调触发 ==========')
|
||
console.log('当前状态:', {
|
||
visible: visible.value,
|
||
calling: calling.value,
|
||
callConnected: callConnected.value,
|
||
shouldAutoClose: shouldAutoClose.value,
|
||
isInitialized: isInitialized.value
|
||
})
|
||
|
||
// 只有在标记为应该自动关闭时才关闭
|
||
// 这样可以避免在通话接通时误触发
|
||
if (visible.value && shouldAutoClose.value) {
|
||
feedback.msg('通话已结束')
|
||
calling.value = false
|
||
callConnected.value = false
|
||
|
||
setTimeout(() => {
|
||
if (visible.value && shouldAutoClose.value) {
|
||
console.log('通过 afterCalling 关闭窗口')
|
||
visible.value = false
|
||
isInitialized.value = false
|
||
statusText.value = '准备通话...'
|
||
}
|
||
}, 1000)
|
||
} else {
|
||
console.log('afterCalling 触发但不关闭窗口（shouldAutoClose=false）')
|
||
}
|
||
}
|
||
|
||
const open = async (info: CallInfo) => {
|
||
// 检查 WebRTC 支持
|
||
if (!checkWebRTCSupport()) {
|
||
return
|
||
}
|
||
|
||
callInfo.value = info
|
||
visible.value = true
|
||
isInitialized.value = false
|
||
calling.value = false
|
||
callConnected.value = false
|
||
callRejected.value = false
|
||
shouldAutoClose.value = false // 重置自动关闭标志
|
||
statusText.value = '准备通话...'
|
||
|
||
// 居中显示窗口
|
||
const screenWidth = window.innerWidth
|
||
const screenHeight = window.innerHeight
|
||
windowPosition.value = {
|
||
x: (screenWidth - windowSize.value.width) / 2,
|
||
y: (screenHeight - windowSize.value.height) / 2
|
||
}
|
||
}
|
||
|
||
// 检查 WebRTC 支持
|
||
const checkWebRTCSupport = () => {
|
||
const isHttps = window.location.protocol === 'https:' ||
|
||
window.location.hostname === 'localhost' ||
|
||
window.location.hostname === '127.0.0.1'
|
||
|
||
const hasGetUserMedia = !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
|
||
const hasRTCPeerConnection = !!window.RTCPeerConnection
|
||
|
||
console.log('WebRTC 环境检测:', {
|
||
protocol: window.location.protocol,
|
||
hostname: window.location.hostname,
|
||
isHttps,
|
||
hasGetUserMedia,
|
||
hasRTCPeerConnection
|
||
})
|
||
|
||
if (!isHttps) {
|
||
feedback.msgError('视频通话需要 HTTPS 环境。请使用 HTTPS 协议访问，或在 localhost 下测试。')
|
||
return false
|
||
}
|
||
|
||
if (!hasGetUserMedia) {
|
||
feedback.msgError('当前浏览器不支持访问摄像头和麦克风，请使用 Chrome、Edge 或 Safari 浏览器。')
|
||
return false
|
||
}
|
||
|
||
if (!hasRTCPeerConnection) {
|
||
feedback.msgError('当前浏览器不支持 WebRTC，请升级浏览器版本。')
|
||
return false
|
||
}
|
||
|
||
return true
|
||
}
|
||
|
||
const startCall = async () => {
|
||
let res: any = null // 保存签名响应，供后续使用
|
||
|
||
try {
|
||
initializing.value = true
|
||
callRejected.value = false
|
||
statusText.value = '正在获取签名...'
|
||
|
||
// 获取腾讯云签名
|
||
try {
|
||
res = await getCallSignature({
|
||
diagnosis_id: callInfo.value.diagnosisId,
|
||
patient_id: callInfo.value.patientId
|
||
})
|
||
} catch (error: any) {
|
||
console.error('获取签名失败:', error)
|
||
throw new Error('获取通话签名失败，请检查网络连接或稍后重试')
|
||
}
|
||
|
||
if (!res || !res.userSig) {
|
||
throw new Error('获取签名失败，返回数据不完整')
|
||
}
|
||
|
||
console.log('签名获取成功:', {
|
||
doctorUserId: res.userId,
|
||
patientUserId: res.patientUserId,
|
||
sdkAppId: res.sdkAppId
|
||
})
|
||
statusText.value = '正在初始化通话组件...'
|
||
|
||
// 设置状态变化回调和通话结束回调
|
||
// 注意：4.x 版本移除了 onError 回调，错误处理通过 try-catch 和状态判断
|
||
TUICallKitAPI.setCallback({
|
||
statusChanged: handleStatusChange,
|
||
afterCalling: handleAfterCalling
|
||
})
|
||
|
||
// 禁用浮窗功能，防止 TUICallKit 创建自己的全屏层
|
||
TUICallKitAPI.enableFloatWindow(false)
|
||
|
||
// 初始化 TUICallKit
|
||
try {
|
||
await TUICallKitAPI.init({
|
||
userID: res.userId,
|
||
userSig: res.userSig,
|
||
SDKAppID: Number(res.sdkAppId)
|
||
})
|
||
console.log('TUICallKit init 方法调用完成')
|
||
} catch (error: any) {
|
||
console.error('TUICallKit 初始化失败:', error)
|
||
|
||
// 根据错误码给出具体提示
|
||
if (error.code === 60006) {
|
||
throw new Error('当前环境不支持 WebRTC，请使用 HTTPS 访问或在 localhost 测试')
|
||
} else if (error.message && error.message.includes('getUserMedia')) {
|
||
throw new Error('无法访问摄像头或麦克风，请检查设备权限设置')
|
||
} else if (error.message && error.message.includes('network')) {
|
||
throw new Error('网络连接失败，请检查网络设置')
|
||
} else {
|
||
throw new Error(`初始化失败: ${error.message || '未知错误'}`)
|
||
}
|
||
}
|
||
|
||
statusText.value = '等待初始化完成...'
|
||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||
|
||
// 生产包中 init 返回后引擎可能尚未挂载，短暂轮询等待 .calls 可用
|
||
for (let i = 0; i < 6; i++) {
|
||
if (typeof TUICallKitAPI.calls === 'function') break
|
||
await new Promise(resolve => setTimeout(resolve, 500))
|
||
}
|
||
if (typeof TUICallKitAPI.calls !== 'function') {
|
||
throw new Error('通话引擎未就绪，请关闭窗口后重试或刷新页面')
|
||
}
|
||
|
||
console.log('初始化完成，显示通话界面')
|
||
statusText.value = '准备发起通话...'
|
||
|
||
// 设置初始化完成标志，显示 TUICallKit 组件
|
||
isInitialized.value = true
|
||
calling.value = true
|
||
|
||
// 等待 DOM 更新和组件渲染
|
||
await nextTick()
|
||
await new Promise(resolve => setTimeout(resolve, 500))
|
||
|
||
// 发起通话
|
||
try {
|
||
if (callInfo.value.isGroup && callInfo.value.userIds && callInfo.value.userIds.length > 0) {
|
||
// 多人通话 - 依次邀请所有用户
|
||
console.log('准备发起多人通话，目标用户:', callInfo.value.userIds)
|
||
|
||
// 先邀请第一个用户建立通话
|
||
await TUICallKitAPI.calls({
|
||
userIDList: [callInfo.value.userIds[0]],
|
||
type: TUICallType.VIDEO_CALL
|
||
})
|
||
|
||
console.log(`已邀请第一个用户: ${callInfo.value.userIds[0]}`)
|
||
|
||
if (callInfo.value.userIds.length > 1) {
|
||
statusText.value = `等待 ${callInfo.value.userIds[0]} 接听后将邀请其他成员...`
|
||
feedback.msgSuccess(`已邀请第一位成员，接通后将邀请其他 ${callInfo.value.userIds.length - 1} 位成员`)
|
||
} else {
|
||
statusText.value = '等待成员接听...'
|
||
feedback.msgSuccess('多人通话已发起，等待成员接听...')
|
||
}
|
||
|
||
console.log('多人通话已发起')
|
||
} else {
|
||
// 一对一通话 - 使用后端返回的 patientUserId
|
||
const targetUserId = res.patientUserId || callInfo.value.userId || ''
|
||
console.log('=== 发起一对一通话 ===')
|
||
console.log('后端返回的 patientUserId:', res.patientUserId)
|
||
console.log('前端传入的 userId:', callInfo.value.userId)
|
||
console.log('最终使用的 targetUserId:', targetUserId)
|
||
console.log('完整的 res 对象:', res)
|
||
|
||
if (!targetUserId) {
|
||
throw new Error('无法获取患者通话ID')
|
||
}
|
||
|
||
await TUICallKitAPI.calls({
|
||
userIDList: [targetUserId],
|
||
type: TUICallType.VIDEO_CALL
|
||
})
|
||
|
||
console.log('通话已发起，目标用户:', targetUserId)
|
||
statusText.value = '等待对方接听...'
|
||
feedback.msgSuccess('通话已发起，等待对方接听...')
|
||
}
|
||
} catch (error: any) {
|
||
console.error('发起通话失败:', error)
|
||
|
||
// 根据错误类型给出具体提示
|
||
if (error.code === 60011) {
|
||
throw new Error('对方不在线，无法发起通话')
|
||
} else if (error.code === 60010) {
|
||
throw new Error('对方忙线中，请稍后再试')
|
||
} else if (error.message && error.message.includes('getUserMedia')) {
|
||
throw new Error('无法访问摄像头或麦克风，请在浏览器设置中允许访问')
|
||
} else {
|
||
throw new Error(`发起通话失败: ${error.message || '未知错误'}`)
|
||
}
|
||
}
|
||
|
||
} catch (error: any) {
|
||
console.error('启动通话失败:', error)
|
||
const errorMessage = formatTUICallUserError(error, '启动通话失败，请稍后重试')
|
||
feedback.msgError(errorMessage)
|
||
callRejected.value = true
|
||
statusText.value = errorMessage
|
||
isInitialized.value = false
|
||
calling.value = false
|
||
shouldAutoClose.value = true
|
||
|
||
// 5秒后自动关闭错误提示窗口
|
||
setTimeout(() => {
|
||
if (visible.value && shouldAutoClose.value && callRejected.value) {
|
||
visible.value = false
|
||
statusText.value = '准备通话...'
|
||
}
|
||
}, 5000)
|
||
} finally {
|
||
initializing.value = false
|
||
}
|
||
}
|
||
|
||
const handleHangup = async () => {
|
||
try {
|
||
await TUICallKitAPI.hangup()
|
||
feedback.msgSuccess('已挂断通话')
|
||
await handleCallEnd()
|
||
visible.value = false
|
||
isInitialized.value = false
|
||
calling.value = false
|
||
callConnected.value = false
|
||
} catch (error) {
|
||
console.error('挂断失败:', error)
|
||
}
|
||
}
|
||
|
||
const handleCallEnd = async () => {
|
||
try {
|
||
// 记录通话结束
|
||
await endCall({
|
||
diagnosis_id: callInfo.value.diagnosisId
|
||
})
|
||
} catch (error) {
|
||
console.error('记录通话结束失败:', error)
|
||
}
|
||
}
|
||
|
||
const handleClose = async () => {
|
||
if (calling.value && !callRejected.value) {
|
||
try {
|
||
await feedback.confirm('通话进行中，确定要结束吗？')
|
||
} catch {
|
||
return
|
||
}
|
||
|
||
// 挂断通话
|
||
try {
|
||
shouldAutoClose.value = true // 手动关闭时设置标志
|
||
await TUICallKitAPI.hangup()
|
||
} catch (error) {
|
||
console.error('挂断通话失败:', error)
|
||
}
|
||
}
|
||
|
||
// 记录通话结束
|
||
if (isInitialized.value) {
|
||
await handleCallEnd()
|
||
}
|
||
|
||
// 重置所有状态
|
||
visible.value = false
|
||
isInitialized.value = false
|
||
calling.value = false
|
||
callConnected.value = false
|
||
callRejected.value = false
|
||
shouldAutoClose.value = false
|
||
statusText.value = '准备通话...'
|
||
|
||
// 等待一下再销毁，确保 TUICallKit 完全清理
|
||
await nextTick()
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
// 组件卸载时清理
|
||
if (calling.value) {
|
||
TUICallKitAPI.hangup().catch(console.error)
|
||
}
|
||
|
||
// 清理事件监听
|
||
document.removeEventListener('mousemove', onDrag)
|
||
document.removeEventListener('mouseup', stopDrag)
|
||
document.removeEventListener('mousemove', onResize)
|
||
document.removeEventListener('mouseup', stopResize)
|
||
})
|
||
|
||
defineExpose({
|
||
open
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.floating-video-window {
|
||
position: fixed;
|
||
z-index: 2000;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
min-width: 400px;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.window-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 16px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
cursor: move;
|
||
user-select: none;
|
||
position: relative;
|
||
z-index: 2001;
|
||
|
||
.window-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.window-actions {
|
||
display: flex;
|
||
gap: 4px;
|
||
position: relative;
|
||
z-index: 2002;
|
||
|
||
:deep(.el-button) {
|
||
color: white;
|
||
|
||
&:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.window-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.video-call-container {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f5f5f5;
|
||
position: relative;
|
||
min-height: 0;
|
||
}
|
||
|
||
.video-wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.call-waiting {
|
||
text-align: center;
|
||
|
||
.loading-icon {
|
||
animation: pulse 2s ease-in-out infinite;
|
||
}
|
||
}
|
||
|
||
.call-rejected {
|
||
text-align: center;
|
||
|
||
.rejected-icon {
|
||
animation: shake 0.5s ease-in-out;
|
||
}
|
||
|
||
.text-lg {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #F56C6C;
|
||
}
|
||
|
||
.text-gray-500 {
|
||
color: #909399;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
.waiting-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.waiting-content {
|
||
text-align: center;
|
||
color: white;
|
||
|
||
.waiting-icon {
|
||
animation: ring 1.5s ease-in-out infinite;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.waiting-text {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
.window-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
border-top: 1px solid #e4e7ed;
|
||
background: white;
|
||
position: relative;
|
||
z-index: 2001;
|
||
}
|
||
|
||
/* 调整大小拖拽点 */
|
||
.resize-handle {
|
||
position: absolute;
|
||
background: transparent;
|
||
z-index: 2001;
|
||
}
|
||
|
||
.resize-handle-se {
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 16px;
|
||
height: 16px;
|
||
cursor: se-resize;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 2px;
|
||
bottom: 2px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-right: 2px solid #dcdfe6;
|
||
border-bottom: 2px solid #dcdfe6;
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
@keyframes shake {
|
||
0%, 100% {
|
||
transform: translateX(0);
|
||
}
|
||
25% {
|
||
transform: translateX(-10px);
|
||
}
|
||
75% {
|
||
transform: translateX(10px);
|
||
}
|
||
}
|
||
|
||
@keyframes ring {
|
||
0%, 100% {
|
||
transform: rotate(-15deg);
|
||
}
|
||
50% {
|
||
transform: rotate(15deg);
|
||
}
|
||
}
|
||
|
||
.tui-call-kit {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.mt-4 {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/* 确保 TUICallKit 组件内的视频元素正确显示，但不超过我们的控制层 */
|
||
:deep(.tui-call-kit) {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* 确保视频容器有正确的尺寸 */
|
||
.tui-call-kit-video-container,
|
||
.tui-video-container,
|
||
.video-container {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
/* 确保本地和远程视频都正确显示 */
|
||
.local-video,
|
||
.remote-video {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
/* 限制 TUICallKit 内部元素的 z-index，防止遮挡我们的控制按钮 */
|
||
* {
|
||
z-index: auto !important;
|
||
}
|
||
|
||
/* 但保持视频元素的层级 */
|
||
video,
|
||
.video-container,
|
||
.tui-video-container {
|
||
z-index: 1 !important;
|
||
}
|
||
}
|
||
|
||
/* 全局覆盖 TUICallKit 可能创建的全屏层 - 完全隐藏 */
|
||
:global(body > #tui-call-kit-id) {
|
||
display: none !important;
|
||
visibility: hidden !important;
|
||
opacity: 0 !important;
|
||
pointer-events: none !important;
|
||
}
|
||
|
||
/* 只在我们的窗口内显示 TUICallKit */
|
||
.floating-video-window :deep(.tui-call-kit) {
|
||
display: block !important;
|
||
visibility: visible !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* 只在我们的浮动窗口内显示 TUICallKit */
|
||
.floating-video-window .TUICallKit-desktop,
|
||
.floating-video-window .TUICallKit-mobile {
|
||
display: block !important;
|
||
position: static !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
transform: none !important;
|
||
}
|
||
|
||
/* 确保 Element Plus 的遮罩层不会覆盖视频通话 */
|
||
:global(.el-overlay) {
|
||
z-index: 1000;
|
||
}
|
||
</style>
|