diff --git a/src/components/VideoCallComponent.vue b/src/components/VideoCallComponent.vue index ea1f880..8a445c2 100644 --- a/src/components/VideoCallComponent.vue +++ b/src/components/VideoCallComponent.vue @@ -45,13 +45,31 @@
-
+ +
+ 未检测到摄像头 +
+ + +
+ 未检测到麦克风 +
+ + +
摄像头未工作
-
+ + +
麦克风未工作
-
+ + +
对方未开启摄像头
@@ -84,12 +102,12 @@
@@ -113,12 +131,12 @@
@@ -282,6 +300,14 @@ const localVideo = ref(null); const remoteVideo = ref(null); const remoteVideoPreview = ref(null); +// 新增:设备状态检测 +const deviceStatus = reactive({ + hasCamera: false, + hasMicrophone: false, + cameraWorking: false, + microphoneWorking: false, +}) + // 获取当前通话状态 const callStatus = computed(() => { return chatStore.callStatus; @@ -533,6 +559,37 @@ const handleWindowResize = () => { position.y = Math.max(0, Math.min(position.y, window.innerHeight - height)); }; +// 远端视频轨道检测 +const hasRemoteVideo = computed(() => { + if (!webrtc.remoteStream.value) return false + const tracks = webrtc.remoteStream.value.getVideoTracks() + return tracks.length > 0 && tracks.some(t => t.readyState === 'live') +}) + +// 监听本地流变化 +watch(() => webrtc.localStream.value, (stream) => { + if (!stream) return + + // 更新设备工作状态 + deviceStatus.cameraWorking = stream.getVideoTracks().length > 0 && + stream.getVideoTracks().some(t => t.readyState === 'live') + + deviceStatus.microphoneWorking = stream.getAudioTracks().length > 0 && + stream.getAudioTracks().some(t => t.readyState === 'live') +}) + +// 初始化设备检测 +const checkDevices = async () => { + try { + const devices = await navigator.mediaDevices.enumerateDevices() + deviceStatus.hasCamera = devices.some(d => d.kind === 'videoinput' && d.deviceId !== '') + deviceStatus.hasMicrophone = devices.some(d => d.kind === 'audioinput' && d.deviceId !== '') + console.log("📷 设备检测结果:", deviceStatus) + } catch (error) { + console.error("❌ 设备检测失败:", error) + } +} + // 监听通话状态 watch(() => chatStore.callStatus, (status, oldStatus) => { console.log("📞 VideoCallComponent 监听到通话状态变化:", oldStatus, "->", status); @@ -597,6 +654,9 @@ onMounted(() => { window.addEventListener('resize', handleWindowResize); + // 初始化设备检测 + checkDevices(); + console.log("🚀 VideoCallComponent mounted, callStatus:", chatStore.callStatus, "isIncoming:", props.isIncoming); if (['calling', 'connecting', 'ongoing'].includes(chatStore.callStatus)) { @@ -621,6 +681,7 @@ onUnmounted(() => {