feat(video): 实现大华设备视频预览功能

- 修改后端控制器路径从 /api/video为 /dahuaVideo
- 更新登录接口使用固定测试凭证
- 实现基于 StreamingResponseBody 的视频流传输
- 前端移除转码相关逻辑，集成大华播放器组件
- 添加设备登录和预览启动/停止接口
-优化视频播放器组件支持大华流媒体播放
- 调整播放器UI增加控制按钮和错误处理- 修复视频播放错误提示和资源释放逻辑

src/request/video_info.js

@@ -14,3 +14,7 @@ export const stopTransCode = (params) =>
   post("/playVideo/stopTranscode", params);
 export const getTranscodeStatus = (params) =>
   post("/playVideo/getTranscodeStatus", params);
+export const loginDahua = (params) =>
+    post("/dahuaVideo/login", params);
+export const getDahuaSDKStatus = (params) =>
+    post("/dahuaVideo/status", params);

src/views/video_manager/video_manager/components/playVideo.vue

@@ -1,22 +1,29 @@
 <template>
-  <el-dialog v-model="dialogVisible" title="播放后台转码视频" width="50%">
+  <el-dialog v-model="dialogVisible" title="视频播放" width="50%" @close="handleStop">
-    <!-- 原生video播放器 - 移除了controls属性以去掉默认控制栏 -->
+    <!-- 原生video播放器 -->
-    <video ref="videoRef" playsinline class="video-player"></video>
+    <video 
+      ref="videoRef" 
+      playsinline 
+      controls 
+      class="video-player"
+      @error="handleVideoError"
+    ></video>
 
     <!-- 底部操作按钮 -->
     <template #footer>
-      <el-button type="primary" @click="dialogVisible = false">
+      <el-button type="primary" @click="handleStopPreview">
-        关闭播放
+        停止播放
+      </el-button>
+      <el-button @click="dialogVisible = false">
+        关闭
       </el-button>
     </template>
   </el-dialog>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onBeforeUnmount } from "vue";
-import Hls from "hls.js"; // 引入HLS解析库
 import { ElMessage } from "element-plus";
-import { getTranscodeStatus, stopTransCode } from "@/request/video_info.js"; // 后端“停止转码”接口
 
 // 接收父组件传递的属性
 const props = defineProps({
@@ -26,61 +33,42 @@ const props = defineProps({
   },
   src: {
     type: String,
-    required: true, // 必须传递HLS流地址
+    default: ""
-  },
-  videoId: {
-    type: String,
-    required: true, // 视频Id
   },
+  channel: {
+    type: Number,
+    default: 0
+  }
 });
 
 // 向父组件传递事件
-const emit = defineEmits(["update:visible", "onStop"]);
+const emit = defineEmits(["update:visible"]);
 
 // 控制弹窗显示（内部响应props.visible）
 const dialogVisible = ref(props.visible);
 const videoRef = ref(null); // video元素引用
-const isPlaying = ref(false); // 视频播放状态
-let hlsInstance = null; // HLS实例（用于管理流解析）
 
 // 监听父组件visible变化，同步到内部dialogVisible
 watch(
   () => props.visible,
   (newVal) => {
     dialogVisible.value = newVal;
+    if (newVal) {
+      // 延迟一点播放视频，确保DOM已更新
+      setTimeout(() => {
+        handlePlay();
+      }, 100);
+    } else {
+      handleStop();
+    }
   }
 );
 
-// 定义定时器变量
-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) {
+  if (!newVal) {
-    onDialogOpen();
+    handleStop();
-  } else {
-    destroyPlayer(); // 弹窗关闭时销毁播放器
   }
 });
 
@@ -92,115 +80,68 @@ const handlePlay = () => {
     return;
   }
 
-  // 先清空之前的资源
-  video.src = "";
-
-  // 检查src是否有效
   if (!props.src) {
     ElMessage.error("视频源地址为空");
     return;
   }
 
-  // HLS.js 支持检测
+  // 设置视频源
-  if (Hls.isSupported()) {
-    // 如果已有实例，先销毁
-    if (hlsInstance) {
-      hlsInstance.destroy();
-    }
-
-    hlsInstance = new Hls({
-      maxBufferLength: 30, // 增加缓冲长度
-      maxMaxBufferLength: 60,
-    });
-
-    // 监听错误事件
-    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();
-            break;
-        }
-      }
-    });
-
-    hlsInstance.loadSource(props.src);
-    hlsInstance.attachMedia(video);
-
-    hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
-      video.play().then(() => {
-        isPlaying.value = true;
-      });
-    });
-  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
-    // Safari等原生支持HLS的浏览器
   video.src = props.src;
-    video.addEventListener("loadedmetadata", () => {
+
-      video
+  // 尝试播放视频
-        .play()
+  video.play().then(() => {
-        .then(() => {
-          isPlaying.value = true;
     ElMessage.success("视频开始播放");
-        })
+  }).catch((err) => {
-        .catch((err) => {
     ElMessage.error(`播放失败：${err.message}`);
   });
-    });
-  } else {
-    ElMessage.error("您的浏览器不支持HLS视频流播放，请更换浏览器");
-  }
 };
 
