修复web和微信小程序的通话

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<CallState>({
     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 模式)