From 355a26051d08aacf257dc88fb2a61f338845720b Mon Sep 17 00:00:00 2001
From: liqi <qiqiqiyoucili@163.com>
Date: Fri, 11 Jul 2025 08:15:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=201.=20=E6=9C=AC?=
 =?UTF-8?q?=E5=9C=B0=E8=A7=86=E9=A2=91=E6=B5=81=E8=83=BD=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E5=88=B0=E4=BA=86=202.=20=E6=89=BE=E5=88=B0=E4=BA=86=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E8=BF=9E=E6=8E=A5=E9=94=99=E8=AF=AF=E7=9A=84=E5=8E=9F?=
 =?UTF-8?q?=E5=9B=A0=EF=BC=9A=E6=8C=82=E6=96=AD=E5=90=8E=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=E9=BA=A6=E5=85=8B=E9=A3=8E=E5=92=8C=E8=A7=86=E9=A2=91=E5=B9=B6?=
 =?UTF-8?q?=E6=B2=A1=E6=9C=89=E5=85=B3=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

现有问题：
1. 需要在挂断后关闭麦克风和摄像头
2. 没有渲染远程流推送的视频
---
 src/composables/useWebRTC.js    | 47 ++++++++++++++++++++++++---------
 src/composables/useWebSocket.js |  1 +
 vite.config.js                  |  4 +--
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/composables/useWebRTC.js b/src/composables/useWebRTC.js
index cdcafdc..a199f70 100644
--- a/src/composables/useWebRTC.js
+++ b/src/composables/useWebRTC.js
@@ -139,20 +139,26 @@ export function useWebRTC() {
             }
         }
 
-        // 接收远程流 - 修复开始
+        // 接收远程流 - 修复轨道处理逻辑
         pc.ontrack = (event) => {
-            console.log("📹 接收到远程轨道:", event.track.kind)
+            console.log("📹 接收到远程轨道:", event.track.kind, "id:", event.track.id)
 
             // 如果还没有远程流，创建一个新的MediaStream
             if (!remoteStream.value) {
+                console.log("🆕 创建新的远程流")
                 remoteStream.value = new MediaStream()
             }
 
-            // 将轨道添加到流中
-            remoteStream.value.addTrack(event.track)
-            console.log("✅ 远程流已更新，轨道数:", remoteStream.value.getTracks().length)
+            // 确保轨道尚未添加
+            const existingTrack = remoteStream.value.getTracks().find(t => t.id === event.track.id)
+            if (!existingTrack) {
+                remoteStream.value.addTrack(event.track)
+                console.log("✅ 添加远程轨道成功，轨道数:", remoteStream.value.getTracks().length)
+                console.log("✅ 添加远程轨道成功:", remoteStream.value)
+            } else {
+                console.log("⏭️ 轨道已存在，跳过添加")
+            }
         }
-        // 修复结束
 
         // 连接状态变化
         pc.onconnectionstatechange = () => {
@@ -218,7 +224,11 @@ export function useWebRTC() {
         if (localStream.value) {
             console.log("➕ 添加本地流到PeerConnection")
             localStream.value.getTracks().forEach((track) => {
-                pc.addTrack(track, localStream.value)
+                // 确保只添加活跃的轨道
+                if (track.readyState === 'live') {
+                    pc.addTrack(track, localStream.value)
+                    console.log(`✅ 添加 ${track.kind} 轨道到连接`)
+                }
             })
         }
 
@@ -349,27 +359,41 @@ export function useWebRTC() {
         }
     }
 
-    // 关闭连接
+    // 关闭连接 - 彻底释放资源
     const closeConnection = () => {
         console.log("🔄 关闭WebRTC连接")
 
-        // 停止所有媒体轨道
+        // 停止所有媒体轨道并释放设备
         if (localStream.value) {
+            console.log("📹 停止本地流轨道")
             localStream.value.getTracks().forEach(track => {
-                track.stop()
+                console.log(`⏹ 停止轨道: ${track.kind} (${track.id})`)
+                track.stop() // 停止轨道以释放设备
                 track.enabled = false
             })
             localStream.value = null
         }
 
+        // 清除远程流
+        if (remoteStream.value) {
+            console.log("📹 清除远程流")
+            remoteStream.value.getTracks().forEach(track => {
+                console.log(`⏹ 停止远程轨道: ${track.kind} (${track.id})`)
+                track.stop()
+            })
+            remoteStream.value = null
+        }
+
         // 关闭对等连接
         if (peerConnection.value) {
+            console.log("🔌 关闭对等连接")
             peerConnection.value.close()
             peerConnection.value = null
         }
 
         // 清理重连计时器
         if (reconnectTimer) {
+            console.log("⏲ 清除重连计时器")
             clearTimeout(reconnectTimer)
             reconnectTimer = null
         }
@@ -383,9 +407,6 @@ export function useWebRTC() {
 
         // 清空候选队列
         iceCandidateQueue.value = []
-
-        // 清除远程流
-        remoteStream.value = null
     }
 
     return {
diff --git a/src/composables/useWebSocket.js b/src/composables/useWebSocket.js
index 8d0ad60..5d3bd69 100644
--- a/src/composables/useWebSocket.js
+++ b/src/composables/useWebSocket.js
@@ -20,6 +20,7 @@ export function useWebSocket() {
     chatStore.connectionStatus = "connecting"
 
     try {
+      // const wsUrl = import.meta.env.VITE_WS_URL || "wss://g-ws.nailaoyun.cn/ws"
       const wsUrl = import.meta.env.VITE_WS_URL || "ws://localhost:12080/ws"
       socket.value = new WebSocket(wsUrl)
 
diff --git a/vite.config.js b/vite.config.js
index 2e9bd1a..8439d0f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,12 +15,12 @@ export default defineConfig({
         }
     },
     server: {
-        port: 8888,
+        port: 18888,
         proxy: {
             '/api': {
                 // target: 'http://127.0.0.1:18007/api/',
                 target: 'http://127.0.0.1:12080',
-                // target: 'http://g-ws.nailaoyun.cn',
+                // target: 'https://g-ws.nailaoyun.cn',
                 changeOrigin: true,
                 rewrite: (path) => path.replace(/^\/api/, '')
             }