From 996dc3778daca7b3804b021e0054332ac201eead Mon Sep 17 00:00:00 2001
From: whm <973418690@qq.com>
Date: Wed, 25 Mar 2026 16:01:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E7=9B=B4=E6=92=AD=EF=BC=9A?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BF=A1=E4=BB=A4=E8=AF=AF=E6=96=AD=EF=BC=88?=
 =?UTF-8?q?onclose=20=E6=8F=90=E7=A4=BA=E4=B8=8E=E4=B8=A5=E6=A0=BC?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=20onUnmounted=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Made-with: Cursor
---
 admin/src/utils/liveWebRTC.js           | 23 ++++++++++++++++++++---
 admin/src/views/sites/LiveBroadcast.vue | 11 +++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/admin/src/utils/liveWebRTC.js b/admin/src/utils/liveWebRTC.js
index c217bc6..dacd96d 100644
--- a/admin/src/utils/liveWebRTC.js
+++ b/admin/src/utils/liveWebRTC.js
@@ -33,6 +33,8 @@ export function startPublishing(opts = {}) {
   const ws = new WebSocket(wsUrl)
   const pc = new RTCPeerConnection({ iceServers: defaultIce })
   let stream = null
+  /** 本地主动 stop / 摄像头失败关闭，避免 onclose 覆盖真实错误提示 */
+  let closedByLocal = false
 
   const send = (o) => {
     if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(o))
@@ -56,7 +58,14 @@ export function startPublishing(opts = {}) {
       send({ type: 'offer', sdp: offer.sdp })
       onStatus('已发起推流协商，等待服务端应答…')
     } catch (err) {
-      onStatus(err.message || '无法打开摄像头')
+      const name = err && err.name
+      let tip = err.message || '无法打开摄像头'
+      if (name === 'NotAllowedError' || name === 'PermissionDeniedError') {
+        tip = '已拒绝摄像头权限：请在浏览器地址栏允许摄像头，并确认本页为 HTTPS。'
+      } else if (name === 'NotFoundError') {
+        tip = '未检测到摄像头设备。'
+      }
+      onStatus(tip)
       stop()
     }
   }
@@ -86,10 +95,18 @@ export function startPublishing(opts = {}) {
     }
   }
 
-  ws.onerror = () => onStatus('信令连接失败（请确认已登录且 Nginx 已配置 WebSocket）')
-  ws.onclose = () => onStatus('信令已断开')
+  ws.onerror = () => {
+    if (!closedByLocal) {
+      onStatus('信令连接失败（请确认已登录且 Nginx 已配置 WebSocket）')
+    }
+  }
+  ws.onclose = () => {
+    if (closedByLocal) return
+    onStatus('信令已断开：服务端关闭连接或网络中断。若刚能连上即断，请查服务端日志或配置 TURN（LIVE_ICE_SERVERS）。')
+  }
 
   function stop() {
+    closedByLocal = true
     try {
       ws.close()
     } catch (_) {}
diff --git a/admin/src/views/sites/LiveBroadcast.vue b/admin/src/views/sites/LiveBroadcast.vue
index 1351552..ff2b61f 100644
--- a/admin/src/views/sites/LiveBroadcast.vue
+++ b/admin/src/views/sites/LiveBroadcast.vue
@@ -20,6 +20,7 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
 import { useAuthStore } from '../../stores/auth'
 import { startPublishing } from '../../utils/liveWebRTC'
 
@@ -54,11 +55,21 @@ function stop() {
   status.value = '已停止'
 }
 
+function onBeforeUnload() {
+  session.value?.stop()
+}
+
 onMounted(() => {
   document.title = '视频直播开播 - 管理后台'
+  window.addEventListener('beforeunload', onBeforeUnload)
 })
 
 onUnmounted(() => {
+  window.removeEventListener('beforeunload', onBeforeUnload)
+})
+
+/** 离开本页时再结束推流；勿在 onUnmounted 里 stop，避免 Vue 开发严格模式双挂载误关 WebSocket */
+onBeforeRouteLeave(() => {
   stop()
 })
 </script>