[Feat 0000]摄像头组件优化

src/views/vent/home/configurable/belt/configurable.data.ts

@@ -1156,7 +1156,7 @@ export const testSpary: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'CameraListTest',
+            name: 'cameraList',
             basis: '100%',
           },
         ],

src/views/vent/home/configurable/components/belt/CameraList.vue

@@ -1,78 +1,99 @@
 <template>
   <div class="camera-modal">
-    <div class="camrea-area">
-      <div v-if="renderPlayer" ref="playerRef" style="display: flex; width: 100%; height: 100%; overflow-y: auto; pointer-events: none"></div>
+    <!-- 真实摄像头 -->
+    <div v-if="hasCamera" class="camrea-area">
+      <div ref="playerRef" style="width: 100%; height: 100%"></div>
+    </div>
+
+    <!-- 默认视频 -->
+    <div v-else class="camera-area1">
+      <div v-for="item in defaultVideoList" :key="item.id" class="video-item">
+        <video class="live-video" muted loop autoplay playsinline>
+          <source :src="item.url" type="video/mp4" />
+        </video>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, onBeforeUnmount, watch, nextTick } from 'vue';
+import { ref, watch, onBeforeUnmount, nextTick } from 'vue';
 import { useCamera } from '/@/hooks/system/useCameraPianation';
 
 const props = defineProps({
-  data: {
-    type: Array,
-    default: () => [],
-  },
+  data: { type: Array, default: () => [] },
 });
 
 const { getCamera, removeCamera } = useCamera();
-const playerRef = ref();
-const renderPlayer = ref(true);
-const cameraLoaded = ref(false);
-// 提取摄像头
-const allCameras = () => {
-  const list: any[] = [];
-  props.data.forEach((device: any) => {
-    if (device.cameras && device.cameras.length > 0) {
-      device.cameras.forEach((item) => {
-        list.push({
-          ...item,
-          deviceID: device.deviceID,
-        });
-      });
-    }
-  });
-  return list;
-};
-
-const loadCameras = async () => {
-  if (cameraLoaded.value) return;
-  await nextTick();
-  const cameras = allCameras();
-  if (cameras.length === 0) return;
-
-  removeCamera(playerRef);
-  await getCamera('', playerRef, renderPlayer, '', cameras);
-  cameraLoaded.value = true;
-};
+const playerRef = ref(null);
+const hasCamera = ref(false);
+const defaultVideoList = ref([
+  { id: 1, url: '/sparyVideo.mp4' },
+  { id: 2, url: '/sparyVideo.mp4' },
+  { id: 3, url: '/sparyVideo.mp4' },
+]);
 watch(
   () => props.data,
-  (newVal) => {
-    if (newVal && newVal.length > 0) {
-      loadCameras();
+  async (newData) => {
+    removeCamera(playerRef);
+    if (playerRef.value) playerRef.value.innerHTML = '';
+    hasCamera.value = false;
+
+    await nextTick();
+
+    // 2. 提取摄像头（内部判断）
+    const list: any[] = [];
+    if (newData && newData.length > 0) {
+      newData.forEach((device: any) => {
+        if (device.cameras && device.cameras.length > 0) {
+          device.cameras.forEach((item) => {
+            list.push({ ...item, deviceID: device.deviceID });
+          });
+        }
+      });
+    }
+    if (list.length > 0) {
+      hasCamera.value = true;
+      await getCamera('', playerRef, ref(true), '', list);
+    } else {
+      hasCamera.value = false;
     }
   },
   { deep: true, immediate: true }
 );
-onMounted(() => {
-  loadCameras();
-});
+
+// 卸载清空
 onBeforeUnmount(() => {
-  // removeCamera(playerRef);
+  removeCamera(playerRef);
+  if (playerRef.value) playerRef.value.innerHTML = '';
 });
 </script>
 
 <style lang="less" scoped>
 .camera-modal {
   width: 100%;
-  .camrea-area {
-    width: 90%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.camrea-area {
+  width: 90%;
+  height: 100%;
+}
+.camera-area1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.video-item {
+  width: 395px;
+  height: 250px;
+  .live-video {
+    width: 100%;
     height: 100%;
   }
 }
-
 :deep(#LivePlayerBox) {
   display: flex;
   flex-direction: row;