11

src/views/im/chat/index.vue

@@ -20,9 +20,7 @@
         <div class="box">
           <div
             class="list-item"
-            :class="
-              isSender(item.toUsername) ? '' : 'flex-reverse'
-            "
+            :class="isSender(item.toUsername) ? '' : 'flex-reverse'"
           >
             <!-- 头像 -->
             <van-image
@@ -42,9 +40,12 @@
               </div>
 
               <!-- 图片消息 -->
-              <div class="img-message" v-else-if="item.contentType === MSG_TYPE.IMAGE">
+              <div
+                class="content"
+                v-else-if="item.contentType === MSG_TYPE.IMAGE"
+              >
                 <van-image
-                  :src="item?.localUrl ||  IM_PATH + item.url"
+                  :src="item?.localUrl || IM_PATH + item.url"
                   alt="图片"
                   style="max-width: 120px; border-radius: 8px"
                 />
@@ -76,7 +77,10 @@
                   controls
                   style="width: 200px"
                 /> -->
-                <messageAudio :src="item?.localUrl ||  IM_PATH + item.url" :isSender="isSender(item.toUsername)"/> 
+                <messageAudio
+                  :src="item?.localUrl || IM_PATH + item.url"
+                  :isSender="isSender(item.toUsername)"
+                />
               </div>
 
               <!-- 其他未知类型 -->
@@ -176,8 +180,8 @@ import { Capacitor } from "@capacitor/core";
 import { MSG_TYPE, MESSAGE_TYPE_USER } from "@/common/constant/msgType";
 import  messageAudio from "@/views/im/components/messageAudio/index.vue";
 import { showToast } from 'vant';
-import {useWebRTCStore} from "@/stores/modules/webrtcStore";
-
+import {useWebRTCStore} from "@/stores/modules/webrtcStore"; 
+import * as Constant from "@/common/constant/Constant";
 
 const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
 // 路由 & store
@@ -185,7 +189,7 @@ const router = useRouter();
 const route = useRoute();
 const wsStore = useWebSocketStore();
 const walletStore = useWalletStore();
-const webRTCStore = useWebRTCStore()
+const rtcStore = useWebRTCStore();
 
 // 输入框文本
 const text = ref("");
@@ -322,7 +326,6 @@ const stopRecording = async () => {
   });
 };
 
-
 // 发送音频消息
 const sendAudioMessage = async (event) => {
   if (isTouchDevice.value && event.type === "mouseup") {
@@ -368,8 +371,8 @@ const sendMessage = () => {
 };
 
 // 发送图片消息
-const afterRead = async (file) => { 
-  const arrayBuffer = await file.file.arrayBuffer(); 
+const afterRead = async (file) => {
+  const arrayBuffer = await file.file.arrayBuffer();
   const message = {
     content: text.value, // 如果有文本内容
     contentType: MSG_TYPE.IMAGE, // 音频消息类型
@@ -378,7 +381,7 @@ const afterRead = async (file) => {
     fileSuffix: file.type, // 使用webm后缀更准确
     file: new Uint8Array(arrayBuffer), // 将Uint8Array转为普通数组
   };
- 
+
   wsStore.sendMessage(message);
 };
 // 图片类型
@@ -395,15 +398,41 @@ const beforeRead = (file) => {
 };
 
 // 开启语音电话
-const startAudioOnline = () => { 
-  webRTCStore.initConnection(
-    MESSAGE_TYPE_USER,
-    {
-      fromUsername: walletStore.username,
-      from: walletStore.account,
-      to:  route.query.uuid,
-    }
-  )
+const startAudioOnline = async () => {
+  // 初始化webrtc连接
+  rtcStore.initConnection(MESSAGE_TYPE_USER, {
+    fromUsername: walletStore.username,
+    from: walletStore.account,
+    to: route.query.uuid,
+  });
+  // 获取本地媒体流并添加到连接
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: true,
+      video: true,
+    });
+    rtcStore.addLocalStream(stream);
+  } catch (error) {
+    console.error("获取媒体流失败:", error);
+  }
+  //  创建呼叫
+  try {
+    await startLocalStream();
+    const offer = await rtcStore.createOffer();
+    // 发送 offer 给对等端
+    let data = {
+      contentType: Constant.AUDIO_ONLINE, // 消息内容类型
+      content: JSON.stringify(offer),
+      type: Constant.MESSAGE_TRANS_TYPE, // 消息传输类型
+    };
+    wsStore.sendMessage(data);
+  } catch (error) {
+    console.error("发起呼叫失败:", error);
+  }
+
+  // rtcStore.addLocalStream(stream)
+  //   // 流获取:再进行offer创建
+  // const   webRTCStore.createOffer()
 };
 
 // 时间格式化