From ad58b16d00b2e57a7d0ff53580cc59050c17c766 Mon Sep 17 00:00:00 2001
From: wangyan <405898180@qq.com>
Date: Fri, 31 Oct 2025 19:46:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(video):=E9=87=8D=E6=9E=84=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=9B=91=E6=8E=A7=E6=A8=A1=E5=9D=97=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=AE=9E=E6=97=B6=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除旧的 DahuaVideoController 控制器及相关接口
- 在 NetSDKService 中实现基于 FFmpeg 的实时流转码与推送逻辑
- 新增对 H.264 和 HEVC 编码格式的识别与动态转码支持
- 实现 FLV 流封装及 WebSocket 推送机制
- 添加 WebSocket 会话管理与多用户连接跟踪
- 更新平台视频管理控制器中的通道标识字段
- 配置文件中增加大华设备连接参数- 调整日志级别为 debug 以便于开发调试
- 完善资源清理逻辑，确保登出时释放所有相关句柄和进程
---
 .../video_manager/components/playVideo.vue    | 601 ++++++++++++++----
 .../video_manager/video_manager/index.vue     |  61 +-
 2 files changed, 504 insertions(+), 158 deletions(-)

diff --git a/src/views/video_manager/video_manager/components/playVideo.vue b/src/views/video_manager/video_manager/components/playVideo.vue
index 1d9cb79..ad27230 100644
--- a/src/views/video_manager/video_manager/components/playVideo.vue
+++ b/src/views/video_manager/video_manager/components/playVideo.vue
@@ -1,22 +1,19 @@
 <template>
-  <el-dialog v-model="dialogVisible" title="播放后台转码视频" width="50%">
-    <!-- 原生video播放器 - 移除了controls属性以去掉默认控制栏 -->
-    <video ref="videoRef" playsinline class="video-player"></video>
+  <el-dialog v-model="dialogVisible" title="播放实时视频" width="50%">
+    <!-- 原生video播放器 -->
+    <video ref="videoRef" playsinline controls class="video-player"></video>
 
     <!-- 底部操作按钮 -->
     <template #footer>
-      <el-button type="primary" @click="dialogVisible = false">
-        关闭播放
-      </el-button>
+      <el-button type="primary" @click="closePlayer"> 关闭播放 </el-button>
     </template>
   </el-dialog>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
-import Hls from "hls.js"; // 引入HLS解析库
+import { ref, watch, onBeforeUnmount } from "vue";
 import { ElMessage } from "element-plus";
-import { getTranscodeStatus, stopTransCode } from "@/request/video_info.js"; // 后端“停止转码”接口
+import { stopWebRtcStream } from "@/request/webrtc.js";
 
 // 接收父组件传递的属性
 const props = defineProps({
@@ -24,13 +21,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  src: {
-    type: String,
-    required: true, // 必须传递HLS流地址
-  },
   videoId: {
     type: String,
-    required: true, // 视频Id
+    required: true,
   },
 });
 
@@ -40,171 +33,535 @@ const emit = defineEmits(["update:visible", "onStop"]);
 // 控制弹窗显示（内部响应props.visible）
 const dialogVisible = ref(props.visible);
 const videoRef = ref(null); // video元素引用
-const isPlaying = ref(false); // 视频播放状态
-let hlsInstance = null; // HLS实例（用于管理流解析）
+let mediaSource = null;
+let sourceBuffer = null;
+let queue = [];
+let isProcessing = false;
+let ws = null; // WebSocket连接
+let isPlayerDestroyed = false; // 标记播放器是否已被销毁
+let isMediaSourceOpen = false; // 标记MediaSource是否已打开
+let dataReceived = false; // 标记是否已接收到数据
+let dataReceiveCount = 0; // 记录接收到的数据包数量
+let closeReason = null; // 记录关闭原因
 
 // 监听父组件visible变化，同步到内部dialogVisible
 watch(
-    () => props.visible,
-    (newVal) => {
-      dialogVisible.value = newVal;
-    }
+  () => props.visible,
+  (newVal) => {
+    dialogVisible.value = newVal;
+  }
 );
 
