From 0a76bed471564c0548691fa5e23df2cc6d9831b9 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 21 Jun 2026 07:55:13 -0700
Subject: [PATCH] =?UTF-8?q?fix(im):=20=E6=B8=85=E7=90=86=20RTC=20=E5=AA=92?=
 =?UTF-8?q?=E4=BD=93=E5=85=83=E7=B4=A0=E5=8D=B8=E8=BD=BD=E6=97=B6=E7=9A=84?=
 =?UTF-8?q?=20srcObject?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 对齐 Vue3 管理后台 63dfc5e 的 RTC 媒体元素处理
- useMediaStreamElement 改为 callback ref 闭包保存当前元素
- 组件卸载或 ref 置空时清理旧 video/audio 元素的 srcObject，避免流关闭后画面残留
- 同步适配 web-antd、web-ele、web-antdv-next

验证：
- pnpm -F @vben/web-antd run typecheck
- pnpm -F @vben/web-ele run typecheck
- web-antdv-next 仍为既有 55 个类型错误，无 RTC 新增错误
---
 .../home/composables/useMediaStreamElement.ts | 31 +++++++++++++------
 .../home/composables/useMediaStreamElement.ts | 31 +++++++++++++------
 .../home/composables/useMediaStreamElement.ts | 31 +++++++++++++------
 3 files changed, 66 insertions(+), 27 deletions(-)

diff --git a/apps/web-antd/src/views/im/home/composables/useMediaStreamElement.ts b/apps/web-antd/src/views/im/home/composables/useMediaStreamElement.ts
index 7b9b581be..aa6ae09a5 100644
--- a/apps/web-antd/src/views/im/home/composables/useMediaStreamElement.ts
+++ b/apps/web-antd/src/views/im/home/composables/useMediaStreamElement.ts
@@ -1,4 +1,4 @@
-import { ref, type VNodeRef, watch } from 'vue'
+import { type VNodeRef, watch } from 'vue'
 
 /**
  * 把响应式 MediaStream 挂到 `<video>` / `<audio>` 元素的 srcObject 上；
@@ -7,21 +7,34 @@ import { ref, type VNodeRef, watch } from 'vue'
 export function useMediaStreamElement<T extends HTMLMediaElement>(
   streamSource: () => MediaStream | null | undefined
 ): VNodeRef {
-  const elRef = ref<T>()
-  const syncStream = (stream = streamSource()) => {
-    if (elRef.value) {
-      elRef.value.srcObject = stream || null
+  let el: T | null = null
+  let currentStream: MediaStream | null | undefined
+
+  const syncStream = () => {
+    if (el) {
+      el.srcObject = currentStream || null
     }
   }
+
   watch(
     streamSource,
     (stream) => {
-      syncStream(stream)
+      currentStream = stream
+      syncStream()
     },
     { flush: 'post', immediate: true }
   )
-  return (el) => {
-    elRef.value = el instanceof HTMLMediaElement ? (el as T) : undefined
-    syncStream()
+
+  return (value) => {
+    if (value instanceof HTMLMediaElement) {
+      el = value as T
+      syncStream()
+      return
+    }
+
+    if (el) {
+      el.srcObject = null
+    }
+    el = null
   }
 }
diff --git a/apps/web-antdv-next/src/views/im/home/composables/useMediaStreamElement.ts b/apps/web-antdv-next/src/views/im/home/composables/useMediaStreamElement.ts
index 7b9b581be..aa6ae09a5 100644
--- a/apps/web-antdv-next/src/views/im/home/composables/useMediaStreamElement.ts
+++ b/apps/web-antdv-next/src/views/im/home/composables/useMediaStreamElement.ts
@@ -1,4 +1,4 @@
-import { ref, type VNodeRef, watch } from 'vue'
+import { type VNodeRef, watch } from 'vue'
 
 /**
  * 把响应式 MediaStream 挂到 `<video>` / `<audio>` 元素的 srcObject 上；
@@ -7,21 +7,34 @@ import { ref, type VNodeRef, watch } from 'vue'
 export function useMediaStreamElement<T extends HTMLMediaElement>(
   streamSource: () => MediaStream | null | undefined
 ): VNodeRef {
-  const elRef = ref<T>()
-  const syncStream = (stream = streamSource()) => {
-    if (elRef.value) {
-      elRef.value.srcObject = stream || null
+  let el: T | null = null
+  let currentStream: MediaStream | null | undefined
+
+  const syncStream = () => {
+    if (el) {
+      el.srcObject = currentStream || null
     }
   }
+
   watch(
     streamSource,
     (stream) => {
-      syncStream(stream)
+      currentStream = stream
+      syncStream()
     },
     { flush: 'post', immediate: true }
   )
-  return (el) => {
-    elRef.value = el instanceof HTMLMediaElement ? (el as T) : undefined
-    syncStream()
+
+  return (value) => {
+    if (value instanceof HTMLMediaElement) {
+      el = value as T
+      syncStream()
+      return
+    }
+
+    if (el) {
+      el.srcObject = null
+    }
+    el = null
   }
 }
diff --git a/apps/web-ele/src/views/im/home/composables/useMediaStreamElement.ts b/apps/web-ele/src/views/im/home/composables/useMediaStreamElement.ts
index 7b9b581be..aa6ae09a5 100644
--- a/apps/web-ele/src/views/im/home/composables/useMediaStreamElement.ts
+++ b/apps/web-ele/src/views/im/home/composables/useMediaStreamElement.ts
@@ -1,4 +1,4 @@
-import { ref, type VNodeRef, watch } from 'vue'
+import { type VNodeRef, watch } from 'vue'
 
 /**
  * 把响应式 MediaStream 挂到 `<video>` / `<audio>` 元素的 srcObject 上；
@@ -7,21 +7,34 @@ import { ref, type VNodeRef, watch } from 'vue'
 export function useMediaStreamElement<T extends HTMLMediaElement>(
   streamSource: () => MediaStream | null | undefined
 ): VNodeRef {
-  const elRef = ref<T>()
-  const syncStream = (stream = streamSource()) => {
-    if (elRef.value) {
-      elRef.value.srcObject = stream || null
+  let el: T | null = null
+  let currentStream: MediaStream | null | undefined
+
+  const syncStream = () => {
+    if (el) {
+      el.srcObject = currentStream || null
     }
   }
+
   watch(
     streamSource,
     (stream) => {
-      syncStream(stream)
+      currentStream = stream
+      syncStream()
     },
     { flush: 'post', immediate: true }
   )
-  return (el) => {
-    elRef.value = el instanceof HTMLMediaElement ? (el as T) : undefined
-    syncStream()
+
+  return (value) => {
+    if (value instanceof HTMLMediaElement) {
+      el = value as T
+      syncStream()
+      return
+    }
+
+    if (el) {
+      el.srcObject = null
+    }
+    el = null
   }
 }