fix: camer split screen mode can not play stream

ww
1 parent 9a1b9a75
Showing 3 changed files with 58 additions and 13 deletions
src/views/camera/manage/DialogPreviewVideo.vue
src/views/camera/manage/SplitScreenMode.vue
src/views/camera/manage/config.data.ts
--- a/src/views/camera/manage/DialogPreviewVideo.vue
View file @879642e
+++ b/src/views/camera/manage/DialogPreviewVideo.vue
View file @879642e
@@ -28,14 +28,9 @@
   import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
   import { videoPlay } from 'vue3-video-play'; // 引入组件
   import 'vue3-video-play/dist/style.css'; // 引入css
-  import { AccessMode } from './config.data';
+  import { AccessMode, MediaType } from './config.data';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
-  enum MediaType {
-    MP4 = 'mp4',
-    M3U8 = 'm3u8',
-  }
-
   const heightNum = ref(800);
   const showVideo = ref(false);
   const options = reactive({
--- a/src/views/camera/manage/SplitScreenMode.vue
View file @879642e
+++ b/src/views/camera/manage/SplitScreenMode.vue
View file @879642e
@@ -10,11 +10,16 @@
   import { useFullscreen } from '@vueuse/core';
   import CameraDrawer from './CameraDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
-  import { PageMode } from './config.data';
+  import { AccessMode, MediaType, PageMode } from './config.data';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
   import { isDef } from '/@/utils/is';
+  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
-  type CameraRecordItem = CameraRecord & { canPlay?: boolean };
+  type CameraRecordItem = CameraRecord & {
+    canPlay?: boolean;
+    type?: string;
+    isTransform?: boolean;
+  };
   const emit = defineEmits(['switchMode']);
   const organizationIdTreeRef = ref(null);
@@ -76,13 +81,48 @@
         organizationId: unref(organizationId)!,
       });
       pagination.total = total;
+
+      for (const item of items) {
+        // await beforeVideoPlay(item);
+        (item as CameraRecordItem).isTransform = false;
+        beforeVideoPlay(item);
+      }
       cameraList.value = items;
-      console.log({ url: cameraList.value.map((item) => item.videoUrl) });
     } catch (error) {
     } finally {
       loading.value = false;
     }
   };
+  const getMediaType = (suffix: string) => {
+    return suffix === MediaType.M3U8 ? suffix : `video/${suffix}`;
+  };
+
+  const beforeVideoPlay = async (record: CameraRecordItem) => {
+    let reg = /(?:.*)(?<=\.)/;
+    if (record.accessMode === AccessMode.ManuallyEnter) {
+      if (record.videoUrl) {
+        const type = record.videoUrl.replace(reg, '');
+        record.type = getMediaType(type);
+        record.isTransform = true;
+      }
+    }
+    if (record.accessMode === AccessMode.Streaming) {
+      try {
+        const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
+        const type = url.replace(reg, '');
+        const index = unref(cameraList).findIndex((item) => item.id === record.id);
+        if (~index) {
+          const oldRecord = unref(cameraList).at(index)!;
+          unref(cameraList)[index] = {
+            ...oldRecord,
+            videoUrl: url,
+            type: getMediaType(type),
+            isTransform: true,
+          };
+        }
+      } catch (error) {}
+    }
+  };
   const handleSwitchLayoutWay = (pageSize: number, layout: number) => {
     pagination.colNumber = layout;
@@ -115,7 +155,7 @@
       ~index &&
         !unref(cameraList).at(index)!.canPlay &&
         (unref(cameraList).at(index)!.canPlay = false);
-    }, 10000);
+    }, 30000);
   };
   const handleLoadData = (record: CameraRecordItem) => {
@@ -171,8 +211,8 @@
                 :page-size="pagination.pageSize"
                 :show-size-changer="false"
                 @change="getCameraList"
+                :simple="true"
                 :show-quick-jumper="true"
-                size="small"
                 :show-total="(total) => `共 ${total} 条`"
               />
             </div>
@@ -203,16 +243,21 @@
                 :span="getColLayout"
               >
                 <div class="box-border w-full h-full p-3">
-                  <div class="bg-yellow-50 w-full h-full overflow-hidden relative video-container">
+                  <div class="bg-black w-full h-full overflow-hidden relative video-container">
+                    <Spin v-show="!item.isTransform" :spinning="!item.isTransform">
+                      <div class="bg-black text-light-50"> </div>
+                    </Spin>
                     <VideoPlay
+                      v-show="item.isTransform"
                       @loadstart="handleLoadStart(item)"
                       @loadeddata="handleLoadData(item)"
                       v-bind="options"
                       :src="item.videoUrl"
                       :title="item.name"
+                      :type="item.type"
                     />
                     <div
-                      v-if="isDef(item.canPlay) && !item.canPlay"
+                      v-if="item.isTransform && isDef(item.canPlay) && !item.canPlay"
                       class="video-container-error-msk absolute top-0 left-0 text-lg w-full h-full text-light-50 flex justify-center items-center z-50 bg-black"
                     >
                       视频加载出错了！
--- a/src/views/camera/manage/config.data.ts
View file @879642e
+++ b/src/views/camera/manage/config.data.ts
View file @879642e
@@ -29,6 +29,11 @@ export enum PageMode {
   FULL_SCREEN_MODE = 'fullScreenMode',
 }
+export enum MediaType {
+  MP4 = 'mp4',
+  M3U8 = 'm3u8',
+}
+
 // 表格列数据
 export const columns: BasicColumn[] = [
   {