完善了通话与桌面预览功能

src/pages/file/index.vue

@@ -21,11 +21,21 @@
       </div>
 
       <div class="connect-section">
-        <div v-if="isConnected" class="connect-section">
+        <div class="connect-actions">
-          <div class="connect-item" @click="requestDesktop">
+          <div
+            class="connect-item"
+            :class="{ disabled: !isConnected, active: isDesktopActive }"
+            title="桌面预览"
+            @click="requestDesktop"
+          >
             <img src="/static/desktop.png" alt="桌面" />
           </div>
-          <div class="connect-item" @click="requestCall">
+          <div
+            class="connect-item"
+            :class="{ disabled: !isConnected, active: isCallActive }"
+            title="语音通话"
+            @click="requestCall"
+          >
             <img src="/static/phone.png" alt="通话" />
           </div>
         </div>
@@ -103,6 +113,8 @@ const receiveLoading = ref(false);
 const myId = ref("");
 const targetId = ref("");
 const isConnected = ref(false);
+const isDesktopActive = ref(false);
+const isCallActive = ref(false);
 // 文件系统相关
 const selectedLocalFiles = ref<string[]>([]);
 const selectedRemoteFiles = ref<string[]>([]);
@@ -112,9 +124,19 @@ onMounted(() => {
 });
 
 const requestDesktop = () => {
+  if (!isConnected.value) return;
+  if (isDesktopActive.value) {
+    peer.endMedia(sign2peerid(targetId.value), "desktop");
+    return;
+  }
   peer.requestDesktop(targetId.value);
 };
 const requestCall = () => {
+  if (!isConnected.value) return;
+  if (isCallActive.value) {
+    peer.endMedia(sign2peerid(targetId.value), "call");
+    return;
+  }
   peer.requestCall(targetId.value);
 };
 const shareUrl = async () => {
@@ -233,6 +255,8 @@ onMounted(() => {
 
   peer.on("peer-disconnected", ((event: CustomEvent) => {
     isConnected.value = peer.remoteConnection?.open;
+    isDesktopActive.value = false;
+    isCallActive.value = false;
     notification.error({
       message: event.detail.peer + "连接已断开",
     });
@@ -244,6 +268,36 @@ onMounted(() => {
     });
     console.error("连接错误:", event.detail);
   }) as EventListener);
+
+  peer.on("stream", ((event: CustomEvent) => {
+    if (event.detail.peerId !== sign2peerid(targetId.value)) return;
+    if (event.detail.type === "desktop") {
+      isDesktopActive.value = true;
+    } else if (event.detail.type === "call") {
+      isCallActive.value = true;
+    }
+  }) as EventListener);
+
+  peer.on("desktop-started", ((event: CustomEvent) => {
+    if (event.detail.peerId === sign2peerid(targetId.value)) {
+      isDesktopActive.value = true;
+    }
+  }) as EventListener);
+
+  peer.on("call-started", ((event: CustomEvent) => {
+    if (event.detail.peerId === sign2peerid(targetId.value)) {
+      isCallActive.value = true;
+    }
+  }) as EventListener);
+
+  peer.on("media-ended", ((event: CustomEvent) => {
+    if (event.detail.peerId !== sign2peerid(targetId.value)) return;
+    if (event.detail.type === "desktop") {
+      isDesktopActive.value = false;
+    } else if (event.detail.type === "call") {
+      isCallActive.value = false;
+    }
+  }) as EventListener);
 });
 </script>
 
@@ -284,11 +338,31 @@ onMounted(() => {
 .connect-item:hover {
   background: #cae5f9;
 }
+.connect-item.active {
+  background: #b7eb8f;
+  border-color: #52c41a;
+}
+.connect-item.active:hover {
+  background: #95de64;
+}
+.connect-item.disabled {
+  background: #f0f0f0;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.connect-item.disabled:hover {
+  background: #f0f0f0;
+}
+.connect-item.disabled img {
+  filter: grayscale(1);
+}
 .connect-item img {
   width: 100%;
   height: 100%;
 }
 
+.connect-actions,
 .connect-section {
   display: flex;
   gap: 10px;

src/pages/file/item/desptopView.vue

@@ -1,10 +1,14 @@
 <template>
   <div
     class="desktop-view-wrapper"
-    :class="{ 'is-collapsed': isCollapsed, 'has-stream': !!stream }"
+    :class="{
+      'is-collapsed': isCollapsed,
+      'has-stream': hasMedia,
+      'has-call-only': !!callStream && !desktopStream,
+    }"
   >
-    <div class="collapse-header" v-if="stream" @click="toggleCollapse">
+    <div class="collapse-header" v-if="hasMedia" @click="toggleCollapse">
-      <span>远程桌面{{ isCollapsed ? "(已收起)" : "" }}</span>
+      <span>{{ headerTitle }}{{ isCollapsed ? "(已收起)" : "" }}</span>
       <a-button type="link">
         <template #icon>
           <UpOutlined v-if="!isCollapsed" />
@@ -12,32 +16,46 @@
         </template>
       </a-button>
     </div>
-    <div class="desktop-view" :class="{ 'is-fullscreen': isFullscreen }">
+    <div
+      v-if="desktopStream"
+      class="desktop-view"
+      :class="{ 'is-fullscreen': isFullscreen }"
+    >
       <div class="video-container" ref="videoContainer">
         <video ref="videoRef" autoplay playsinline></video>
-        <div class="controls" v-if="stream">
+        <div class="controls">
           <a-button
             type="primary"
             ghost
-            :icon="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"
             @click="toggleFullscreen"
           >
             {{ isFullscreen ? "退出全屏" : "全屏" }}
           </a-button>
+          <a-button danger ghost @click="endDesktop">结束桌面</a-button>
         </div>
-        <div v-if="!stream" class="no-signal">
-          <a-empty description="等待远程桌面共享..." />
       </div>
     </div>
+    <div v-if="callStream" class="call-view">
+      <audio ref="audioRef" autoplay playsinline></audio>
+      <div class="call-info">
+        <PhoneOutlined />
+        <span>语音通话中</span>
+      </div>
+      <div class="call-controls">
+        <a-button ghost @click="toggleCallMuted">
+          {{ isCallMuted ? "取消静音" : "静音" }}
+        </a-button>
+        <a-button danger ghost @click="endCall">结束通话</a-button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { computed, nextTick, ref, onMounted, onUnmounted } from "vue";
 import { peer } from "../utils/peer";
 import { message } from "ant-design-vue";
-import { UpOutlined, DownOutlined } from "@ant-design/icons-vue";
+import { UpOutlined, DownOutlined, PhoneOutlined } from "@ant-design/icons-vue";
 
 const props = defineProps<{
   peerId: string;
@@ -59,10 +77,20 @@ interface MediaEndedEvent extends CustomEvent {
 }
 
 const videoRef = ref<HTMLVideoElement | null>(null);
+const audioRef = ref<HTMLAudioElement | null>(null);
 const videoContainer = ref<HTMLElement | null>(null);
-const stream = ref<MediaStream | null>(null);
+const desktopStream = ref<MediaStream | null>(null);
+const callStream = ref<MediaStream | null>(null);
 const isFullscreen = ref(false);
 const isCollapsed = ref(false);
+const isCallMuted = ref(false);
+
+const hasMedia = computed(() => !!desktopStream.value || !!callStream.value);
+const headerTitle = computed(() => {
+  if (desktopStream.value && callStream.value) return "远程桌面与通话";
+  if (desktopStream.value) return "远程桌面";
+  return "语音通话";
+});
 
 // 切换收起/展开状态
 const toggleCollapse = () => {
@@ -70,13 +98,27 @@ const toggleCollapse = () => {
 };
 
 // 处理远程流
-const handleStream = (event: StreamEvent) => {
+const handleStream = async (event: StreamEvent) => {
   const { stream: remoteStream, type } = event.detail;
   if (props.peerId !== event.detail.peerId) return;
-  if (type === "desktop" && videoRef.value) {
+  if (type === "desktop") {
-    stream.value = remoteStream;
+    desktopStream.value = remoteStream;
-    videoRef.value.srcObject = remoteStream;
     isCollapsed.value = false; // 收到流时自动展开
+    await nextTick();
+    if (videoRef.value) {
+      videoRef.value.srcObject = remoteStream;
+    }
+  } else if (type === "call") {
+    callStream.value = remoteStream;
+    isCollapsed.value = false;
+    await nextTick();
+    if (audioRef.value) {
+      audioRef.value.srcObject = remoteStream;
+      audioRef.value.muted = isCallMuted.value;
+      audioRef.value.play().catch(() => {
+        message.warning("浏览器阻止了自动播放，请点击通话区域恢复声音");
+      });
+    }
   }
 };
 
@@ -85,11 +127,32 @@ const handleMediaEnded = (event: MediaEndedEvent) => {
   const { type } = event.detail;
   if (props.peerId !== event.detail.peerId) return;
   if (type === "desktop") {
-    stream.value = null;
+    desktopStream.value = null;
     if (videoRef.value) {
       videoRef.value.srcObject = null;
     }
     message.info("远程桌面共享已结束");
+  } else if (type === "call") {
+    callStream.value = null;
+    if (audioRef.value) {
+      audioRef.value.srcObject = null;
+    }
+    message.info("语音通话已结束");
+  }
+};
+
+const endDesktop = () => {
+  peer.endMedia(props.peerId, "desktop");
+};
+
+const endCall = () => {
+  peer.endMedia(props.peerId, "call");
+};
+
+const toggleCallMuted = () => {
+  isCallMuted.value = !isCallMuted.value;
+  if (audioRef.value) {
+    audioRef.value.muted = isCallMuted.value;
   }
 };
 
@@ -117,21 +180,27 @@ const handleFullscreenChange = () => {
   isFullscreen.value = !!document.fullscreenElement;
 };
 
+const streamListener: EventListener = (event) => {
+  handleStream(event as StreamEvent);
+};
+const mediaEndedListener: EventListener = (event) => {
+  handleMediaEnded(event as MediaEndedEvent);
+};
+
 onMounted(() => {
-  peer.on("stream", handleStream as EventListener);
+  peer.on("stream", streamListener);
-  peer.on("media-ended", handleMediaEnded as EventListener);
+  peer.on("media-ended", mediaEndedListener);
   document.addEventListener("fullscreenchange", handleFullscreenChange);
 });
 
 onUnmounted(() => {
-  peer.off("stream", handleStream as EventListener);
+  peer.off("stream", streamListener);
-  peer.off("media-ended", handleMediaEnded as EventListener);
+  peer.off("media-ended", mediaEndedListener);
   document.removeEventListener("fullscreenchange", handleFullscreenChange);
 
   // 清理视频流
-  if (stream.value) {
+  desktopStream.value?.getTracks().forEach((track) => track.stop());
-    stream.value.getTracks().forEach((track) => track.stop());
+  callStream.value?.getTracks().forEach((track) => track.stop());
-  }
 });
 </script>
 
@@ -152,6 +221,10 @@ onUnmounted(() => {
   height: 300px;
 }
 
+.desktop-view-wrapper.has-call-only {
+  height: 104px;
+}
+
 .desktop-view-wrapper.is-collapsed {
   height: 40px !important;
 }
@@ -199,20 +272,14 @@ video {
   z-index: 10;
   opacity: 0;
   transition: opacity 0.3s;
+  display: flex;
+  gap: 10px;
 }
 
 .video-container:hover .controls {
   opacity: 1;
 }
 
-.no-signal {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: #fff;
-}
-
 .is-fullscreen {
   position: fixed;
   top: 0;
@@ -222,6 +289,24 @@ video {
   z-index: 9999;
 }
 
+.call-view {
+  height: 64px;
+  padding: 0 16px;
+  background: #111;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid #2a2a2a;
+}
+
+.call-info,
+.call-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 :deep(.ant-empty-description) {
   color: #fff;
 }

src/pages/file/utils/peer.ts

@@ -15,6 +15,7 @@ import {
   confirmWin,
 } from "./common";
 
+type MediaType = "desktop" | "call";
 // 发送超时时间（毫秒）
 const SEND_TIMEOUT = 30000;
 
@@ -33,8 +34,9 @@ class Peer extends EventTarget {
     string,
     {
       connection: MediaConnection;
-      stream: MediaStream;
+      remoteStream: MediaStream | null;
-      type: "desktop" | "call";
+      localStream: MediaStream | null;
+      type: MediaType;
     }
   > = new Map();
   constructor(sign: string) {
@@ -102,7 +104,7 @@ class Peer extends EventTarget {
           }
 
           call.answer(stream);
-          self.setupMediaConnection(call, type);
+          self.setupMediaConnection(call, type, stream);
 
           self.dispatchEvent(
             new CustomEvent(
@@ -208,7 +210,7 @@ class Peer extends EventTarget {
         metadata: { type: "desktop" },
       });
 
-      this.setupMediaConnection(call, "desktop");
+      this.setupMediaConnection(call, "desktop", emptyStream);
 
       this.dispatchEvent(
         new CustomEvent("desktop-started", {
@@ -243,7 +245,7 @@ class Peer extends EventTarget {
         metadata: { type: "call" },
       });
 
-      this.setupMediaConnection(call, "call");
+      this.setupMediaConnection(call, "call", stream);
 
       this.dispatchEvent(
         new CustomEvent("call-started", {
@@ -261,26 +263,73 @@ class Peer extends EventTarget {
   }
 
   // 结束媒体连接
-  endMedia(peerId?: string) {
+  endMedia(peerId?: string, type?: MediaType) {
     if (peerId) {
-      this.endMediaConnection(peerId);
+      const mediaTypes: MediaType[] = type ? [type] : ["desktop", "call"];
+      mediaTypes.forEach((mediaType) => {
+        this.endMediaConnection(peerId, mediaType);
         if (this.remoteConnection) {
           this.send(
             {
-            type: MessageType.end_call,
+              type:
+                mediaType === "desktop"
+                  ? MessageType.end_desktop
+                  : MessageType.end_call,
               data: {
                 peerId,
               },
             },
             this.remoteConnection,
-        );
+          ).catch((error) => {
+            console.warn("send end media message error:", error);
+          });
         }
+      });
     } else {
       // 如果没有指定 peerId，结束所有连接
       this.endAllMediaConnections();
     }
   }
 
+  private getMediaKey(peerId: string, type: MediaType) {
+    return `${peerId}:${type}`;
+  }
+
+  private getMediaConnection(peerId: string, type: MediaType) {
+    return this.mediaConnections.get(this.getMediaKey(peerId, type));
+  }
+
+  hasMedia(peerId: string, type: MediaType) {
+    return !!this.getMediaConnection(peerId, type);
+  }
+
+  private updateMediaConnection(
+    peerId: string,
+    type: MediaType,
+    data: Partial<{
+      connection: MediaConnection;
+      remoteStream: MediaStream | null;
+      localStream: MediaStream | null;
+    }>,
+  ) {
+    const key = this.getMediaKey(peerId, type);
+    const current = this.mediaConnections.get(key);
+    const connection = data.connection || current?.connection;
+    if (!connection) return;
+    this.mediaConnections.set(key, {
+      connection,
+      remoteStream:
+        data.remoteStream !== undefined
+          ? data.remoteStream
+          : current?.remoteStream || null,
+      localStream:
+        data.localStream !== undefined
+          ? data.localStream
+          : current?.localStream || null,
+      type,
+    });
+  }
+
   private callbackMap: Map<string, (data: any) => void> = new Map();
   async send(
     data: Message,
@@ -384,9 +433,14 @@ class Peer extends EventTarget {
 
   private setupMediaConnection(
     call: MediaConnection,
-    type: "desktop" | "call",
+    type: MediaType,
+    localStream: MediaStream | null = null,
   ) {
     const peerId = call.peer;
+    this.updateMediaConnection(peerId, type, {
+      connection: call,
+      localStream,
+    });
 
     call.on("stream", (remoteStream: MediaStream) => {
       console.log("stream", remoteStream);
@@ -395,10 +449,9 @@ class Peer extends EventTarget {
       const hasAudio = remoteStream.getAudioTracks().length > 0;
 
       if ((type === "desktop" && hasVideo) || (type === "call" && hasAudio)) {
-        this.mediaConnections.set(peerId, {
+        this.updateMediaConnection(peerId, type, {
           connection: call,
-          stream: remoteStream,
+          remoteStream,
-          type,
         });
 
         this.dispatchEvent(
@@ -414,16 +467,18 @@ class Peer extends EventTarget {
     });
 
     call.on("close", () => {
-      this.endMediaConnection(peerId);
+      this.endMediaConnection(peerId, type);
     });
   }
 
-  private endMediaConnection(peerId: string) {
+  private endMediaConnection(peerId: string, type: MediaType) {
-    const mediaConn = this.mediaConnections.get(peerId);
+    const key = this.getMediaKey(peerId, type);
+    const mediaConn = this.mediaConnections.get(key);
     if (mediaConn) {
+      this.mediaConnections.delete(key);
       mediaConn.connection.close();
-      mediaConn.stream.getTracks().forEach((track) => track.stop());
+      mediaConn.remoteStream?.getTracks().forEach((track) => track.stop());
-      this.mediaConnections.delete(peerId);
+      mediaConn.localStream?.getTracks().forEach((track) => track.stop());
 
       this.dispatchEvent(
         new CustomEvent("media-ended", {
@@ -438,8 +493,8 @@ class Peer extends EventTarget {
 
   // 结束所有媒体连接
   endAllMediaConnections() {
-    for (const peerId of this.mediaConnections.keys()) {
+    for (const mediaConn of Array.from(this.mediaConnections.values())) {
-      this.endMediaConnection(peerId);
+      this.endMediaConnection(mediaConn.connection.peer, mediaConn.type);
     }
   }
 
@@ -629,9 +684,10 @@ class Peer extends EventTarget {
           break;
         case MessageType.end_call:
         case MessageType.end_desktop:
-          if (remoteD?.peerId) {
+          this.endMediaConnection(
-            this.endMediaConnection(remoteD.peerId);
+            conn.peer,
-          }
+            data.type === MessageType.end_desktop ? "desktop" : "call",
+          );
           break;
         default:
           resData.type = MessageType.error;