1

src/stores/modules/webSocketStore.js

@@ -81,11 +81,13 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         from: walletStore.account,
         to: this.toUserInfo.uuid,
       }; 
+      console.log("发送消息=", data)
       try {
         const MessageType = protobuf.lookupType("protocol.Message");
         const messagePB = MessageType.create(data);
         const buffer = MessageType.encode(messagePB).finish();
         this.socket.send(buffer);
+        // 发送完成后：添加头像
         data.avatar = walletStore.avatar;
         setMessageHook(data, this);
         return true;

src/stores/modules/webrtcStore.js

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { MSG_TYPE, MESSAGE_TYPE_USER } from "@/common/constant/msgType";
+import { MSG_TYPE, MESSAGE_TYPE_USER, MESSAGE_TYPE_GROUP } from "@/common/constant/msgType";
 import { useWebSocketStore } from "@/stores/modules/webSocketStore";
 
 export const useWebRTCStore = defineStore("webrtc", {
@@ -24,13 +24,12 @@ export const useWebRTCStore = defineStore("webrtc", {
         // 可以添加更多 STUN/TURN 服务器
       ],
     },
-  }),
-  webSocketStore: useWebSocketStore(),
+  }), 
   actions: {
     // 初始化 WebRTC 连接
-    initConnection(MESSAGE_TYPE, data) {
+    initConnection(MESSAGE_TYPE) {
       this.cleanup();
-
+      const wsStore = useWebSocketStore();
       try {
         this.peerConnection = new RTCPeerConnection();
 
@@ -42,12 +41,11 @@ export const useWebRTCStore = defineStore("webrtc", {
                 type: "offer_ice",
                 iceCandidate: event.candidate,
               };
-              this.$webSocketStore.sendMessage({
+              wsStore.sendMessage({
                 contentType: MSG_TYPE.AUDIO_ONLINE,
                 type: "webrtc",
                 messageType: MESSAGE_TYPE,
                 content: JSON.stringify(candidate),
-                ...data,
               });
             }
             if (MESSAGE_TYPE === MESSAGE_TYPE_GROUP) {
@@ -55,15 +53,18 @@ export const useWebRTCStore = defineStore("webrtc", {
             }
           }
         };
-
+        // 监听 ICE 状态变化
         this.peerConnection.onconnectionstatechange = () => {
           this.connectionState = this.peerConnection.connectionState;
         };
 
+        // 当连接成功后，从里面获取语音视频流: 监听 ICE candidate:包含语音视频流
         this.peerConnection.ontrack = (event) => {
+          // 添加远程媒体流
           if (!this.remoteStream) {
             this.remoteStream = new MediaStream();
           }
+          // 添加远程媒体流
           event.streams[0].getTracks().forEach((track) => {
             this.remoteStream.addTrack(track);
           });

src/views/im/chat/index.vue

@@ -401,13 +401,11 @@ const beforeRead = (file) => {
   return true;
 };
 
+
+// 初始化webrtc连接
+rtcStore.initConnection(MESSAGE_TYPE_USER);
 // 开启语音电话
 const startAudioOnline = async () => {
-  // 初始化webrtc连接
-  rtcStore.initConnection(MESSAGE_TYPE_USER, {
-    fromUsername: walletStore.username,
-    from: walletStore.account,
-  });
   // 获取本地媒体流并添加到连接
   try {
     const stream = await navigator.mediaDevices.getUserMedia({
@@ -419,8 +417,7 @@ const startAudioOnline = async () => {
     console.error("获取媒体流失败:", error);
   }
   //  创建呼叫
-  try {
-    await startLocalStream();
+  try { 
     const offer = await rtcStore.createOffer();
     // 发送 offer 给对等端
     let data = {