Commit 140408fd91402f3abfd5a8d26ab080b42372a6c3

Authored by ww
1 parent 7a1031f4

fix: video can not play

... ... @@ -322,3 +322,23 @@ export const DeviceProfileQueryUserNameMaxLength: Rule[] = [
322 322 validateTrigger: 'blur',
323 323 },
324 324 ];
  325 +
  326 +enum MediaType {
  327 + MP4 = 'mp4',
  328 + M3U8 = 'm3u8',
  329 +}
  330 +
  331 +export const MediaTypeValidate: Rule[] = [
  332 + {
  333 + required: true,
  334 + validator: (_, value: string) => {
  335 + const reg = /(?:.*)(?<=\.)/;
  336 + const type = value.replace(reg, '');
  337 + if (type !== MediaType.M3U8) {
  338 + return Promise.reject('视频流只支持m3u8格式');
  339 + }
  340 + return Promise.resolve();
  341 + },
  342 + validateTrigger: 'blur',
  343 + },
  344 +];
... ...
... ... @@ -31,6 +31,11 @@
31 31 import { AccessMode } from './config.data';
32 32 import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
33 33
  34 + enum MediaType {
  35 + MP4 = 'mp4',
  36 + M3U8 = 'm3u8',
  37 + }
  38 +
34 39 const heightNum = ref(800);
35 40 const showVideo = ref(false);
36 41 const options = reactive({
... ... @@ -66,13 +71,19 @@
66 71 console.log(video.value);
67 72 });
68 73
  74 + const getMediaType = (suffix: string) => {
  75 + return suffix === MediaType.M3U8 ? suffix : `video/${suffix}`;
  76 + };
  77 +
69 78 const [register] = useModalInner(
70 79 async (data: { record: CameraModel | StreamingManageRecord }) => {
71   - // setModalProps({ destroyOnClose: true });
  80 + let reg = /(?:.*)(?<=\.)/;
72 81 const { record } = data;
73 82 if (record.accessMode === AccessMode.ManuallyEnter) {
74 83 if ((record as CameraModel).videoUrl) {
  84 + const type = (record as CameraModel).videoUrl.replace(reg, '');
75 85 showVideo.value = true;
  86 + options.type = getMediaType(type);
76 87 options.src = (record as CameraModel).videoUrl;
77 88 options.autoPlay = true;
78 89 }
... ... @@ -81,10 +92,13 @@
81 92 const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
82 93 showVideo.value = true;
83 94 options.src = url;
  95 + const type = (url as CameraModel).videoUrl.replace(reg, '');
  96 + options.type = getMediaType(type);
84 97 } catch (error) {}
85 98 }
86 99 }
87 100 );
  101 +
88 102 const handleCancel = () => {
89 103 //关闭暂停播放视频
90 104 options.src = '';
... ...
... ... @@ -3,7 +3,7 @@ import { getOrganizationList } from '/@/api/system/system';
3 3 import { copyTransFun } from '/@/utils/fnUtils';
4 4 import type { FormSchema as QFormSchema } from '/@/components/Form/index';
5 5
6   -import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
  6 +import { CameraVideoUrl, CameraMaxLength, MediaTypeValidate } from '/@/utils/rules';
7 7 import { getStreamingMediaList } from '/@/api/camera/cameraManager';
8 8 import { h } from 'vue';
9 9 import SnHelpMessage from './SnHelpMessage.vue';
... ... @@ -176,7 +176,7 @@ export const formSchema: QFormSchema[] = [
176 176 placeholder: '请输入视频流',
177 177 maxLength: 255,
178 178 },
179   - rules: [...CameraVideoUrl, { required: true, message: '视频流是必填项' }],
  179 + rules: [...CameraVideoUrl, ...MediaTypeValidate, { required: true, message: '视频流是必填项' }],
180 180 },
181 181
182 182 {
... ...