feat: 新增GB/T28181协议

 import { h } from 'vue';
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { Tag } from 'ant-design-vue';
+import { withInstall } from '/@/utils/index';
+
+import VideoPlay from './video.vue';
+export const Video = withInstall(VideoPlay);
 
 export const configColumns: BasicColumn[] = [
   {
@@ -40,6 +44,7 @@ export const configColumns: BasicColumn[] = [
   {
     title: '操作',
     dataIndex: 'action',
+    slots: { customRender: 'action' },
   },
 ];
 

@@ -18,12 +18,13 @@
           {
             label: '播放',
             auth: 'api:yt:sceneLinkage:get',
-            icon: 'ant-design:playCircle-outlined',
+            icon: 'ant-design:play-circle-outlined',
             onClick: handlePlay.bind(null, record),
           },
         ]"
     /></template>
   </BasicTable>
+  <VideoModal @register="registerModal" />
 </template>
 
 <script lang="ts" setup>
@@ -32,6 +33,9 @@
   import { Switch } from 'ant-design-vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { watch } from 'vue';
+  import VideoModal from './videoModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { onMounted } from 'vue';
 
   const props = defineProps({
     fromId: {
@@ -51,7 +55,9 @@
     }
   );
 
-  const [registerTable] = useTable({
+  const [registerModal, { openModal }] = useModal();
+
+  const [registerTable, { setTableData }] = useTable({
     // api: deviceCommandRecordGetQuery,
     columns: configColumns,
     showTableSetting: true,
@@ -71,7 +77,198 @@
     console.log(checked, record, 'record');
   };
 
+  const tableList = [
+    {
+      id: '8b66f4fa-88e0-42b2-be33-60652cd2bda1',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-03-10 17:16:54',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:25:49',
+      name: 'dasd',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'https://vcsplay.scjtonline.cn:8200/live/HD_1569b634-4789-11eb-ab67-3cd2e55e0b20.m3u8?auth_key=1681179278-0-0-5c54a376f2ca32d05c4a152ee96336e9',
+      sn: 's',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: '9ff408ab-980f-470c-a55c-e4e284ddd34d',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-02-22 14:50:13',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:36:25',
+      name: '2',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'https://vcsplay.scjtonline.cn:8099/live/HD_d80a740b-2672-4ad1-90e4-52eb71d8c2ef.m3u8?auth_key=1681180571-0-0-dfdb334e5f83838ade5f01f61f910107',
+      sn: '212',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: 'a6edd8fb-a91a-4a1b-8124-65959206dac4',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-02-21 16:39:51',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:33:27',
+      name: 'dasda',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'https://vcsplay.scjtonline.cn:8200/live/HD_1b361aa9-5230-48ba-b8be-d1e2c4e9b178.m3u8?auth_key=1681180365-0-0-e77f40e88550091053139f5562d8afa2',
+      brand: 'dasdad',
+      sn: 'adsad',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: '51b4c0bc-8050-4b37-bdb3-9fe08b14cf86',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-02-21 16:37:44',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:56:59',
+      name: '视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'https://vcsplay.scjtonline.cn:8093/live/HD_c54034ca-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681181808-0-0-d756d9b0426b71482e45b9377958e4dc',
+      brand: '视频厂家',
+      sn: 'DART2143SAD12RE',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: '8c0e6ed0-3176-4e76-bd8e-92f722f61e79',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-12-01 15:55:54',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:59:22',
+      name: '视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      avatar: 'https://demo.thingskit.com:9000/yunteng/itbbqOBXIUzWvjq.jpeg',
+      videoUrl: 'http://113.204.115.250:83/openUrl/iFzoWME/live.m3u8',
+      brand: '厂家',
+      sn: 'JDKSA11321',
+      organizationId: '9196fd9a-624a-4891-a8b3-ce588baedf9f',
+      organizationName: '丰田',
+      status: false,
+      channellNumber: 1,
+      accessMode: 0,
+      playProtocol: 0,
+    },
+    {
+      id: 'c30422a7-9498-49a5-96d5-e77f3a2823e3',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-12-01 14:42:52',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-03-02 17:12:53',
+      name: '湖南卫视',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8',
+      brand: 'BUZHIDAO',
+      sn: 'QKDK123456',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      channellNumber: 1,
+      accessMode: 0,
+      playProtocol: 0,
+    },
+    {
+      id: 'e3253015-b8df-4e8f-ad0c-f634d3fd927e',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-11-29 11:19:00',
+      name: '玩具视频播放',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      avatar: 'http://nc.tianzow.com:29000/yunteng/tgygMQmYaaPDPdG.jpg',
+      videoUrl: 'https://ask.dcloud.net.cn/topic.m3u8',
+      brand: '成都厂家',
+      sn: 'TCL1528GOP',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      channellNumber: 1,
+      playProtocol: 0,
+    },
+    {
+      id: '9edc9f73-3a9a-4e4b-9b4c-b955329b99b3',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-11-29 11:13:44',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-01-11 10:03:18',
+      name: '视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      sn: '7aeb4061f3cf4ba384ed8e1a3027d2a8',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 1,
+      videoPlatformId: '8cc7c20e-693b-48ea-9124-994e0908c83e',
+      streamType: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+      videoPlatformDTO: {
+        enabled: false,
+        host: '113.204.115.250:7120',
+        appKey: '28238690',
+        appSecret: 'F3e3Ffvo9Wyg9jkl8BUS',
+        ssl: 1,
+      },
+    },
+    {
+      id: '9d6675ad-07ed-45ae-bb4a-457000e164f8',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-11-21 11:49:59',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:53:27',
+      name: '新视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl: 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4',
+      brand: '1111',
+      sn: 'XYZ',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      channellNumber: 1,
+      playProtocol: 0,
+    },
+  ];
+
+  onMounted(() => {
+    setTableData(tableList);
+  });
+
   const handlePlay = (record: Recordable) => {
     console.log(record);
+    openModal(true, {
+      record,
+    });
   };
 </script>

+<script lang="ts" setup>
+  import { isNumber } from 'lodash';
+  import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
+  import 'video.js/dist/video-js.css';
+  import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
+  import { isShareMode } from '/@/views/sys/share/hook';
+  import 'videojs-flvjs-es6';
+  import {
+    CaretUpOutlined,
+    CaretRightOutlined,
+    PauseOutlined,
+    CaretDownOutlined,
+    CaretLeftOutlined,
+    PlusOutlined,
+    MinusOutlined,
+  } from '@ant-design/icons-vue';
+  import { Button } from 'ant-design-vue';
+  const { prefixCls } = useDesign('basic-video-play');
+
+  const props = defineProps<{
+    options?: VideoJsPlayerOptions;
+    withToken?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
+    (event: 'onUnmounted'): void;
+  }>();
+
+  const videoPlayEl = ref<HTMLVideoElement>();
+
+  const isPlay = ref<Boolean>(true); //是否是播放状态
+
+  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
+
+  const getOptions = computed(() => {
+    const { options, withToken } = props;
+
+    const defaultOptions: VideoJsPlayerOptions & Recordable = {
+      language: 'zh',
+      muted: true,
+      liveui: true,
+      controls: true,
+      techOrder: ['html5', 'flvjs'],
+      flvjs: {
+        mediaDataSource: {
+          isLive: true,
+          cors: true,
+          hasAudio: false,
+          withCredentials: false,
+        },
+        config: {
+          headers: {
+            ...(withToken
+              ? {
+                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+                }
+              : {}),
+          },
+          autoCleanupSourceBuffer: true,
+        },
+      },
+    };
+    return videoJs.mergeOptions(defaultOptions, options);
+  });
+
+  const getWidthHeight = computed(() => {
+    let { width = 300, height = 150 } = unref(getOptions);
+    width = isNumber(width) ? (`${width}px` as unknown as number) : width;
+    height = isNumber(height) ? (`${height}px` as unknown as number) : height;
+    return { width, height } as CSSProperties;
+  });
+
+  const init = () => {
+    if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose();
+    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
+      emit('ready', unref(videoPlayInstance));
+    });
+  };
+
+  //type  1:上    2:右    3:下    4:左    5:暂停
+  const handleClick = (type: number) => {
+    console.log(type, 'type');
+    if (type == 5) {
+      isPlay.value = !unref(isPlay);
+    }
+  };
+
+  // type 1:放大    2:缩小
+  const handleScale = (type: number) => {
+    console.log(type, 'type');
+  };
+
+  onMounted(() => {
+    init();
+  });
+
+  onUnmounted(() => {
+    unref(videoPlayInstance)?.dispose();
+    videoPlayInstance.value = null;
+    emit('onUnmounted');
+  });
+
+  defineExpose({
+    reloadPlayer: init,
+    getInstance: () => unref(videoPlayInstance),
+  });
+</script>
+
+<template>
+  <div :class="prefixCls" class="w-full h-full flex" :style="getWidthHeight">
+    <video
+      ref="videoPlayEl"
+      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-8/10 !h-full"
+      muted
+    >
+    </video>
+    <div class="!w-2/10 bg-white flex items-center flex-col">
+      <h1>云台控制</h1>
+
+      <div class="home mt-5">
+        <CaretUpOutlined class="front-sty-top child-icon" @click="handleClick(1)" />
+        <CaretRightOutlined class="front-sty-right child-icon" @click="handleClick(2)" />
+        <CaretDownOutlined class="front-sty-bottom child-icon" @click="handleClick(4)" />
+        <CaretLeftOutlined class="front-sty-left child-icon" @click="handleClick(3)" />
+
+        <Button class="front-sty-center child center" shape="circle" @click="handleClick(5)">
+          <PauseOutlined v-if="isPlay" class="child-icon" style="color: #fffbfb" />
+          <CaretRightOutlined v-else class="child-icon" style="color: #fffbfb" />
+        </Button>
+
+        <div class="box">
+          <div>
+            <Button class="left-top in-block" @click="handleClick(1)">
+              <i> 上</i>
+            </Button>
+            <Button class="right-top in-block" @click="handleClick(2)">
+              <i> 右</i>
+            </Button>
+          </div>
+          <div>
+            <Button class="left-bottom in-block" @click="handleClick(3)">
+              <i> 左</i>
+            </Button>
+            <Button class="right-bottom in-block" @click="handleClick(4)">
+              <i> 下</i>
+            </Button>
+          </div>
+
+          <Button class="circle" @click="handleClick(5)" />
+        </div>
+      </div>
+      <div class="flex justify-center mt-8">
+        <Button shape="circle" class="button-icon" @click="handleScale(1)">
+          <PlusOutlined style="color: #315a9c; font-size: 1.5rem" />
+        </Button>
+        <Button shape="circle" class="ml-10 button-icon" @click="handleScale(2)">
+          <MinusOutlined style="color: #315a9c; font-size: 1.5rem" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-basic-video-play';
+
+  .@{prefix-cls} {
+    .vjs-error-display {
+      .vjs-modal-dialog-content::after {
+        content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
+      }
+    }
+  }
+
+  .child {
+    position: absolute;
+    width: 3rem;
+    height: 3rem;
+    display: flex;
+    justify-content: center;
+    background: #e2dede;
+    align-items: center;
+    border: none;
+  }
+
+  .child-icon {
+    font-size: 1.5rem;
+    color: #fffbfb;
+  }
+
+  .button-icon {
+    width: 3rem;
+    height: 3rem;
+    background: #f5f5f5;
+    border: none;
+  }
+
+  .center {
+    top: 50%;
+    left: 50%;
+    width: 4rem;
+    height: 4rem;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: #5586d4;
+  }
+
+  .home {
+    position: relative;
+    width: 10rem;
+    height: 10rem;
+  }
+
+  .box {
+    transform: rotateZ(45deg);
+    width: 10rem;
+    height: 10rem;
+  }
+
+  .box i {
+    visibility: collapse;
+  }
+
+  .front-sty-top {
+    position: absolute;
+    top: 1rem;
+    z-index: 9999;
+    left: 50%;
+    transform: translate(-50%);
+  }
+
+  .front-sty-bottom {
+    position: absolute;
+    bottom: 1rem;
+    z-index: 9999;
+    left: 50%;
+    transform: translate(-50%);
+  }
+
+  .front-sty-right {
+    position: absolute;
+    top: 50%;
+    z-index: 9999;
+    right: 1rem;
+    transform: translateY(-50%);
+  }
+
+  .front-sty-left {
+    position: absolute;
+    top: 50%;
+    z-index: 9999;
+    left: 1rem;
+    transform: translateY(-50%);
+  }
+
+  .front-sty-center {
+    position: absolute;
+    top: 50%;
+    z-index: 9999;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .circle {
+    display: inline-block;
+    border-radius: 50%;
+    background-color: #5586d4;
+    width: 4rem;
+    height: 4rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .in-block {
+    display: inline-block;
+    position: relative;
+  }
+
+  .left-top {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 5rem 0 0 0;
+    background-color: #e2dede;
+  }
+
+  .right-top {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 0 5rem 0 0;
+    background-color: #e2dede;
+  }
+
+  .left-bottom {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 0 0 0 5rem;
+    background-color: #e2dede;
+  }
+
+  .right-bottom {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 0 0 5rem 0;
+    background-color: #e2dede;
+  }
+</style>

+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      width="60rem"
+      destroyOnClose
+      :height="heightNum"
+      @register="register"
+      title="视频预览"
+      :showOkBtn="false"
+      @cancel="handleCancel"
+    >
+      <div class="flex items-center justify-center w-full h-full min-h-96 video-container">
+        <Video
+          v-if="showVideo"
+          :options="(options as any)"
+          :withToken="withToken"
+          @on-unmounted="handleCloseFlvPlayUrl"
+        />
+      </div>
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, reactive, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
+  import { getVideoTypeByUrl } from '/@/components/Video';
+  import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { isRtspProtocol } from '/@/components/Video/src/utils';
+  import { VideoJsPlayerOptions } from 'video.js';
+  import { useFingerprint } from '/@/utils/useFingerprint';
+  import { GetResult } from '@fingerprintjs/fingerprintjs';
+  import { AccessMode } from '/@/views/camera/manage/config.data';
+  import { Video } from './config';
+
+  const heightNum = ref(800);
+  const showVideo = ref(false);
+
+  const playUrl = ref('');
+
+  const withToken = ref(false);
+
+  const fingerprintResult = ref<Nullable<GetResult>>(null);
+
+  const options = reactive<VideoJsPlayerOptions>({
+    width: '100%' as unknown as number,
+    height: 384 as unknown as number,
+    autoplay: true,
+  });
+
+  const setSources = (url: string, fingerprintResult: GetResult) => {
+    const flag = isRtspProtocol(url);
+    options.sources = [
+      {
+        src: flag ? getFlvPlayUrl(url, fingerprintResult.visitorId) : url,
+        type: getVideoTypeByUrl(url),
+      },
+    ];
+  };
+
+  const { getResult } = useFingerprint();
+  const [register] = useModalInner(
+    async (data: { record: CameraModel | StreamingManageRecord }) => {
+      console.log(data, 'data');
+      const { record } = data;
+      const result = await getResult();
+      fingerprintResult.value = result;
+      if (record.accessMode === AccessMode.ManuallyEnter) {
+        if ((record as CameraModel).videoUrl) {
+          if (isRtspProtocol((record as CameraModel).videoUrl)) {
+            playUrl.value = (record as CameraModel).videoUrl;
+            closeFlvPlay(unref(playUrl), result.visitorId);
+            withToken.value = true;
+          }
+          setSources((record as CameraModel).videoUrl, result);
+        }
+      } else {
+        try {
+          const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
+          setSources(url, result);
+        } catch (error) {}
+      }
+      showVideo.value = true;
+    }
+  );
+
+  const handleCloseFlvPlayUrl = () => {
+    if (isRtspProtocol(unref(playUrl))) {
+      closeFlvPlay(unref(playUrl)!, unref(fingerprintResult)!.visitorId!);
+    }
+  };
+
+  const handleCancel = () => {
+    showVideo.value = false;
+    withToken.value = false;
+  };
+</script>
+
+<style lang="less" scoped>
+  .video-container:deep(.vben-basic-video-play) {
+    min-height: 13rem;
+  }
+
+  .video-container:deep(.video-js) {
+    min-height: 13rem;
+  }
+</style>