Merge branch 'ww' into 'main'

fix: video can not play

See merge request huang/yun-teng-iot-front!260

@@ -322,3 +322,23 @@ export const DeviceProfileQueryUserNameMaxLength: Rule[] = [
     validateTrigger: 'blur',
     validateTrigger: 'blur',
   },
   },
 ];
 ];
+
+enum MediaType {
+  MP4 = 'mp4',
+  M3U8 = 'm3u8',
+}
+
+export const MediaTypeValidate: Rule[] = [
+  {
+    required: true,
+    validator: (_, value: string) => {
+      const reg = /(?:.*)(?<=\.)/;
+      const type = value.replace(reg, '');
+      if (type !== MediaType.M3U8) {
+        return Promise.reject('视频流只支持m3u8格式');
+      }
+      return Promise.resolve();
+    },
+    validateTrigger: 'blur',
+  },
+];

@@ -31,6 +31,11 @@
   import { AccessMode } from './config.data';
   import { AccessMode } from './config.data';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
 
 
+  enum MediaType {
+    MP4 = 'mp4',
+    M3U8 = 'm3u8',
+  }
+
   const heightNum = ref(800);
   const heightNum = ref(800);
   const showVideo = ref(false);
   const showVideo = ref(false);
   const options = reactive({
   const options = reactive({
@@ -66,13 +71,19 @@
     console.log(video.value);
     console.log(video.value);
   });
   });
 
 
+  const getMediaType = (suffix: string) => {
+    return suffix === MediaType.M3U8 ? suffix : `video/${suffix}`;
+  };
+
   const [register] = useModalInner(
   const [register] = useModalInner(
     async (data: { record: CameraModel | StreamingManageRecord }) => {
     async (data: { record: CameraModel | StreamingManageRecord }) => {
-      // setModalProps({ destroyOnClose: true });
+      let reg = /(?:.*)(?<=\.)/;
       const { record } = data;
       const { record } = data;
       if (record.accessMode === AccessMode.ManuallyEnter) {
       if (record.accessMode === AccessMode.ManuallyEnter) {
         if ((record as CameraModel).videoUrl) {
         if ((record as CameraModel).videoUrl) {
+          const type = (record as CameraModel).videoUrl.replace(reg, '');
           showVideo.value = true;
           showVideo.value = true;
+          options.type = getMediaType(type);
           options.src = (record as CameraModel).videoUrl;
           options.src = (record as CameraModel).videoUrl;
           options.autoPlay = true;
           options.autoPlay = true;
         }
         }
@@ -81,10 +92,13 @@
           const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
           const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
           showVideo.value = true;
           showVideo.value = true;
           options.src = url;
           options.src = url;
+          const type = (url as CameraModel).videoUrl.replace(reg, '');
+          options.type = getMediaType(type);
         } catch (error) {}
         } catch (error) {}
       }
       }
     }
     }
   );
   );
+
   const handleCancel = () => {
   const handleCancel = () => {
     //关闭暂停播放视频
     //关闭暂停播放视频
     options.src = '';
     options.src = '';

@@ -3,7 +3,7 @@ import { getOrganizationList } from '/@/api/system/system';
 import { copyTransFun } from '/@/utils/fnUtils';
 import { copyTransFun } from '/@/utils/fnUtils';
 import type { FormSchema as QFormSchema } from '/@/components/Form/index';
 import type { FormSchema as QFormSchema } from '/@/components/Form/index';
 
 
-import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
+import { CameraVideoUrl, CameraMaxLength, MediaTypeValidate } from '/@/utils/rules';
 import { getStreamingMediaList } from '/@/api/camera/cameraManager';
 import { getStreamingMediaList } from '/@/api/camera/cameraManager';
 import { h } from 'vue';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 import SnHelpMessage from './SnHelpMessage.vue';
@@ -176,7 +176,7 @@ export const formSchema: QFormSchema[] = [
       placeholder: '请输入视频流',
       placeholder: '请输入视频流',
       maxLength: 255,
       maxLength: 255,
     },
     },
-    rules: [...CameraVideoUrl, { required: true, message: '视频流是必填项' }],
+    rules: [...CameraVideoUrl, ...MediaTypeValidate, { required: true, message: '视频流是必填项' }],
   },
   },
 
 
   {
   {