Merge branch 'feat/data-board-video-component-support-rtsp-protocol' into 'main_dev'

feat: 数据看板视频组件支持rtsp协议播放 See merge request yunteng/thingskit-front!671

Merge branch 'feat/data-board-video-component-support-rtsp-protocol' into 'main_dev'
feat: 数据看板视频组件支持rtsp协议播放 See merge request yunteng/thingskit-front!671
xp.Huang
2 parents c8506463 bc4d5806
Showing 6 changed files with 112 additions and 54 deletions
src/components/Video/src/VideoPlay.vue
src/views/visual/packages/components/Other/MonitorVideo/config.ts
src/views/visual/packages/components/Other/MonitorVideo/datasource.config.ts
src/views/visual/packages/components/Other/MonitorVideo/index.vue
src/views/visual/packages/index.type.ts
src/views/visual/palette/components/WidgetWrapper/WidgetHeader.vue
--- a/src/components/Video/src/VideoPlay.vue
View file @8cfa338
+++ b/src/components/Video/src/VideoPlay.vue
View file @8cfa338
@@ -25,6 +25,7 @@
   const getOptions = computed(() => {
     const { options, withToken } = props;
+
     const defaultOptions: VideoJsPlayerOptions & Recordable = {
       language: 'zh',
       muted: true,
@@ -50,8 +51,7 @@
         },
       },
     };
-
-    return { ...defaultOptions, ...options };
+    return videoJs.mergeOptions(defaultOptions, options);
   });
   const getWidthHeight = computed(() => {
@@ -62,6 +62,7 @@
   });
   const init = () => {
+    if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose();
     videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
       emit('ready', unref(videoPlayInstance));
     });
@@ -76,6 +77,11 @@
     videoPlayInstance.value = null;
     emit('onUnmounted');
   });
+
+  defineExpose({
+    reloadPlayer: init,
+    getInstance: () => unref(videoPlayInstance),
+  });
 </script>
 <template>
