diff --git a/src/components/call/CallWindow.vue b/src/components/call/CallWindow.vue index b89e47c..d42ea8a 100644 --- a/src/components/call/CallWindow.vue +++ b/src/components/call/CallWindow.vue @@ -41,8 +41,8 @@ >
@@ -52,7 +52,7 @@
- {{ target?.remark_name || target?.user?.name || '未知用户' }} + {{ displayName }}
@@ -189,6 +189,10 @@ interface Props { remoteCamOff: boolean duration: number miniprogramStreams?: FlvStreamInfo[] + // 来电者信息(用于来电显示,当 target 为 null 时使用) + callerName?: string + callerAvatar?: string + callerId?: string } target: Contact | null isMobile: boolean @@ -220,6 +224,16 @@ const hasFlvStream = computed(() => { (props.call.miniprogramStreams && props.call.miniprogramStreams.length > 0) }) +// 计算显示的用户名(优先使用 target,fallback 到 call.callerName) +const displayName = computed(() => { + return props.target?.remark_name || props.target?.user?.name || props.call.callerName || '未知用户' +}) + +// 计算显示的头像(优先使用 target,fallback 到 call.callerAvatar) +const displayAvatar = computed(() => { + return props.target?.user?.avatar || props.call.callerAvatar +}) + const shouldShowLocalVideo = computed(() => { return props.call.type === 'video' && !props.call.minimized && diff --git a/src/composables/useWebRTC.ts b/src/composables/useWebRTC.ts index d029fd7..8027a91 100644 --- a/src/composables/useWebRTC.ts +++ b/src/composables/useWebRTC.ts @@ -6,6 +6,7 @@ import * as callApi from '@/api/modules/call' import { wsManager } from '@/api/websocket' import { useToastStore } from '@/stores/toast' import { useChatStore } from '@/stores/chat' +import { useAuthStore } from '@/stores/auth' import { isRTMPMode, isAutoMode, shouldUseRTMP, parsePlatform, type Platform } from '@/config/call' import type { ChatMessage, Contact, ICEServerConfig } from '@/types/api' import type { CallStatus } from '@/types/message' @@ -25,6 +26,10 @@ export interface CallState { startTime: number | null // 小程序流信息 miniprogramStreams: FlvStreamInfo[] + // 来电者信息(用于来电显示) + callerName?: string + callerAvatar?: string + callerId?: string } // FLV 流信息(来自小程序端) @@ -43,6 +48,7 @@ export function useWebRTC( ) { const toastStore = useToastStore() const chatStore = useChatStore() + const authStore = useAuthStore() const call = reactive({ active: false, @@ -58,6 +64,10 @@ export function useWebRTC( duration: 0, startTime: null, miniprogramStreams: [], + // 来电者信息 + callerName: undefined, + callerAvatar: undefined, + callerId: undefined, }) const isCaller = ref(false) @@ -124,7 +134,9 @@ export function useWebRTC( type: extra.type, platform: extra.platform, remotePlatform, - useRTMP: useRTMP.value + useRTMP: useRTMP.value, + senderName: extra.senderName, + senderAvatar: extra.senderAvatar }) if (call.active) { console.log('[WebRTC] ⚠️ 当前有通话,忽略新来电') @@ -138,6 +150,26 @@ export function useWebRTC( call.minimized = false call.status = 'incoming' call.statusText = `邀请你通话` + + // 设置来电者信息 + call.callerId = message.sender_user_id + // 优先从信令 extra 获取来电者信息(小程序端会发送) + if (extra.senderName) { + call.callerName = extra.senderName + call.callerAvatar = extra.senderAvatar + } else { + // 否则从本地联系人列表查找 + const contact = chatStore.contacts.find(c => + c.contact_user_id === message.sender_user_id || + c.user_id === message.sender_user_id + ) + if (contact?.user) { + call.callerName = contact.remark_name || contact.user.name + call.callerAvatar = contact.user.avatar + } + } + console.log('[WebRTC] 👤 来电者信息:', { name: call.callerName, avatar: call.callerAvatar }) + console.log('[WebRTC] ✅ 设置来电状态, roomId:', currentRoomId, 'mode:', useRTMP.value ? 'RTMP' : 'WebRTC') playRingtone('incoming') if (onIncomingCall) onIncomingCall(message.sender_user_id) @@ -443,6 +475,9 @@ export function useWebRTC( console.log('[WebRTC] 📤 发送信令:', status, { to: targetUserId, roomId, callId: call.id }) + // 获取当前用户信息,发送给对方(让对方显示来电者信息) + const currentUser = authStore.user + const payload = { sender_client_id: wsManager.getClientId() || '', receiver_user_id: targetUserId, @@ -451,8 +486,13 @@ export function useWebRTC( content: JSON.stringify(data || {}), call_id: call.id, call_status: status, - // 包含平台信息,让对方知道我们是 web 端 - extra: JSON.stringify({ type: call.type, platform: 'web' }), + // 包含平台信息和发送者信息,让对方显示来电者昵称和头像 + extra: JSON.stringify({ + type: call.type, + platform: 'web', + senderName: currentUser?.name, + senderAvatar: currentUser?.avatar + }), } messageApi.sendMessage(payload).catch(err => { console.error('[WebRTC] ❌ 发送信令失败:', err) @@ -605,6 +645,10 @@ export function useWebRTC( call.status = 'idle' call.statusText = '' call.id = null + // 清除来电者信息 + call.callerName = undefined + call.callerAvatar = undefined + call.callerId = undefined stopCallTimer() // 停止 WebSocket 推流 (RTMP 模式) diff --git a/src/config/call.ts b/src/config/call.ts index 18bca18..c875541 100644 --- a/src/config/call.ts +++ b/src/config/call.ts @@ -14,10 +14,11 @@ export type Platform = 'h5' | 'app' | 'miniprogram' | 'unknown' /** * 获取当前通话模式 - * 从 window.__CALL_MODE__ 读取,默认为 'webrtc' + * 从 window.__CALL_MODE__ 读取,默认为 'auto' + * auto 模式会根据对方平台自动选择(Web-Web 用 WebRTC,Web-小程序 用 RTMP) */ export function getCallMode(): CallMode { - return (window as any).__CALL_MODE__ || 'webrtc' + return (window as any).__CALL_MODE__ || 'auto' } /**