From 3644b21262ea592b42a6a20c8490aaadd7e72cb8 Mon Sep 17 00:00:00 2001 From: liqi Date: Wed, 9 Jul 2025 10:37:57 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=201.=20=E6=8E=A5?= =?UTF-8?q?=E5=90=AC=E7=94=B5=E8=AF=9D=E7=9A=84=E5=8A=A8=E4=BD=9C=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 现有问题： 1. 连接有问题 --- src/components/VideoCallComponent.vue | 30 +++++++++++++++---- src/composables/useWebRTC.js | 42 +++++++++++++++++++++++---- src/stores/chat.js | 35 +++++++++++++++++++--- 3 files changed, 92 insertions(+), 15 deletions(-) diff --git a/src/components/VideoCallComponent.vue b/src/components/VideoCallComponent.vue index 4e33a83..86ca4f7 100644 --- a/src/components/VideoCallComponent.vue +++ b/src/components/VideoCallComponent.vue @@ -383,24 +383,37 @@ const endCall = () => { const acceptCall = () => { // 防止重复点击 if (isAccepting.value || chatStore.callStatus === "connecting" || chatStore.callStatus === "ongoing") { + console.log("已在处理接听或通话中，忽略重复点击") return; } + console.log("用户点击接听按钮") isAccepting.value = true; - chatStore.acceptCall().finally(() => { + + // 调用store的acceptCall方法 + chatStore.acceptCall().then(() => { + console.log("接听请求已发送") + }).catch((error) => { + console.error("接听失败:", error) + }).finally(() => { // 延迟重置状态，避免快速重复点击 setTimeout(() => { isAccepting.value = false; - }, 2000); + }, 3000); }); + emit('accept-call'); }; // 拒绝通话 const rejectCall = () => { // 确保只拒绝一次 - if (chatStore.callStatus === "idle") return; + if (chatStore.callStatus === "idle" || isAccepting.value) { + console.log("通话已结束或正在接听，忽略拒绝操作") + return; + } + console.log("用户点击拒绝按钮") isVisible.value = false; chatStore.rejectCall(); emit('reject-call'); @@ -491,12 +504,13 @@ watch(() => webrtc.remoteStream.value, (newStream) => { }); // 监听通话状态 - 修复：避免过早关闭连接 -watch(() => chatStore.callStatus, (status) => { - console.log("VideoCallComponent 监听到通话状态变化:", status); +watch(() => chatStore.callStatus, (status, oldStatus) => { + console.log("VideoCallComponent 监听到通话状态变化:", oldStatus, "->", status); if (status === "ongoing") { // 开始计时 if (!callTimer.value) { + console.log("开始通话计时") startCallTimer(); } } else if (status === "ended" || status === "idle") { @@ -507,7 +521,13 @@ watch(() => chatStore.callStatus, (status) => { }, 100); // 延迟一点确保状态同步 } else if (status === "connecting") { // 连接中时初始化媒体 + console.log("通话连接中，初始化媒体设备") initializeMedia(); + } else if (status === "failed") { + console.log("通话失败") + setTimeout(() => { + endCall(); + }, 3000); // 3秒后关闭 } }); diff --git a/src/composables/useWebRTC.js b/src/composables/useWebRTC.js index a1e6ab3..fba96f8 100644 --- a/src/composables/useWebRTC.js +++ b/src/composables/useWebRTC.js @@ -63,8 +63,14 @@ export function useWebRTC() { } peerConnection.value.onconnectionstatechange = () => { - const state = peerConnection.value.connectionState - console.log("连接状态变化:", state) + const state = peerConnection.value?.connectionState + console.log("WebRTC连接状态变化:", state) + + // 只有在有效的通话状态下才处理连接状态变化 + if (!chatStore.isInCall) { + console.log("不在通话中，忽略连接状态变化") + return + } if (state === "connected") { isConnected.value = true @@ -73,27 +79,51 @@ export function useWebRTC() { if (chatStore.callStatus === "connecting") { chatStore.callStatus = "ongoing" chatStore.callConnectionStatus = "通话中" + console.log("WebRTC连接已建立，通话开始") } } else if (state === "connecting") { isConnecting.value = true if (chatStore.callStatus === "connecting") { - chatStore.callConnectionStatus = "正在连接..." + chatStore.callConnectionStatus = "正在建立连接..." } - } else if (state === "disconnected" || state === "failed") { + } else if (state === "disconnected") { + console.log("WebRTC连接断开") isConnected.value = false isConnecting.value = false + // 只有在通话中才处理断开 if (chatStore.callStatus === "ongoing") { chatStore.callStatus = "disconnected" chatStore.callConnectionStatus = "连接已断开" } + } else if (state === "failed") { + console.log("WebRTC连接失败") + isConnected.value = false + isConnecting.value = false + if (chatStore.callStatus === "connecting" || chatStore.callStatus === "ongoing") { + chatStore.callStatus = "failed" + chatStore.callConnectionStatus = "连接失败" + } } } peerConnection.value.oniceconnectionstatechange = () => { - const state = peerConnection.value.iceConnectionState + const state = peerConnection.value?.iceConnectionState console.log("ICE连接状态变化:", state) - if (state === "failed" || state === "disconnected") { + // 只有在有效的通话状态下才处理ICE状态变化 + if (!chatStore.isInCall) { + console.log("不在通话中，忽略ICE状态变化") + return + } + + if (state === "failed") { + console.log("ICE连接失败") + if (chatStore.callStatus === "ongoing" || chatStore.callStatus === "connecting") { + chatStore.callStatus = "failed" + chatStore.callConnectionStatus = "网络连接失败" + } + } else if (state === "disconnected") { + console.log("ICE连接断开") if (chatStore.callStatus === "ongoing") { chatStore.callStatus = "disconnected" chatStore.callConnectionStatus = "网络连接已断开" diff --git a/src/stores/chat.js b/src/stores/chat.js index 3ae847c..6c0ec1f 100644 --- a/src/stores/chat.js +++ b/src/stores/chat.js @@ -496,6 +496,14 @@ export const useChatStore = defineStore("chat", () => { callConnectionStatus.value = "收到来电" console.log("收到来电:", incomingCall.value) + + // 设置来电超时（30秒后自动拒绝） + setCallTimeout(() => { + if (callStatus.value === "ringing" && incomingCall.value) { + console.log("来电超时，自动拒绝") + rejectCall("no-answer") + } + }, 30000) } // 处理通话接受 @@ -921,7 +929,10 @@ export const useChatStore = defineStore("chat", () => { // 接听来电 const acceptCall = async () => { - if (!incomingCall.value) return + if (!incomingCall.value) { + console.log("没有来电，无法接听") + return + } // 防止重复接听 if (callStatus.value === "connecting" || callStatus.value === "ongoing") { @@ -929,6 +940,11 @@ export const useChatStore = defineStore("chat", () => { return } + // 清除任何可能的超时定时器 + clearCallTimeout() + + console.log("开始接听通话:", incomingCall.value) + callStatus.value = "connecting" callConnectionStatus.value = "正在连接..." @@ -964,7 +980,18 @@ export const useChatStore = defineStore("chat", () => { // 拒绝来电 const rejectCall = async (reason = "rejected") => { - if (!incomingCall.value) return + if (!incomingCall.value) { + console.log("没有来电，无法拒绝") + return + } + + // 如果已经在连接中，不允许拒绝 + if (callStatus.value === "connecting" || callStatus.value === "ongoing") { + console.log("通话已在进行中，无法拒绝") + return + } + + console.log("开始拒绝通话:", reason) try { // 发送拒绝信号 - 使用便捷方法 @@ -987,7 +1014,7 @@ export const useChatStore = defineStore("chat", () => { // 添加通话记录 const friend = friends.value.find((f) => f.id === incomingCall.value.callerId) if (friend) { - const content = reason === "busy" ? "[对方忙线]" : "[已拒绝]" + const content = reason === "busy" ? "[对方忙线]" : reason === "no-answer" ? "[未接来电]" : "[已拒绝]" const callMessage = { type: incomingCall.value.callType === "video" ? "video-call" : "audio-call", @@ -1006,7 +1033,7 @@ export const useChatStore = defineStore("chat", () => { } resetCallState() - callConnectionStatus.value = reason === "busy" ? "对方忙线" : "已拒绝" + callConnectionStatus.value = reason === "busy" ? "对方忙线" : reason === "no-answer" ? "无人接听" : "已拒绝" // 5秒后清除状态 setTimeout(() => {