--- a/src/views/visual/packages/components/Other/MonitorVideo/config.ts
View file @8cfa338
+++ b/src/views/visual/packages/components/Other/MonitorVideo/config.ts
View file @8cfa338
@@ -10,6 +10,7 @@ import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages
 export const option: PublicPresetOptions = {
   componetDesign: false,
+  trendQuery: false,
 };
 export default class Config extends PublicConfigClass implements CreateComponentType {
--- a/src/views/visual/packages/components/Other/MonitorVideo/datasource.config.ts
View file @8cfa338
+++ b/src/views/visual/packages/components/Other/MonitorVideo/datasource.config.ts
View file @8cfa338
@@ -26,7 +26,7 @@ export enum VideoOriginalEnum {
 export enum VideoOriginalNameEnum {
   CUSTOM = '自定义',
-  VIDEO_MANAGE = '流媒体获取',
+  VIDEO_MANAGE = '平台获取',
 }
 export const formSchemas: FormSchema[] = [
@@ -36,15 +36,29 @@ export const formSchemas: FormSchema[] = [
     label: '视频来源',
     colProps: { span: 8 },
     defaultValue: VideoOriginalEnum.CUSTOM,
-    componentProps: {
-      placeholder: '请选择视频来源',
-      options: [
-        { label: VideoOriginalNameEnum[VideoOriginalEnum.CUSTOM], value: VideoOriginalEnum.CUSTOM },
-        {
-          label: VideoOriginalNameEnum[VideoOriginalEnum.VIDEO_MANAGE],
-          value: VideoOriginalEnum.VIDEO_MANAGE,
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        placeholder: '请选择视频来源',
+        options: [
+          {
+            label: VideoOriginalNameEnum[VideoOriginalEnum.CUSTOM],
+            value: VideoOriginalEnum.CUSTOM,
+          },
+          {
+            label: VideoOriginalNameEnum[VideoOriginalEnum.VIDEO_MANAGE],
+            value: VideoOriginalEnum.VIDEO_MANAGE,
+          },
+        ],
+        onChange() {
+          setFieldsValue({
+            [FormFieldEnum.ACCESS_MODE]: null,
+            [FormFieldEnum.ORGANIZATION_ID]: null,
+            [FormFieldEnum.VIDEO_PLAY_URL]: null,
+            [FormFieldEnum.VIDEO_ID]: null,
+          });
         },
-      ],
+      };
     },
   },
   {
@@ -69,9 +83,19 @@ export const formSchemas: FormSchema[] = [
     label: '组织',
     colProps: { span: 8 },
     ifShow: ({ model }) => model[FormFieldEnum.VIDEO_TYPE] === VideoOriginalEnum.VIDEO_MANAGE,
-    componentProps: {
-      showCreate: false,
-      allowClean: true,
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        showCreate: false,
+        allowClean: true,
+        onChange() {
+          setFieldsValue({
+            [FormFieldEnum.ACCESS_MODE]: null,
+            [FormFieldEnum.VIDEO_PLAY_URL]: null,
+            [FormFieldEnum.VIDEO_ID]: null,
+          });
+        },
+      };
     },
   },
   {
@@ -91,7 +115,6 @@ export const formSchemas: FormSchema[] = [
         valueField: 'id',
         resultField: 'data',
         onChange(value: string, options: CameraModel) {
-          console.log(options);
           setFieldsValue({
             [FormFieldEnum.ACCESS_MODE]: value ? (options || {}).accessMode : null,
             [FormFieldEnum.VIDEO_PLAY_URL]: value ? (options || {}).videoUrl : null,
--- a/src/views/visual/packages/components/Other/MonitorVideo/index.vue
View file @8cfa338
+++ b/src/views/visual/packages/components/Other/MonitorVideo/index.vue
View file @8cfa338
@@ -2,14 +2,17 @@
   import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
-  import { computed } from 'vue';
+  import { computed, onMounted, onUnmounted, toRaw } from 'vue';
   import { VideoJsPlayerOptions } from 'video.js';
   import { AccessMode } from '/@/views/camera/manage/config.data';
-  import { onMounted } from 'vue';
   import { unref } from 'vue';
-  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '/@/api/camera/cameraManager';
   import { ref } from 'vue';
   import { Spin } from 'ant-design-vue';
+  import { useFingerprint } from '/@/utils/useFingerprint';
+  import { isRtspProtocol } from '/@/components/Video/src/utils';
+  import { isShareMode } from '/@/views/sys/share/hook';
+  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -17,15 +20,9 @@
   const loading = ref(true);
-  const getIsSelectPreviewMode = computed(() => {
-    return props.config.option.mode === ComponentMode.SELECT_PREVIEW;
-  });
+  const basicVideoPlayEl = ref<Nullable<InstanceType<typeof BasicVideoPlay>>>(null);
-  const getIsStreamingMode = computed(() => {
-    const { option } = props.config;
-    const { videoConfig } = option;
-    return videoConfig?.accessMode === AccessMode.Streaming;
-  });
+  const withToken = ref(false);
   const playSource = ref<Record<'src' | 'type', string>>(
     {} as unknown as Record<'src' | 'type', string>
@@ -34,55 +31,79 @@
   const exampleVideoPlay =
     'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm';
-  const getVideoPlaySources = computed(() => {
-    const { option } = props.config;
-    const { videoConfig } = option;
-    const { url } = videoConfig || {};
-    return Object.assign(
-      {
-        src: unref(getIsSelectPreviewMode) ? exampleVideoPlay : url,
-        type: getVideoTypeByUrl(url || ''),
-      },
-      unref(playSource)
-    );
-  });
-
   const getOptions = computed<VideoJsPlayerOptions>(() => {
     return {
       width: '100%' as unknown as number,
       height: '100%' as unknown as number,
-      sources: unref(getVideoPlaySources).src
-        ? ([unref(getVideoPlaySources)] as VideoJsPlayerOptions['sources'])
-        : [],
     };
   });
+  const { getResult } = useFingerprint();
+
   const handleGetVideoPlayUrl = async () => {
     try {
-      if (unref(getIsStreamingMode) && !unref(getVideoPlaySources).src) {
-        const { option } = props.config;
-        const { videoConfig } = option;
-        if (!videoConfig?.id) return;
-        const { data: { url } = { url: '' } } = await getStreamingPlayUrl(videoConfig?.id);
-        playSource.value = {
-          src: url,
-          type: getVideoTypeByUrl(url),
+      const instance = unref(basicVideoPlayEl)?.getInstance();
+      const { config } = props;
+      const { option } = config;
+      const { videoConfig, uuid } = option || {};
+      if (!uuid) return;
+      const { url, id, accessMode } = videoConfig || {};
+      const type = getVideoTypeByUrl(url!);
+      let playUrl = url;
+      if (accessMode === AccessMode.Streaming && id) {
+        const { data: { url } = { url: '' } } = await getStreamingPlayUrl(id!);
+        playUrl = url;
+      }
+
+      if (isRtspProtocol(url!)) {
+        const result = await getResult();
+        const { visitorId } = result;
+        playUrl = getFlvPlayUrl(playUrl!, visitorId);
+        withToken.value = true;
+
+        (instance!.options_ as any).flvjs.config.headers = {
+          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
         };
       }
+
+      playSource.value = {
+        src: playUrl!,
+        type,
+      };
+
+      instance?.src(toRaw(unref(playSource)));
+      instance?.play();
     } finally {
       loading.value = false;
     }
   };
+  const handleSelectPreview = () => {
+    loading.value = false;
+    const instance = unref(basicVideoPlayEl)?.getInstance();
+    instance?.src({ type: getVideoTypeByUrl(exampleVideoPlay), src: exampleVideoPlay });
+    instance?.play();
+  };
+
   onMounted(() => {
-    handleGetVideoPlayUrl();
+    const { option } = props.config;
+    const { mode } = option;
+    mode === ComponentMode.SELECT_PREVIEW ? handleSelectPreview() : handleGetVideoPlayUrl();
+  });
+
+  onUnmounted(async () => {
+    const { visitorId } = await getResult();
+    const { option } = props.config;
+    const { videoConfig } = option || {};
+    const { url } = videoConfig || {};
+    isRtspProtocol(url!) && closeFlvPlay(url!, visitorId);
   });
 </script>
 <template>
   <main class="w-full h-full flex flex-col justify-center items-center p-2">
     <Spin :spinning="loading" wrapper-class-name="video-spin">
-      <BasicVideoPlay :options="getOptions" />
+      <BasicVideoPlay ref="basicVideoPlayEl" :options="getOptions" :with-token="withToken" />
     </Spin>
   </main>
 </template>
--- a/src/views/visual/packages/index.type.ts
View file @8cfa338
+++ b/src/views/visual/packages/index.type.ts
View file @8cfa338
@@ -89,6 +89,7 @@ export interface PublicPresetOptions {
   maxScale?: number;
   minScale?: number;
   componetDesign?: boolean;
+  trendQuery?: boolean;
   multipleDataSourceComponent?: boolean;
   [ComponentConfigFieldEnum.FONT_COLOR]?: string;
   [ComponentConfigFieldEnum.UNIT]?: string;
@@ -132,7 +133,6 @@ export interface ComponentPropsConfigType<P = PublicPresetOptions, O = DataSourc
 export interface PackagesType {
   [PackagesCategoryEnum.TEXT]: ConfigType[];
-  [PackagesCategoryEnum.PICTURE]: ConfigType[];
   [PackagesCategoryEnum.INSTRUMENT]: ConfigType[];
   [PackagesCategoryEnum.CONTROL]: ConfigType[];
   [PackagesCategoryEnum.MAP]: ConfigType[];
--- a/src/views/visual/palette/components/WidgetWrapper/WidgetHeader.vue
View file @8cfa338
+++ b/src/views/visual/palette/components/WidgetWrapper/WidgetHeader.vue
View file @8cfa338
@@ -17,6 +17,7 @@
   import { Layout } from 'vue3-grid-layout';
   import { DataComponentRecord } from '/@/api/dataBoard/model';
   import { computed } from 'vue';
+  import { useGetComponentConfig } from '../../../packages/hook/useGetComponetConfig';
   const props = defineProps<{
     sourceInfo: WidgetDataType;
@@ -79,6 +80,12 @@
     return { id, w, h, x, y } as ComponentLayoutType;
   });
+  const hasTrendQueryIcon = computed(() => {
+    const frontId = props.sourceInfo.frontId;
+    const config = useGetComponentConfig(frontId);
+    return !!config.persetOption?.trendQuery;
+  });
+
   async function handleCopy() {
     const id = props.sourceInfo.id;
     const copyRecord = props.rawDataSource.componentData.find((item) => item.id === id);
@@ -123,7 +130,7 @@
       </Tooltip>
       <div v-if="!getIsSharePage" class="flex items-center w-16 justify-evenly">
-        <Tooltip v-if="!isCustomerUser" title="趋势">
+        <Tooltip v-if="!isCustomerUser && hasTrendQueryIcon" title="趋势">
           <AreaChartOutlined class="text-lg" @click="handleOpenTrendModal" />
         </Tooltip>
         <AuthDropDown