-// 销毁播放器时清除定时器
+// 停止播放
-const destroyPlayer = () => {
+const handleStop = () => {
-  // 清除定时器
-  if (checkInterval) {
-    clearInterval(checkInterval);
-    checkInterval = null;
-  }
-
-  // 原有逻辑保持不变
-  isPlaying.value = false;
-  if (hlsInstance) {
-    hlsInstance.destroy();
-    hlsInstance = null;
-  }
-  if (videoRef.value) {
   const video = videoRef.value;
+  if (video) {
     video.pause();
-    video.src = "";
+    video.removeAttribute('src'); // 移除src属性
+    video.load(); // 重新加载以清空视频内容
   }
-  handleStopTranscode();
 };
 
-// 停止转码（调用后端接口）
+// 处理视频错误
-const handleStopTranscode = async () => {
+const handleVideoError = (e) => {
+  console.error("视频播放错误:", e);
+  ElMessage.error("视频播放出现错误，请检查网络连接或设备状态");
+};
+
+// 停止预览
+const handleStopPreview = async () => {
   try {
-    await stopTransCode({ id: props.videoId }); // 调用后端“停止转码”接口
+    const response = await fetch('/dahuaVideo/stopPreview', {
-    emit("onStop"); // 通知父组件“转码已停止”
+      method: 'POST',
-    dialogVisible.value = false; // 关闭弹窗
+    });
-  } catch (error) {
+    const result = await response.json();
-    if (error !== "cancel") {
+    if (result.success) {
-      ElMessage.error(`停止转码失败：${error.message || "未知错误"}`);
+      ElMessage.success("停止预览成功");
+      handleStop();
+    } else {
+      ElMessage.error("停止预览失败: " + result.message);
     }
+  } catch (error) {
+    ElMessage.error("停止预览失败: " + (error.message || "未知错误"));
   }
 };
+
+// 组件卸载前停止播放
+onBeforeUnmount(() => {
+  handleStop();
+});
 </script>
 
 <style scoped>
 .video-player {
   width: 100%;
   min-height: 600px;
-  object-fit: contain; /* 保持视频比例 */
+  object-fit: contain;
-  background-color: #000; /* 增加黑色背景，使视频区域更明显 */
+  background-color: #000;
 }
 
 .video-controls {

src/views/video_manager/video_manager/index.vue

@@ -18,9 +18,6 @@
               <el-button native-type="reset" @click="fnResetPagination"
                 >重置</el-button
               >
-              <el-button type="success" @click="handleStartTranscode"
-                >播放后台转码视频</el-button
-              >
             </el-form-item>
           </el-col>
         </el-row>
@@ -106,12 +103,11 @@
       @get-data="fnResetPagination"
     />
 
-    <!-- 转码视频播放器（修改后：双向绑定visible + 传递src） -->
+    <!-- 大华视频播放器 -->
     <play-video
-      v-model:visible="data.transcodeVideoDialog.visible"
+      v-model:visible="data.dahuaVideoDialog.visible"
-      :src="data.transcodeVideoDialog.src"
+      :src="data.dahuaVideoDialog.src"
-      :video-id="data.transcodeVideoDialog.id"
+      :channel="data.dahuaVideoDialog.channel"
-      @on-stop="onTranscodeStopped"
     />
   </div>
 </template>
@@ -130,8 +126,8 @@ 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 PlayVideo from "@/views/video_manager/video_manager/components/playVideo.vue";
-import { startTransCode, stopTransCode } from "@/request/video_info.js"; // 转码接口
+import {loginDahua} from "@/request/video_info.js";
 
 const data = reactive({
   addDialog: {
@@ -155,28 +151,13 @@ const data = reactive({
     videomanagerId: "",
     visible: false,
   },
-  transcodeVideoDialog: {
+  dahuaVideoDialog: {
     visible: false,
-    src: "http://localhost:8100/api/hls/stream.m3u8", // 后端转码后HLS流的访问路径
+    src: "",
-    id: "",
+    channel: 0,
   },
 });
 
-// 启动转码并显示播放器
-const handleStartTranscode = async () => {
-  try {
-    await startTransCode(); // 调用后端“启动转码”接口
-    data.transcodeVideoDialog.visible = true; // 显示播放器弹窗
-  } catch (error) {
-    ElMessage.error("启动转码失败: " + (error.message || "未知错误"));
-  }
-};
-
-// 转码停止后的回调
-const onTranscodeStopped = async () => {
-  await stopTransCode(); // 调用后端“停止转码”接口
-};
-
 // 列表数据逻辑（保持不变）
 const { list, pagination, searchForm, fnGetData, fnResetPagination } =
   useListData(getHkVideoManagerList);
@@ -201,13 +182,22 @@ const fnUpToBi = async (videomanagerId) => {
 
 const fnPreviewVideo = async (row) => {
   try {
-    const resData = await startTransCode({ url: row.url, id: row.PLS_ID }); // 调用后端“启动转码”接口
+    // 先登录大华设备
-    data.transcodeVideoDialog.visible = true; // 显示播放器弹窗
+    const loginResult = await loginDahua();
-    data.transcodeVideoDialog.id = row.PLS_ID; // 显示播放器弹窗
+    console.log("大华设备登录结果:", loginResult);
-    data.transcodeVideoDialog.src =
+
-      "http://172.16.70.226:7811/" + resData.videoUrl + "stream.m3u8";
+    if (!loginResult.success) {
+      ElMessage.error("设备登录失败: " + loginResult.message);
+      return;
+    }
+
+    // 调用大华SDK接口播放视频
+    data.dahuaVideoDialog.visible = true;
+    data.dahuaVideoDialog.channel = row.PLS_ID || 0;
+    data.dahuaVideoDialog.src = `/dahuaVideo/start-preview?channel=${row.PLS_ID || 0}`;
   } catch (error) {
-    ElMessage.error("启动转码失败: " + (error.message || "未知错误"));
+    console.error("播放视频过程出错:", error);
+    ElMessage.error("播放视频失败: " + (error.message || "未知错误"));
   }
 };