11

src/stores/modules/webSocketStore.js

@@ -143,11 +143,10 @@ export const useWebSocketStore = defineStore("webSocketStore", {
       this.socket = new WebSocket(
         `ws://192.168.0.59:8888/api/v1/socket.io?user=${userUuid}`
       );
-
+      // 连接成功
       this.socket.onopen = () => {
         this.startHeartbeat();
         console.log("WebSocket连接成功");
-        this.webrtcConnection();
       };
 
       this.socket.onmessage = (event) => {
@@ -201,34 +200,6 @@ export const useWebSocketStore = defineStore("webSocketStore", {
 
       reader.readAsArrayBuffer(data);
     },
-    // 处理WebRTC消息
-    webrtcConnection() {
-      if (!this.peer) return;
-
-      this.peer.onicecandidate = (e) => {
-        if (e.candidate && this.socket) {
-          const candidate = {
-            type: "answer_ice",
-            iceCandidate: e.candidate,
-          };
-          const message = {
-            content: JSON.stringify(candidate),
-            type: Constant.MESSAGE_TRANS_TYPE,
-          };
-          this.sendMessage(message);
-        }
-      };
-
-      this.peer.ontrack = (e) => {
-        if (e && e.streams) {
-          const remoteVideo = document.getElementById("remoteVideoReceiver");
-          const remoteAudio = document.getElementById("audioPhone");
-
-          if (remoteVideo) remoteVideo.srcObject = e.streams[0];
-          if (remoteAudio) remoteAudio.srcObject = e.streams[0];
-        }
-      };
-    },
     // 断线重连
     reconnect() {
       if (

src/stores/modules/webrtcStore.js

@@ -36,21 +36,22 @@ export const useWebRTCStore = defineStore("webrtc", {
         // 设置事件监听: 对等方收到ice信息后，通过调用 addIceCandidate 将接收的候选者信息传递给浏览器的ICE代理
         this.peerConnection.onicecandidate = (event) => {
           if (event.candidate) {
-            if (MESSAGE_TYPE === MESSAGE_TYPE_USER) {
-              let candidate = {
-                type: "offer_ice",
-                iceCandidate: event.candidate,
-              };
-              wsStore.sendMessage({
-                contentType: MSG_TYPE.AUDIO_ONLINE,
-                type: "webrtc",
-                messageType: MESSAGE_TYPE,
-                content: JSON.stringify(candidate),
-              });
-            }
-            if (MESSAGE_TYPE === MESSAGE_TYPE_GROUP) {
-              this.iceCandidates.push(event.candidate);
-            }
+            // if (MESSAGE_TYPE === MESSAGE_TYPE_USER) {
+            //   let candidate = {
+            //     type: "offer_ice",
+            //     iceCandidate: event.candidate,
+            //   };
+            //   wsStore.sendMessage({
+            //     contentType: MSG_TYPE.AUDIO_ONLINE,
+            //     type: "webrtc",
+            //     messageType: MESSAGE_TYPE,
+            //     content: JSON.stringify(candidate),
+            //   });
+            // }
+            // if (MESSAGE_TYPE === MESSAGE_TYPE_GROUP) {
+           
+            // }
+            this.iceCandidates.push(event.candidate);
           }
         };
         // 监听 ICE 状态变化
@@ -129,6 +130,8 @@ export const useWebRTCStore = defineStore("webrtc", {
       }
 
       try {
+       
+        // 设置远程描述
         await this.peerConnection.setRemoteDescription(desc);
       } catch (error) {
         console.error("设置远程 Description 失败:", error);
@@ -141,7 +144,6 @@ export const useWebRTCStore = defineStore("webrtc", {
       if (!this.peerConnection) {
         throw new Error("WebRTC 连接未初始化");
       }
-
       try {
         await this.peerConnection.addIceCandidate(candidate);
       } catch (error) {

src/views/im/chat/index.vue

@@ -427,14 +427,9 @@ const beforeRead = (file) => {
 
 // 初始化webrtc连接
 rtcStore.initConnection(MESSAGE_TYPE_USER);
-// 开启语音电话
+//  创建呼叫:开启语音电话
 const startAudioOnline = async () => {
   showVoiceCall.value = true;
-  // 初始化webrtc连接
-  rtcStore.initConnection(MESSAGE_TYPE_USER, {
-    fromUsername: walletStore.username,
-    from: walletStore.account,
-  });
   // 获取本地媒体流并添加到连接
   try {
     const stream = await navigator.mediaDevices.getUserMedia({
@@ -458,10 +453,6 @@ const startAudioOnline = async () => {
   } catch (error) {
     console.error("发起呼叫失败:", error);
   }
-
-  // rtcStore.addLocalStream(stream)
-  //   // 流获取:再进行offer创建
-  // const   webRTCStore.createOffer()
 };
 
 const handleHangup = () => {

src/views/im/hook/messagesHook.js

@@ -1,14 +1,14 @@
+import { useWebRTCStore } from "@/stores/modules/webrtcStore";
 import { MSG_TYPE, MSG_TYPE_MAP } from "@/common/constant/msgType";
 import * as Constant from "@/common/constant/Constant";
 
 // 发送消息处理
-export const setMessageHook = (message, state) => { 
+export const setMessageHook = (message, state) => {
   // 文本消息
   if (message.contentType == MSG_TYPE.TEXT) {
     state.messages.push({
       ...message,
       toUsername: message.friendUsername,
-      
     });
   }
 
@@ -71,11 +71,64 @@ export const handleMessageHook = (message, state) => {
     });
   }
   // 音频通话
-  if (message.contentType === MSG_TYPE.AUDIO_ONLINE) {
-     if (message.contentType >= Constant.DIAL_MEDIA_START && messagePB.contentType <= Constant.DIAL_MEDIA_END) {
-            this.dealMediaCall(messagePB);
-            return;
-        }
-        const { type, sdp, iceCandidate } = JSON.parse(messagePB.content);
+  if (message.type === Constant.MESSAGE_TRANS_TYPE) {
+    if (
+      message.contentType >= Constant.DIAL_MEDIA_START &&
+      message.contentType <= Constant.DIAL_MEDIA_END
+    ) {
+      // 媒体通话处理
+      // dealMediaCall(message);
+      return;
+    }
+    const rtcStore = useWebRTCStore();
+    const { type, sdp, iceCandidate } = JSON.parse(message.content);
+    // 接收answer:设置对端sdp
+    if (type === "answer") {
+      const answerSdp = new RTCSessionDescription({ type, sdp });
+      rtcStore.setRemoteDescription(answerSdp);
+    }
+    // 添加answer ice
+    if (type === "answer_ice") {
+      rtcStore.addIceCandidate(iceCandidate);
+    }
+    // 
+    if (type === "offer_ice") {
+      rtcStore.addIceCandidate(iceCandidate);
+    }
+    // 响应对端offer
+    if (type === "offer") {
+      // 检查媒体权限是否开启
+
+      // let preview = null;
+      let video = false;
+      if (message.contentType === Constant.VIDEO_ONLINE) {
+        // preview = document.getElementById("localVideoReceiver");
+        video = true;
+        // // 屏幕共享
+      }
+
+      if (message.contentType === Constant.AUDIO_ONLINE) {
+        // preview = document.getElementById("audioPhone");
+        // 音频电话
+      }
+      // 获取媒体流
+      navigator.mediaDevices
+        .getUserMedia({
+          audio: true,
+          video: video,
+        })
+        .then(async (stream) => {
+          // preview.srcObject = stream;
+          rtcStore.addLocalStream(stream);
+          const answer = await rtcStore.createOffer();
+          // 发送 offer 给对等端
+          let data = {
+            content: JSON.stringify(answer),
+            type: Constant.MESSAGE_TRANS_TYPE,
+            messageType: message.contentType,
+          };
+          state.sendMessage(data);
+        });
+    }
   }
 };