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 | { | ... | ... |