-// 定义定时器变量
-let checkInterval = null;
-
-// 弹窗打开时执行的方法
-const onDialogOpen = () => {
-  // 每3秒调用一次接口
-  checkInterval = setInterval(async () => {
-    try {
-      // 假设接口名为checkVideoProgress，需自行导入
-      const response = await getTranscodeStatus({ id: props.videoId });
-      if (response.progress > 2) {
-        handlePlay();
-        // 播放后清除定时器
-        if (checkInterval) {
-          clearInterval(checkInterval);
-          checkInterval = null;
-        }
-      }
-      // 可根据需要处理接口返回结果
-    } catch (error) {}
-  }, 3000); // 3秒间隔
-};
-
 // 监听内部dialogVisible变化，通知父组件
 watch(dialogVisible, (newVal) => {
   emit("update:visible", newVal);
   if (newVal) {
+    // 重置状态标记
+    isPlayerDestroyed = false;
+    isMediaSourceOpen = false;
+    dataReceived = false;
+    dataReceiveCount = 0;
+    closeReason = null;
     onDialogOpen();
   } else {
     destroyPlayer(); // 弹窗关闭时销毁播放器
   }
 });
 
-// 播放视频
-const handlePlay = () => {
+// 关闭播放器的方法
+const closePlayer = () => {
+  closeReason = "user";
+  dialogVisible.value = false;
+};
+
+// 弹窗打开时执行的方法
+const onDialogOpen = () => {
+  connectWebSocket();
+};
+
+// 连接WebSocket
+const connectWebSocket = () => {
+  if (!props.videoId) {
+    ElMessage.error("视频ID为空");
+    // 不要自动关闭对话框，让用户手动关闭
+    return;
+  }
+
+  // 获取当前时间戳作为临时userId（确保每次连接都有唯一的标识）
+  const tempUserId = Date.now().toString();
+
+  // 创建WebSocket连接
+  const wsUrl = `ws://localhost:8898?videoId=${props.videoId}&userId=${tempUserId}`;
+  console.log("正在连接WebSocket:", wsUrl);
+  ws = new WebSocket(wsUrl);
+
+  ws.onopen = () => {
+    console.log("WebSocket连接已建立");
+    initializeMediaSource();
+  };
+
+  ws.onmessage = (event) => {
+    // 标记已接收到数据
+    if (!dataReceived) {
+      dataReceived = true;
+      console.log("首次接收到视频数据");
+    }
+    dataReceiveCount++;
+
+    // 每接收100个数据包打印一次日志
+    if (dataReceiveCount % 100 === 0) {
+      console.log("已接收到 " + dataReceiveCount + " 个数据包");
+    }
+
+    if (event.data instanceof Blob) {
+      // 接收视频数据
+      handleVideoData(event.data);
+    } else if (event.data instanceof ArrayBuffer) {
+      // 接收视频数据
+      const blob = new Blob([event.data], { type: "video/webm" });
+      handleVideoData(blob);
+    } else {
+      console.log("接收到未知类型数据:", typeof event.data);
+    }
+  };
+
+  ws.onerror = (error) => {
+    closeReason = "error";
+    console.error("WebSocket连接出错:", error);
+    ElMessage.error("WebSocket连接出错: " + error.message);
+    // 发生错误时不要自动关闭对话框，让用户手动关闭
+  };
+
+  ws.onclose = (event) => {
+    console.log(
+      "WebSocket连接已关闭, code: " + event.code + ", reason: " + event.reason
+    );
+    // 检查是否从未接收到数据
+    if (!dataReceived) {
+      ElMessage.warning("未接收到视频数据，可能是视频源问题");
+    } else {
+      console.log("共接收到 " + dataReceiveCount + " 个数据包");
+    }
+
+    // 只有在非用户主动关闭的情况下才销毁播放器资源
+    if (closeReason !== "user") {
+      // WebSocket关闭时销毁播放器资源
+      destroyPlayerResources();
+    }
+  };
+};
+
+// 初始化MediaSource
+const initializeMediaSource = () => {
+  // 检查播放器是否已被销毁
+  if (isPlayerDestroyed) {
+    console.log("播放器已被销毁，取消初始化");
+    return;
+  }
+
   const video = videoRef.value;
   if (!video) {
     ElMessage.error("视频播放器初始化失败");
     return;
   }
 
-  // 先清空之前的资源
-  video.src = "";
-
-  // 检查src是否有效
-  if (!props.src) {
-    ElMessage.error("视频源地址为空");
+  if (!window.MediaSource) {
+    ElMessage.error("您的浏览器不支持MediaSource");
     return;
   }
 
-  // HLS.js 支持检测
-  if (Hls.isSupported()) {
-    // 如果已有实例，先销毁
-    if (hlsInstance) {
-      hlsInstance.destroy();
-    }
+  try {
+    mediaSource = new MediaSource();
+    video.src = URL.createObjectURL(mediaSource);
 
-    hlsInstance = new Hls({
-      maxBufferLength: 30, // 增加缓冲长度
-      maxMaxBufferLength: 60,
-    });
+    mediaSource.addEventListener("sourceopen", () => {
+      console.log("MediaSource已打开");
+      // 标记MediaSource已打开
+      isMediaSourceOpen = true;
 
-    // 监听错误事件
-    hlsInstance.on(Hls.Events.ERROR, (event, data) => {
-      if (data.fatal) {
-        switch (data.type) {
-          case Hls.ErrorTypes.NETWORK_ERROR:
-            hlsInstance.startLoad();
-            break;
-          case Hls.ErrorTypes.MEDIA_ERROR:
-            hlsInstance.recoverMediaError();
-            break;
-          default:
-            // 无法恢复的错误，需要重新初始化
-            destroyPlayer();
-            handlePlay();
+      // 再次检查播放器是否已被销毁
+      if (isPlayerDestroyed) {
+        console.log("播放器已被销毁，取消SourceBuffer初始化");
+        return;
+      }
+
+      try {
+        // 检查MediaSource状态
+        if (mediaSource.readyState !== "open") {
+          console.warn("MediaSource未处于open状态:", mediaSource.readyState);
+          return;
+        }
+
+        // 创建SourceBuffer，尝试多种编解码器
+        // 根据后端FFmpeg配置，我们应优先尝试单一编解码器而不是复合编解码器
+        const codecs = [
+          'video/webm; codecs="vp8"', // 优先尝试VP8（H.264转码输出）
+          'video/webm; codecs="vp9"', // 然后尝试VP9（H.265转码输出）
+          'video/webm; codecs="vp8,vp9"',
+          "video/webm",
+        ];
+
+        let codecInitialized = false;
+        for (const codec of codecs) {
+          try {
+            sourceBuffer = mediaSource.addSourceBuffer(codec);
+            codecInitialized = true;
+            console.log("SourceBuffer初始化完成，使用编解码器: " + codec);
             break;
+          } catch (e) {
+            console.warn("尝试初始化编解码器失败: " + codec, e);
+          }
+        }
+
+        if (!codecInitialized) {
+          throw new Error("无法初始化任何支持的编解码器");
+        }
+
+        sourceBuffer.addEventListener("updateend", () => {
+          console.log("SourceBuffer更新完成");
+          isProcessing = false;
+          processQueue();
+        });
+
+        sourceBuffer.addEventListener('error', (e) => {
+          console.error("SourceBuffer发生错误:", e);
+          // 尝试获取更多错误信息
+          if (sourceBuffer && sourceBuffer.onerror) {
+            console.error("SourceBuffer.onerror:", sourceBuffer.onerror);
+          }
+          
+          isProcessing = false;
+          // 尝试处理队列中的下一个数据包
+          if (queue.length > 0) {
+            setTimeout(() => {
+              if (!isPlayerDestroyed) {
+                processQueue();
+              }
+            }, 100);
+          }
+        });
+        
+        // 添加更新开始事件监听器
+        sourceBuffer.addEventListener('updatestart', () => {
+          console.log("SourceBuffer开始更新");
+        });
+        
+        // 添加更新事件监听器
+        sourceBuffer.addEventListener('update', () => {
+          console.log("SourceBuffer正在更新");
+        });
+      } catch (e) {
+        if (!isPlayerDestroyed) {
+          ElMessage.error("初始化SourceBuffer失败: " + e.message);
+          console.error("SourceBuffer初始化错误堆栈:", e.stack);
         }
       }
     });
 
-    hlsInstance.loadSource(props.src);
-    hlsInstance.attachMedia(video);
+    mediaSource.addEventListener("sourceclose", () => {
+      console.log("MediaSource已关闭");
+      isMediaSourceOpen = false;
+      // MediaSource关闭时销毁播放器资源
+      destroyPlayerResources();
+    });
 
-    hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
-      video.play().then(() => {
-        isPlaying.value = true;
-      });
+    mediaSource.addEventListener("sourceended", () => {
+      console.log(
+        "MediaSource已结束，当前readyState：" + mediaSource.readyState
+      );
+      isMediaSourceOpen = false;
+      // MediaSource结束时销毁播放器资源
+      destroyPlayerResources();
     });
-  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
-    // Safari等原生支持HLS的浏览器
-    video.src = props.src;
-    video.addEventListener("loadedmetadata", () => {
-      video
-          .play()
-          .then(() => {
-            isPlaying.value = true;
-            ElMessage.success("视频开始播放");
-          })
-          .catch((err) => {
-            ElMessage.error(`播放失败：${err.message}`);
-          });
-    });
-  } else {
-    ElMessage.error("您的浏览器不支持HLS视频流播放，请更换浏览器");
+  } catch (e) {
+    if (!isPlayerDestroyed) {
+      ElMessage.error("初始化播放器失败: " + e.message);
+      console.error("初始化播放器错误堆栈:", e.stack);
+    }
   }
 };
 
-// 销毁播放器时清除定时器
-const destroyPlayer = () => {
-  // 清除定时器
-  if (checkInterval) {
-    clearInterval(checkInterval);
-    checkInterval = null;
+// 处理视频数据
+const handleVideoData = (data) => {
+  // 检查播放器是否已被销毁
+  if (isPlayerDestroyed) {
+    console.log("播放器已被销毁，丢弃接收到的数据");
+    return;
   }
 
-  // 原有逻辑保持不变
-  isPlaying.value = false;
-  if (hlsInstance) {
-    hlsInstance.destroy();
-    hlsInstance = null;
+  // 检查WebSocket连接是否仍然打开
+  if (!ws || ws.readyState !== WebSocket.OPEN) {
+    console.log("WebSocket连接已关闭，丢弃接收到的数据");
+    return;
   }
+
+  // 检查MediaSource是否打开
+  if (!isMediaSourceOpen || !mediaSource || mediaSource.readyState !== "open") {
+    console.log(
+      "MediaSource未打开，丢弃接收到的数据，当前状态：" +
+        (mediaSource ? mediaSource.readyState : "mediaSource未定义")
+    );
+    return;
+  }
+
+  // 检查数据是否有效
+  if (!data || data.size === 0) {
+    console.log("接收到空数据，忽略");
+    return;
+  }
+
+  queue.push(data);
+  processQueue();
+};
+
+// 处理队列中的数据
+const processQueue = () => {
+  // 检查播放器是否已被销毁
+  if (isPlayerDestroyed) {
+    console.log("播放器已被销毁，清空数据队列");
+    queue = [];
+    return;
+  }
+
+  // 检查基本条件
+  if (
+    isProcessing ||
+    queue.length === 0 ||
+    !sourceBuffer ||
+    sourceBuffer.updating
+  ) {
+    if (queue.length > 0 && !isProcessing) {
+      console.log(
+        "满足处理条件但未处理，状态详情：isProcessing=" +
+          isProcessing +
+          ", queue.length=" +
+          queue.length +
+          ", sourceBuffer存在=" +
+          !!sourceBuffer +
+          ", sourceBuffer.updating=" +
+          (sourceBuffer ? sourceBuffer.updating : "N/A")
+      );
+    }
+    return;
+  }
+
+  // 检查WebSocket连接状态
+  if (!ws || ws.readyState !== WebSocket.OPEN) {
+    console.log("WebSocket连接已关闭，清空数据队列");
+    queue = [];
+    return;
+  }
+
+  // 检查MediaSource状态
+  if (!isMediaSourceOpen || !mediaSource || mediaSource.readyState !== "open") {
+    console.log(
+      "MediaSource未打开或已关闭，清空数据队列，当前状态：" +
+        (mediaSource ? mediaSource.readyState : "mediaSource未定义")
+    );
+    // 如果MediaSource已结束，尝试重新初始化
+    if (mediaSource && mediaSource.readyState === "ended") {
+      console.log("尝试重新初始化MediaSource");
+      initializeMediaSource();
+    }
+    queue = [];
+    return;
+  }
+
+  isProcessing = true;
+  const data = queue.shift();
+  console.log("开始处理数据包，队列剩余长度：" + queue.length);
+
+  const reader = new FileReader();
+  reader.onload = (event) => {
+    try {
+      // 全面检查所有相关对象的有效性
+      if (isPlayerDestroyed) {
+        console.log("播放器已被销毁，取消数据处理");
+        isProcessing = false;
+        queue = [];
+        return;
+      }
+      
+      // 检查所有相关对象
+      if (!mediaSource || !sourceBuffer || mediaSource.readyState !== 'open') {
+        console.warn("MediaSource或SourceBuffer无效，无法添加数据，当前状态：" + 
+                    (mediaSource ? mediaSource.readyState : "mediaSource未定义"));
+        isProcessing = false;
+        queue = [];
+        return;
+      }
+      
+      // 检查sourceBuffer是否仍然属于mediaSource
+      if (!mediaSource.sourceBuffers || 
+          (Array.from(mediaSource.sourceBuffers).indexOf(sourceBuffer) === -1)) {
+        console.warn("SourceBuffer已被移除，无法添加数据");
+        isProcessing = false;
+        queue = [];
+        return;
+      }
+      
+      // 检查sourceBuffer是否正在更新
+      if (sourceBuffer.updating) {
+        console.warn("SourceBuffer正在更新，无法添加数据");
+        isProcessing = false;
+        // 重新将数据放回队列头部
+        queue.unshift(data);
+        return;
+      }
+      
+      const arrayBuffer = event.target.result;
+      console.log("准备添加数据到SourceBuffer，数据大小：" + arrayBuffer.byteLength + " 字节");
+      
+      // 检查数据是否为空
+      if (arrayBuffer.byteLength === 0) {
+        console.warn("尝试添加空数据到SourceBuffer，跳过");
+        isProcessing = false;
+        if (queue.length > 0) {
+          processQueue();
+        }
+        return;
+      }
+      
+      // 尝试添加数据到SourceBuffer
+      sourceBuffer.appendBuffer(arrayBuffer);
+      console.log("数据已提交到SourceBuffer");
+    } catch (e) {
+      console.error("添加视频数据失败:", e);
+      console.error("错误堆栈:", e.stack);
+      isProcessing = false;
+      // 发生错误时也清空队列
+      queue = [];
+      // 尝试恢复播放器
+      if (!isPlayerDestroyed) {
+        console.log("尝试恢复播放器");
+        destroyPlayerResources();
+        // 延迟重新连接
+        setTimeout(() => {
+          if (!isPlayerDestroyed) {
+            connectWebSocket();
+          }
+        }, 1000);
+      }
+    }
+  };
+  
+  reader.onerror = (error) => {
+    console.error("FileReader读取数据失败:", error);
+    isProcessing = false;
+    // 出错时继续处理队列中的下一个数据
+    if (queue.length > 0) {
+      isProcessing = false;
+      processQueue();
+    }
+  };
+
+  reader.readAsArrayBuffer(data);
+};
+
+// 销毁播放器资源但不关闭对话框
+const destroyPlayerResources = () => {
+  // 标记播放器已被销毁
+  isPlayerDestroyed = true;
+
+  // 关闭WebSocket连接
+  if (ws) {
+    ws.close();
+    ws = null;
+  }
+
+  // 清理MediaSource
+  if (mediaSource) {
+    try {
+      // 重置MediaSource状态标记
+      isMediaSourceOpen = false;
+
+      if (sourceBuffer && sourceBuffer.updating) {
+        sourceBuffer.abort();
+      }
+
+      // 从MediaSource中移除SourceBuffer
+      if (sourceBuffer && mediaSource.readyState === "open") {
+        mediaSource.removeSourceBuffer(sourceBuffer);
+      }
+
+      // 尝试结束MediaSource
+      if (mediaSource.readyState === "open") {
+        mediaSource.endOfStream();
+      }
+    } catch (e) {
+      console.warn("清理MediaSource时出错:", e);
+    }
+
+    try {
+      URL.revokeObjectURL(videoRef.value.src);
+    } catch (e) {
+      console.warn("释放ObjectURL时出错:", e);
+    }
+
+    mediaSource = null;
+    sourceBuffer = null;
+  }
+
+  // 清空队列
+  queue = [];
+  isProcessing = false;
+
+  // 暂停视频
   if (videoRef.value) {
-    const video = videoRef.value;
-    video.pause();
-    video.src = "";
+    try {
+      videoRef.value.pause();
+      videoRef.value.src = "";
+    } catch (e) {
+      console.warn("重置video元素时出错:", e);
+    }
   }
+
+  console.log("播放器资源已销毁");
+};
+
+// 销毁播放器（包括关闭对话框）
+const destroyPlayer = () => {
+  // 如果播放器已经被销毁，则直接返回
+  if (isPlayerDestroyed) {
+    return;
+  }
+
+  closeReason = "dialog";
+
+  // 销毁播放器资源
+  destroyPlayerResources();
+
+  // 调用停止转码接口
   handleStopTranscode();
 };
 
 // 停止转码（调用后端接口）
 const handleStopTranscode = async () => {
   try {
-    await stopTransCode({ id: props.videoId }); // 调用后端“停止转码”接口
-    emit("onStop"); // 通知父组件“转码已停止”
-    dialogVisible.value = false; // 关闭弹窗
+    // 只有在播放器未被销毁时才调用停止接口
+    if (!isPlayerDestroyed) {
+      await stopWebRtcStream({ id: props.videoId });
+      emit("onStop");
+    }
+    // 不要自动设置dialogVisible.value = false，让用户手动关闭
   } catch (error) {
-    if (error !== "cancel") {
+    if (error !== "cancel" && !isPlayerDestroyed) {
       ElMessage.error(`停止转码失败：${error.message || "未知错误"}`);
     }
   }
 };
+
+// 组件卸载前清理
+onBeforeUnmount(() => {
+  destroyPlayer();
+});
 </script>
 
 <style scoped>
 .video-player {
   width: 100%;
   min-height: 600px;
-  object-fit: contain; /* 保持视频比例 */
-  background-color: #000; /* 增加黑色背景，使视频区域更明显 */
-}
-
-.video-controls {
-  margin-top: 16px;
-  text-align: center;
+  object-fit: contain;
+  background-color: #000;
 }
 </style>
diff --git a/src/views/video_manager/video_manager/index.vue b/src/views/video_manager/video_manager/index.vue
index 8823e61..8de001a 100644
--- a/src/views/video_manager/video_manager/index.vue
+++ b/src/views/video_manager/video_manager/index.vue
@@ -18,8 +18,8 @@
               <el-button native-type="reset" @click="fnResetPagination"
               >重置</el-button
               >
-              <el-button type="success" @click="handleStartTranscode"
-              >播放后台转码视频</el-button
+              <el-button type="success" @click="handleStartWebRtcStream"
+              >播放实时视频(WebRTC)</el-button
               >
             </el-form-item>
           </el-col>
@@ -106,12 +106,11 @@
         @get-data="fnResetPagination"
     />
 
-    <!-- 转码视频播放器（修改后：双向绑定visible + 传递src） -->
+    <!-- WebRTC视频播放器 -->
     <play-video
-        v-model:visible="data.transcodeVideoDialog.visible"
-        :src="data.transcodeVideoDialog.src"
-        :video-id="data.transcodeVideoDialog.id"
-        @on-stop="onTranscodeStopped"
+        v-model:visible="data.webRtcVideoDialog.visible"
+        :video-id="data.webRtcVideoDialog.id"
+        @on-stop="onWebRtcStreamStopped"
     />
   </div>
 </template>
@@ -130,8 +129,10 @@ import {ElMessage, ElMessageBox} from "element-plus";
 import SelectingPoints from "./components/selecting_points.vue";
 import LayoutVideo from "@/components/video/index.vue";
 import {setVideoManagerList} from "@/request/eightwork_videomanager.js";
-import PlayVideo from "@/views/video_manager/video_manager/components/playVideo.vue"; // 引入新播放器组件
-import {startTransCode, stopTransCode} from "@/request/video_info.js"; // 转码接口
+import PlayVideo from "@/views/video_manager/video_manager/components/playVideo.vue";
+
+// 更新相关导入
+import {startWebRtcStream, stopWebRtcStream} from "@/request/webrtc.js";
 
 const data = reactive({
   addDialog: {
@@ -155,42 +156,32 @@ const data = reactive({
     videomanagerId: "",
     visible: false,
   },
-  transcodeVideoDialog: {
+  webRtcVideoDialog: {
     visible: false,
-    src: "http://localhost:8100/api/hls/stream.m3u8", // 后端转码后HLS流的访问路径
     id: "",
   },
 });
 
-// 启动转码并显示播放器
-const handleStartTranscode = async () => {
+// 启动WebRTC流并显示播放器
+const handleStartWebRtcStream = async () => {
   try {
-    await startTransCode(); // 调用后端“启动转码”接口
-    data.transcodeVideoDialog.visible = true; // 显示播放器弹窗
+    // 这里应该选择一个默认视频或让用户选择
+    await startWebRtcStream();
+    data.webRtcVideoDialog.visible = true;
   } catch (error) {
-    ElMessage.error("启动转码失败: " + (error.message || "未知错误"));
+    ElMessage.error("启动实时视频流失败: " + (error.message || "未知错误"));
   }
 };
 
-// 转码停止后的回调
-const onTranscodeStopped = async () => {
-  await stopTransCode(); // 调用后端“停止转码”接口
+// WebRTC流停止后的回调
+const onWebRtcStreamStopped = async () => {
+  await stopWebRtcStream();
 };
 
 // 列表数据逻辑（保持不变）
 const {list, pagination, searchForm, fnGetData, fnResetPagination} =
     useListData(getHkVideoManagerList);
 
-// 其他方法（保持不变）
-// const fnSetPositioning = async (row) => {
-//   data.selectingPointsDialog.id = row.PLS_ID ? row.PLS_ID : "";
-//   data.selectingPointsDialog.indexCode = row.indexCode;
-//   data.selectingPointsDialog.regionPathName = row.regionPathName;
-//   data.selectingPointsDialog.camName = row.name;
-//   data.selectingPointsDialog.videomanagerId = row.videomanagerId;
-//   data.selectingPointsDialog.visible = true;
-// };
-
 const fnUpToBi = async (videomanagerId) => {
   await ElMessageBox.confirm("确定要置顶吗？置顶后将会默认展示在Bi页", {
     type: "warning",
@@ -201,13 +192,11 @@ const fnUpToBi = async (videomanagerId) => {
 
 const fnPreviewVideo = async (row) => {
   try {
-    const resData = await startTransCode({url: row.url, id: row.PLS_ID}); // 调用后端“启动转码”接口
-    data.transcodeVideoDialog.visible = true; // 显示播放器弹窗
-    data.transcodeVideoDialog.id = row.PLS_ID; // 显示播放器弹窗
-    data.transcodeVideoDialog.src =
-        "http://172.16.70.226:7811/" + resData.videoUrl + "stream.m3u8";
+    await startWebRtcStream({url: row.url, id: row.PLS_ID});
+    data.webRtcVideoDialog.visible = true;
+    data.webRtcVideoDialog.id = row.PLS_ID;
   } catch (error) {
-    ElMessage.error("启动转码失败: " + (error.message || "未知错误"));
+    ElMessage.error("启动实时视频流失败: " + (error.message || "未知错误"));
   }
 };
 
@@ -233,4 +222,4 @@ const fnDeleteVideo = async (row) => {
 };
 </script>
 
-<style scoped></style>
+<style scoped></style>
\ No newline at end of file