优化语音视频

src/stores/modules/webSocketStore.js

@@ -470,7 +470,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         this.messages.push(message);
         this.indexs +=1;
       }
-      console.log('pushMessage', systemStore.messageList, this.messages)
+      // console.log('pushMessage', systemStore.messageList, this.messages)
       // 更新会话最新消息
       this.updateSessionNewMessage(message, sessionId)
     },
@@ -500,7 +500,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
           return item;
         });
       }
-      console.log("修改消息", message, sessionId, systemStore.messageList, this.toUserInfo.uuid, this.messages);
+      console.log("修改消息", message, sessionId, systemStore.messageList,this.messages);
     },
     // 更新本地消息
     modifyMessage(message, msgId, sessionId = null) { 
@@ -979,6 +979,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
       this.messages = [];
       this.groupMembersList = {};
       this.toUserInfo = {};
+      this.toUserAudioInfo = {};
       this.messageQueue = [];
       systemStore.ImsessionList = [];
       this.onMessageCallbacks = [];

src/stores/modules/webrtcStore.js

@@ -128,6 +128,10 @@ export const useWebRTCStore = defineStore("webrtc", {
             wsStore.sendMessage({
               content: JSON.stringify(candidate),
               type: Constant.MESSAGE_TRANS_TYPE,
+              fromUsername: wsStore.toUserAudioInfo.fromUsername,
+              avatar: wsStore.toUserAudioInfo.fromAvatar,
+              to: wsStore.toUserAudioInfo.toUuid,
+              from: wsStore.toUserAudioInfo.fromUuid,
             });
             // 本地缓存ice
             this.iceCandidates.push(event.candidate);
@@ -285,11 +289,6 @@ export const useWebRTCStore = defineStore("webrtc", {
       this.connectionState = "disconnected";
 
       this.isCaller = false;
-      this.imSate = {
-        videoCallModal: false, // 视频通话模态框
-        callName: "", // 通话对象名称
-        fromUserUuid: "", // 通话对象 uuid
-      }
     },
 
     // 获取视频流

src/views/im/chat/index.vue

@@ -879,25 +879,47 @@ const handleSendVideo = async (blob) =>{
 // ==== 1. 发起语音通话 ====
 const startAudioOnline = async (contentType, streamType) => {
   // 清理被呼叫者信息
-  wsStore.toUserInfo.sender = null;
+  wsStore.toUserAudioInfo = {
+    uuid:walletStore.account,
+    type: "user",
+    // 自己的信息
+    fromUuid: walletStore.account,
+    fromAvatar: walletStore.avatar,
+    fromUsername: wsStore.toUserInfo.nickname,
+    // 拨号目标信息
+    toUuid: wsStore.toUserInfo.uuid,
+    toUsername:wsStore.toUserInfo.sessionName,
+    toAvatar:wsStore.toUserInfo.avatar,
+    // 发送者信息
+    sender: {
+      uuid: walletStore.account,
+      avatar: walletStore.avatar,
+      nickname: wsStore.toUserInfo.nickname,
+    },
+  };
+  // wsStore.toUserInfo.sender = null;
   // 调起通话界面
   rtcStore.streamType = streamType
   rtcStore.imSate.videoCallModal = true;
   // 设置被呼叫对象
-  rtcStore.imSate.callAvatar = wsStore.toUserInfo.avatar;
-  rtcStore.imSate.callName = wsStore.toUserInfo.sessionName;
+  rtcStore.imSate.callAvatar = wsStore.toUserAudioInfo.toAvatar;
+  rtcStore.imSate.callName = wsStore.toUserAudioInfo.toUsername;
   // 设置呼叫者/被呼叫者
   rtcStore.isCaller = true;
-  // 通知被呼叫者
+  // 通知被呼叫者(接听者)
   wsStore.sendMessage({
     messageType: wsStore.toUserInfo.type == 'user'?MsgType.MESSAGE_TYPE_USER:MsgType.MESSAGE_TYPE_GROUP,
     contentType,
     type: Constant.MESSAGE_TRANS_TYPE,
-    avatar: walletStore.avatar,
+    // avatar: walletStore.avatar,
     content: JSON.stringify({
       content: walletStore.username,
       sender: walletStore.account,
-    })
+    }),
+    fromUsername: wsStore.toUserAudioInfo.fromUsername,
+    avatar: wsStore.toUserAudioInfo.fromAvatar,
+    to: wsStore.toUserAudioInfo.toUuid,
+    from: wsStore.toUserAudioInfo.fromUuid,
   });
   // 播放铃声
   soundVoice.play() 

src/views/im/components/CallController/index.vue

@@ -157,7 +157,6 @@ const statusText = computed(() => {
 // 接收消息处理
 function onMessage(message) {
   if (message.type !== Constant.MESSAGE_TRANS_TYPE) return;
-
   switch (message.contentType) {
     case Constant.DIAL_AUDIO_ONLINE:
       rtcStore.streamType = "audio";
@@ -198,6 +197,11 @@ async function acceptCall() {
         rtcStore.streamType !== "video"
           ? Constant.ACCEPT_AUDIO_ONLINE
           : Constant.ACCEPT_VIDEO_ONLINE,
+
+      fromUsername: wsStore.toUserAudioInfo.fromUsername,
+      avatar: wsStore.toUserAudioInfo.fromAvatar,
+      to: wsStore.toUserAudioInfo.toUuid,
+      from: wsStore.toUserAudioInfo.fromUuid,
     });
   } catch (err) {
     console.error("接听失败", err);
@@ -210,14 +214,19 @@ function rejectCall() {
   soundVoice.stop();
   stopTimer();
   rtcStore.cleanup();
-  const sender = wsStore.toUserInfo.sender
-    ? wsStore.toUserInfo.sender.uuid
+  const sender = wsStore.toUserAudioInfo.sender
+    ? wsStore.toUserAudioInfo.sender.uuid
     : walletStore.account;
   wsStore.sendMessage({
     messageType: MESSAGE_TYPE_USER,
     contentType: Constant.REJECT_AUDIO_ONLINE,
     type: Constant.MESSAGE_TRANS_TYPE,
     content: JSON.stringify({ content: "", sender }),
+    
+    fromUsername: wsStore.toUserAudioInfo.fromUsername,
+    avatar: wsStore.toUserAudioInfo.fromAvatar,
+    to: wsStore.toUserAudioInfo.toUuid,
+    from: wsStore.toUserAudioInfo.fromUuid,
   });
   rtcStore.imSate.videoCallModal = false;
   inCall.value = false;
@@ -227,14 +236,19 @@ function rejectCall() {
 function hangupCall() {
   soundVoice.stop();
   rtcStore.cleanup();
-  const sender = wsStore.toUserInfo.sender
-    ? wsStore.toUserInfo.sender.uuid
+  const sender = wsStore.toUserAudioInfo.sender
+    ? wsStore.toUserAudioInfo.sender.uuid
     : walletStore.account;
   wsStore.sendMessage({
     messageType: MESSAGE_TYPE_USER,
     contentType: Constant.CANCELL_AUDIO_ONLINE,
     type: Constant.MESSAGE_TRANS_TYPE,
     content: JSON.stringify({ content: "", sender,callDuration:callDurations.value }),
+    
+    fromUsername: wsStore.toUserAudioInfo.fromUsername,
+    avatar: wsStore.toUserAudioInfo.fromAvatar,
+    to: wsStore.toUserAudioInfo.toUuid,
+    from: wsStore.toUserAudioInfo.fromUuid,
   });
   stopTimer();
   rtcStore.imSate.videoCallModal = false;

src/views/im/hook/messagesHook.js

@@ -380,10 +380,14 @@ export const handleMessageHook = async (payload, wsStore) => {
     wsStore.toUserAudioInfo = {
       uuid: message.from,
       type: "user",
-      // 接收到来自谁的拨号请求
-      fromUuid: message.from,
-      fromAvatar: message.avatar,
-      fromUsername: message.fromUsername,
+      // 接收到来自谁的拨号请求信息
+      toUuid: message.from,
+      toAvatar: message.avatar,
+      toUsername: message.fromUsername,
+      // 自己的信息
+      fromUuid: message.to,
+      fromAvatar: walletStore.avatar,
+      fromUsername: wsStore.toUserInfo.nickname,
       // 发送者信息
       sender: {
         uuid: message.from,
@@ -391,17 +395,17 @@ export const handleMessageHook = async (payload, wsStore) => {
         nickname: message.fromUsername,
       },
     };
-    wsStore.toUserInfo = {
-      ...wsStore.toUserInfo,
-      uuid: message.from,
-      type: "user",
-      unReadNum: 1,
-      sender: {
-        uuid: message.from,
-        avatar: message.avatar,
-        nickname: message.fromUsername,
-      },
-    };
+    // wsStore.toUserInfo = {
+    //   ...wsStore.toUserInfo,
+    //   uuid: message.from,
+    //   type: "user",
+    //   unReadNum: 1,
+    //   sender: {
+    //     uuid: message.from,
+    //     avatar: message.avatar,
+    //     nickname: message.fromUsername,
+    //   },
+    // };
     // 调起通话界面
     const rtcStore = useWebRTCStore();
     rtcStore.streamType = message.contentType == Constant.DIAL_AUDIO_ONLINE ? 'audio' :'video'
@@ -537,11 +541,15 @@ export const handleMessageHook = async (payload, wsStore) => {
         .then(() => rtcStore.createAnswer())
         .then((answer) => {
           console.log('发送answer给呼叫者', answer)
-          // 发送给呼叫者
+          // 发送给被呼叫者（拨打者）
           wsStore.sendMessage({
             content: JSON.stringify(answer),
             type: Constant.MESSAGE_TRANS_TYPE,
             messageType: message.contentType,
+            fromUsername: wsStore.toUserAudioInfo.fromUsername,
+            avatar: wsStore.toUserAudioInfo.fromAvatar,
+            to: wsStore.toUserAudioInfo.toUuid,
+            from: wsStore.toUserAudioInfo.fromUuid,
           });
         })
         .catch((error) => {
@@ -564,6 +572,7 @@ const messageCallback = (contentType, state)=>{
 // 创建呼叫:开启语音电话
 const startAudioOnline = (video, state) => { 
   const rtcStore = useWebRTCStore();
+  const wsStore = useWebSocketStore();
   // 初始化webrtc连接
   rtcStore.initConnection(true, video);
   // 获取音视频数据流
@@ -579,11 +588,15 @@ const startAudioOnline = (video, state) => {
     })
   .then((offer) => {
       console.log('caller', offer)
-      // 发送offer给被呼叫者
+      // 发送offer给被呼叫者(接听者)
       state.sendMessage({
         contentType: video? Constant.VIDEO_ONLINE: Constant.AUDIO_ONLINE, // 消息内容类型
         content: JSON.stringify(offer),
         type: Constant.MESSAGE_TRANS_TYPE,
+        fromUsername: wsStore.toUserAudioInfo.fromUsername,
+        avatar: wsStore.toUserAudioInfo.fromAvatar,
+        to: wsStore.toUserAudioInfo.toUuid,
+        from: wsStore.toUserAudioInfo.fromUuid,
       });
     })
     .catch((error) => {