feat: implement camera manage streaming config

ww
1 parent fd5c0bb0
Showing 6 changed files with 229 additions and 52 deletions
src/api/camera/cameraManager.ts
src/api/camera/model/cameraModel.ts
src/views/camera/manage/CameraDrawer.vue
src/views/camera/manage/DialogPreviewVideo.vue
src/views/camera/manage/config.data.ts
src/views/camera/streaming/config.data.ts
--- a/src/api/camera/cameraManager.ts
View file @7f3e471
+++ b/src/api/camera/cameraManager.ts
View file @7f3e471
@@ -12,9 +12,10 @@ enum CameraManagerApi {
   CAMERA_GET_URL = '/video',
   CAMERA_DELETE_URL = '/video',
   CAMERA_GET_DETAIL_URL = '/video',
-  STERAMING_GET_URL = '/video/platform',
-  STERAMING_POST_URL = '/video/platform',
-  STERAMING_DELETE_URL = '/video/platform',
+  STREAMING_GET_URL = '/video/platform',
+  STREAMING_POST_URL = '/video/platform',
+  STREAMING_DELETE_URL = '/video/platform',
+  STREAMING_PLAY_GET_URL = '/video/url',
 }
 export const cameraPage = (params: CameraQueryParam) => {
@@ -59,7 +60,7 @@ export const getCameraManageDetail = (id: string) => {
  */
 export const getStreamingMediaList = (params: StreamingQueryParam) => {
   return defHttp.get({
-    url: CameraManagerApi.STERAMING_GET_URL,
+    url: CameraManagerApi.STREAMING_GET_URL,
     params,
   });
 };
@@ -71,7 +72,7 @@ export const getStreamingMediaList = (params: StreamingQueryParam) => {
  */
 export const createOrUpdateStreamingMediaRecord = (params: StreamingSubmitParam) => {
   return defHttp.post({
-    url: CameraManagerApi.STERAMING_POST_URL,
+    url: CameraManagerApi.STREAMING_POST_URL,
     params,
   });
 };
@@ -83,7 +84,18 @@ export const createOrUpdateStreamingMediaRecord = (params: StreamingSubmitParam)
  */
 export const deleteStreamingMediaRecord = (params: StreamingMediaDeleteParam) => {
   return defHttp.delete({
-    url: CameraManagerApi.STERAMING_POST_URL,
+    url: CameraManagerApi.STREAMING_POST_URL,
     params,
   });
 };
+
+/**
+ * @description 获取流媒体播放地址
+ * @param entityId
+ * @returns
+ */
+export const getStreamingPlayUrl = (entityId: string) => {
+  return defHttp.get({
+    url: `${CameraManagerApi.STREAMING_PLAY_GET_URL}/${entityId}`,
+  });
+};
--- a/src/api/camera/model/cameraModel.ts
View file @7f3e471
+++ b/src/api/camera/model/cameraModel.ts
View file @7f3e471
@@ -10,6 +10,7 @@ export type CameraParam = {
 };
 export interface CameraModel {
+  accessMode: number;
   avatar?: string;
   brand: string;
   createTime?: '2022-04-19T11:33:13.113Z';
@@ -36,6 +37,21 @@ export interface CameraModel {
   videoUrl: string;
 }
+export interface StreamingManageRecord {
+  id: string;
+  creator: string;
+  createTime: string;
+  name: string;
+  enabled: boolean;
+  tenantId: string;
+  sn: string;
+  organizationId: string;
+  organizationName: string;
+  status: boolean;
+  accessMode: number;
+  playProtocol: number;
+}
+
 export interface StreamingMediaModel {
   id: string;
   creator: string;
--- a/src/views/camera/manage/CameraDrawer.vue
View file @7f3e471
+++ b/src/views/camera/manage/CameraDrawer.vue
View file @7f3e471
@@ -29,9 +29,9 @@
   </BasicDrawer>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
+  import { defineComponent, ref, computed, unref, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from './config.data';
+  import { formSchema, manuallyEnter, streamingMediaAcquire } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
   import { message, Upload } from 'ant-design-vue';
@@ -49,7 +49,10 @@
       const isUpdate = ref(true);
       const editId = ref('');
-      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+      const [
+        registerForm,
+        { validate, setFieldsValue, resetFields, removeSchemaByFiled, appendSchemaByField },
+      ] = useForm({
         labelWidth: 120,
         schemas: formSchema,
         showActionButtonGroup: false,
@@ -60,6 +63,20 @@
         setDrawerProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
         if (unref(isUpdate)) {
+          await nextTick();
+          removeSchemaByFiled([
+            'videoPlatformId',
+            'streamType',
+            'playProtocol',
+            'sn',
+            'brand',
+            'videoUrl',
+          ]);
+          if (data.record.accessMode === 0) {
+            manuallyEnter.forEach((schema) => appendSchemaByField(schema, undefined));
+          } else {
+            streamingMediaAcquire.forEach((schema) => appendSchemaByField(schema, undefined));
+          }
           editId.value = data.record.id;
           tenantLogo.value = data.record?.avatar;
           await setFieldsValue(data.record);
@@ -104,12 +121,6 @@
         try {
           const { createMessage } = useMessage();
           const values = await validate();
-          if (values.name == undefined || values.name == '')
-            return createMessage.error('请填写视频名字');
-          if (values.sn == undefined || values.sn == '')
-            return createMessage.error('请填写摄像头编号');
-          if (values.videoUrl == undefined || values.videoUrl == '')
-            return createMessage.error('请填写视频流');
           if (!values) return;
           if (tenantLogo.value !== '') {
             values.avatar = tenantLogo.value;
--- a/src/views/camera/manage/DialogPreviewVideo.vue
View file @7f3e471
+++ b/src/views/camera/manage/DialogPreviewVideo.vue
View file @7f3e471
@@ -23,10 +23,13 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, nextTick, reactive } from 'vue';
+  import { ref, nextTick, reactive, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
+  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 { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
   const heightNum = ref(800);
   const showVideo = ref(false);
@@ -63,16 +66,26 @@
     console.log(video.value);
   });
-  const [register] = useModalInner((data) => {
-    if (data) {
-      if (data.record.videoUrl) {
-        showVideo.value = true;
-        options.src = data.record.videoUrl;
-        options.autoPlay = true;
+  const [register] = useModalInner(
+    async (data: { record: CameraModel | StreamingManageRecord }) => {
+      const { record } = data;
+      if (record.accessMode === AccessMode.ManuallyEnter) {
+        if ((record as CameraModel).videoUrl) {
+          showVideo.value = true;
+          options.src = (record as CameraModel).videoUrl;
+          options.autoPlay = true;
+        }
+      } else {
+        try {
+          const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
+          showVideo.value = true;
+          options.src = url;
+        } catch (error) {}
       }
     }
-  });
+  );
   const handleCancel = () => {
+    console.log(unref(video));
     //关闭暂停播放视频
     video.value.pause();
   };
--- a/src/views/camera/manage/config.data.ts
View file @7f3e471
+++ b/src/views/camera/manage/config.data.ts
View file @7f3e471
@@ -4,6 +4,23 @@ import { copyTransFun } from '/@/utils/fnUtils';
 import type { FormSchema as QFormSchema } from '/@/components/Form/index';
 import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
+import { getStreamingMediaList } from '/@/api/camera/cameraManager';
+
+export enum AccessMode {
+  ManuallyEnter = 0,
+  Streaming = 1,
+}
+
+export enum PlayProtocol {
+  HTTP = 0,
+  HTTPS = 1,
+}
+
+export enum StreamType {
+  MASTER = 0,
+  CHILD = 1,
+  THIRD = 2,
+}
 // 表格列数据
 export const columns: BasicColumn[] = [
@@ -59,6 +76,97 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
+/**
+ * @description 手动输入
+ */
+export const manuallyEnter: FormSchema[] = [
+  {
+    field: 'brand',
+    label: '视频厂家',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入视频厂家',
+    },
+  },
+  {
+    field: 'sn',
+    label: '摄像头编号',
+    required: true,
+    component: 'Input',
+    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
+    componentProps: {
+      placeholder: '请输入摄像头编号',
+    },
+  },
+  {
+    field: 'videoUrl',
+    label: '视频流',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入视频流',
+      maxLength: 255,
+    },
+    rules: [...CameraVideoUrl, { required: true, message: '视频流是必填项' }],
+  },
+];
+
+/**
+ * @description 流媒体获取
+ */
+export const streamingMediaAcquire: FormSchema[] = [
+  {
+    field: 'videoPlatformId',
+    label: '流媒体配置',
+    component: 'ApiSelect',
+    componentProps: {
+      placeholder: '请选择流媒体配置',
+      api: getStreamingMediaList,
+      labelField: 'host',
+      valueField: 'id',
+    },
+  },
+  {
+    field: 'streamType',
+    label: '码流',
+    component: 'RadioGroup',
+    defaultValue: StreamType.MASTER,
+    componentProps: {
+      placeholder: '请选择码流',
+      defaultValue: StreamType.MASTER,
+      options: [
+        { label: '主码流', value: StreamType.MASTER },
+        { label: '子码流', value: StreamType.CHILD },
+        { label: '第三码流', value: StreamType.THIRD },
+      ],
+    },
+  },
+  {
+    field: 'playProtocol',
+    label: '播放协议',
+    component: 'RadioGroup',
+    defaultValue: PlayProtocol.HTTP,
+    componentProps: {
+      placeholder: '请选择播放协议',
+      defaultValue: PlayProtocol.HTTP,
+      options: [
+        { label: 'http', value: PlayProtocol.HTTP },
+        { label: 'https', value: PlayProtocol.HTTPS },
+      ],
+    },
+  },
+  {
+    field: 'sn',
+    label: '监控点编号',
+    component: 'Input',
+    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
+
+    componentProps: {
+      placeholder: '请输入监控点编号',
+    },
+  },
+];
+
 // 弹框配置项
 export const formSchema: QFormSchema[] = [
   {
@@ -76,7 +184,7 @@ export const formSchema: QFormSchema[] = [
       placeholder: '请输入视频名字',
       maxLength: 30,
     },
-    rules: CameraMaxLength,
+    rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
   },
   {
     field: 'organizationId',
@@ -92,32 +200,48 @@ export const formSchema: QFormSchema[] = [
     },
   },
   {
-    field: 'brand',
-    label: '视频厂家',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入视频厂家',
-    },
-  },
-  {
-    field: 'sn',
-    label: '摄像头编号',
-    required: true,
-    component: 'Input',
-    rules: CameraVideoUrl,
-    componentProps: {
-      placeholder: '请输入摄像头编号',
-    },
-  },
-  {
-    field: 'videoUrl',
-    label: '视频流',
-    required: true,
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入视频流',
-      maxLength: 255,
+    label: '视频流获取方式',
+    field: 'accessMode',
+    component: 'RadioGroup',
+    rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
+    defaultValue: AccessMode.ManuallyEnter,
+    componentProps({ formActionType }) {
+      return {
+        defaultValue: AccessMode.ManuallyEnter,
+        placeholder: '请选择视频流获取方式',
+        options: [
+          { label: '手动输入', value: AccessMode.ManuallyEnter },
+          { label: '流媒体获取', value: AccessMode.Streaming },
+        ],
+        onChange(event: { target: { value: number } }) {
+          formActionType.removeSchemaByFiled([
+            'videoPlatformId',
+            'streamType',
+            'playProtocol',
+            'sn',
+            'brand',
+            'videoUrl',
+          ]);
+          const {
+            target: { value },
+          } = event;
+          if (value === AccessMode.ManuallyEnter) {
+            manuallyEnter.forEach((schema) =>
+              formActionType.appendSchemaByField(schema, undefined)
+            );
+          } else {
+            streamingMediaAcquire.forEach((schema) =>
+              formActionType.appendSchemaByField(schema, undefined)
+            );
+
+            formActionType.setFieldsValue({
+              streamType: StreamType.MASTER,
+              playProtocol: PlayProtocol.HTTP,
+            });
+          }
+        },
+      };
     },
-    rules: CameraVideoUrl,
   },
+  ...manuallyEnter,
 ];
--- a/src/views/camera/streaming/config.data.ts
View file @7f3e471
+++ b/src/views/camera/streaming/config.data.ts
View file @7f3e471
+import { PlayProtocol } from '../manage/config.data';
 import type { StreamingMediaModel } from '/@/api/camera/model/cameraModel';
 import { BasicColumn, FormSchema } from '/@/components/Table';
@@ -72,8 +73,8 @@ export const formDetailSchema: FormSchema[] = [
     rules: [{ required: true, message: '流媒体部署环境为必填项', type: 'number' }],
     componentProps: {
       options: [
-        { label: 'http', value: 0 },
-        { label: 'https', value: 1 },
+        { label: 'http', value: PlayProtocol.HTTP },
+        { label: 'https', value: PlayProtocol.HTTPS },
       ],
     },
   },