Showing
3 changed files
with
37 additions
and
3 deletions
... | ... | @@ -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 | { | ... | ... |