Merge branch 'feat/video-component-support-gbt' into 'main_dev'

feat: 视频组件支持gbt

See merge request yunteng/thingskit-scada!220

@@ -68,6 +68,8 @@ export interface VideoOptionType {
   orgId: string
   videoComponentFlag: boolean
   videoUrl: string
+  channelId?: string
+  deviceId?: string
 }
 
 export interface AlarmListOptionType {

+import type { VideoChannelPlayAddressType, VideoItemRecordType } from './model'
 import { defHttp } from '@/utils/http'
 
 enum Api {
   GET_VIDEO_LIST = '/video',
   STREAMING_PLAY_GET_URL = '/video/url',
+  GET_VIDEO_ALL_LIST = '/video/list',
   RTSP_CLOSEFLV = '/rtsp.closeFlv',
+  GET_VIDEO_CONTROL_START = '/video/control/start',
+  GET_VIDEO_CONTROL_STOP = '/video/control/stop',
 }
 
 // 获取视频组件--->频流
 export const getVideoList = (organizationId?: string) => {
-  return defHttp.get({
+  return defHttp.get<{ items: VideoItemRecordType[] }>({
     url: Api.GET_VIDEO_LIST,
     params: {
       organizationId,
@@ -35,3 +39,21 @@ export const closeFlvPlay = (url: string, browserId: string) => {
   })
 }
 
+export const getVideoControlStart = ({
+  deviceId,
+  channelId,
+}: Record<'deviceId' | 'channelId', string>) => {
+  return defHttp.get<VideoChannelPlayAddressType>(
+    {
+      url: `${Api.GET_VIDEO_CONTROL_START}/${deviceId}/${channelId}`,
+      timeout: 30 * 1000,
+    },
+    {},
+  )
+}
+export const getCameraList = (params: Record<'organizationId', string>) => {
+  return defHttp.get<{ data: VideoItemRecordType[] }>({
+    url: Api.GET_VIDEO_ALL_LIST,
+    params,
+  })
+}

+export interface VideoItemRecordType {
+  id: string
+  creator: string
+  createTime: string
+  name: string
+  enabled: boolean
+  tenantId: string
+  sn: string
+  organizationId: string
+  organizationName: string
+  status: boolean
+  accessMode: number
+  playProtocol: number
+  params: Params
+  videoUrl: string
+}
+
+export interface Params {
+  channelNo: string
+  deviceId: string
+}
+
+export interface VideoChannelPlayAddressType {
+  code: number
+  message: string
+  data: Data
+}
+
+export interface Data {
+  app: string
+  stream: string
+  ip: any
+  flv: string
+  https_flv: string
+  ws_flv: string
+  wss_flv: string
+  fmp4: string
+  https_fmp4: string
+  ws_fmp4: string
+  wss_fmp4: string
+  hls: string
+  https_hls: string
+  ws_hls: string
+  wss_hls: string
+  ts: string
+  https_ts: string
+  ws_ts: string
+  wss_ts: any
+  rtmp: string
+  rtmps: string
+  rtsp: string
+  rtsps: string
+  rtc: string
+  rtcs: string
+  mediaServerId: string
+  tracks: Track[]
+  startTime: any
+  endTime: any
+  progress: number
+}
+
+export interface Track {
+  channels: number
+  codecId: number
+  codecIdName: any
+  codecType: number
+  ready: boolean
+  sampleBit: number
+  sampleRate: number
+  fps: number
+  height: number
+  width: number
+}

@@ -2,7 +2,7 @@
 import { Button, Divider } from 'ant-design-vue'
 import { nextTick, onMounted, ref, unref } from 'vue'
 import { getOrganization } from '@/api/device'
-import { getVideoList } from '@/api/video'
+import { getCameraList } from '@/api/video'
 import { BasicForm, useForm } from '@/components/Form'
 import { ComponentEnum, FormLayoutEnum } from '@/components/Form/src/enum'
 import { ContentDataFieldsEnum, ContentDataFieldsNameEnum } from '@/enums/datasource'
@@ -13,6 +13,8 @@ import { createPublicFormContext } from '@/core/Library/components/PublicForm/us
 import type { NodeDataDataSourceJsonType, VideoOptionType } from '@/api/node/model'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
+import { VideoAccessModeEnum } from '@/enums/videoEnum'
+import type { VideoItemRecordType } from '@/api/video/model'
 
 const props = defineProps<ConfigComponentProps>()
 const { organizationId } = useParseParams()
@@ -20,6 +22,23 @@ const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: false })
 
 const { getNodeData, getNodeAllData, saveNodeAllData } = nodeDataActinType
 
+enum VideoFormFieldsEnum {
+  VIDEO_ID = 'id',
+  VIDEO_URL = 'videoUrl',
+  ACCESS_MODE = 'accessMode',
+  VIDEO_FLAG = 'videoComponentFlag',
+  CHANNEL_ID = 'channelId',
+  DEVICE_ID = 'deviceId',
+}
+
+enum VideoFormFieldsNameEnum {
+  VIDEO_ID = '视频流',
+  ACCESS_MODE = 'ACCESS_MODE',
+  VIDEO_URL = '视频地址',
+  CHANNEL_ID = '通道号',
+  DEVICE_ID = '设备id',
+}
+
 const loading = ref(false)
 
 const [register, { getFieldsValue, validate, setFieldsValue }] = useForm({
@@ -36,45 +55,63 @@ const [register, { getFieldsValue, validate, setFieldsValue }] = useForm({
           labelField: 'name',
           valueField: 'id',
           onChange() {
-            formModel[ContentDataFieldsEnum.VIDEO_ID] = null
+            formModel[VideoFormFieldsEnum.VIDEO_ID] = null
+            formModel[VideoFormFieldsEnum.CHANNEL_ID] = null
+            formModel[VideoFormFieldsEnum.DEVICE_ID] = null
           },
         }
       },
     },
     {
-      field: ContentDataFieldsEnum.VIDEO_ID,
-      label: ContentDataFieldsNameEnum.VIDEO_ID,
+      field: VideoFormFieldsEnum.VIDEO_ID,
+      label: VideoFormFieldsNameEnum.VIDEO_ID,
       component: ComponentEnum.API_SELECT,
       componentProps: ({ formModel }) => {
         return {
-          api: getVideoList,
-          params: formModel[ContentDataFieldsEnum.ORG_ID],
-
+          api: getCameraList,
+          params: {
+            organizationId: formModel[ContentDataFieldsEnum.ORG_ID],
+          },
           fieldNames: { label: 'name', value: 'id' },
-          resultField: 'items',
-          onSelect(value: string, option: any) {
-            formModel[ContentDataFieldsEnum.ACCESS_MODE] = value && option ? option.accessMode : null
-            formModel[ContentDataFieldsEnum.VIDEO_URL] = value && option ? option.videoUrl : null
-            formModel[ContentDataFieldsEnum.VIDEO_FLAG] = true
+          resultField: 'data',
+          onSelect(_: string, option: VideoItemRecordType) {
+            const accessMode = option?.accessMode
+            formModel[VideoFormFieldsEnum.ACCESS_MODE] = accessMode
+            formModel[VideoFormFieldsEnum.VIDEO_URL] = option?.videoUrl
+            formModel[VideoFormFieldsEnum.CHANNEL_ID] = accessMode === VideoAccessModeEnum.GBT28181 ? option?.params?.channelNo : null
+            formModel[VideoFormFieldsEnum.DEVICE_ID] = accessMode === VideoAccessModeEnum.GBT28181 ? option?.params?.deviceId : null
+            formModel[VideoFormFieldsEnum.VIDEO_FLAG] = true
           },
         }
       },
     },
     {
-      field: ContentDataFieldsEnum.ACCESS_MODE,
-      label: ContentDataFieldsNameEnum.ACCESS_MODE,
+      field: VideoFormFieldsEnum.ACCESS_MODE,
+      label: VideoFormFieldsNameEnum.ACCESS_MODE,
+      component: ComponentEnum.INPUT,
+      ifShow: false,
+    },
+    {
+      field: VideoFormFieldsEnum.DEVICE_ID,
+      label: VideoFormFieldsNameEnum.DEVICE_ID,
+      component: ComponentEnum.INPUT,
+      ifShow: false,
+    },
+    {
+      field: VideoFormFieldsEnum.CHANNEL_ID,
+      label: VideoFormFieldsNameEnum.CHANNEL_ID,
       component: ComponentEnum.INPUT,
       ifShow: false,
     },
     {
-      field: ContentDataFieldsEnum.VIDEO_URL,
-      label: ContentDataFieldsNameEnum.VIDEO_URL,
+      field: VideoFormFieldsEnum.VIDEO_URL,
+      label: VideoFormFieldsNameEnum.VIDEO_URL,
       component: ComponentEnum.INPUT,
       ifShow: false,
     },
     {
-      field: ContentDataFieldsEnum.VIDEO_FLAG,
-      label: ContentDataFieldsEnum.VIDEO_FLAG,
+      field: VideoFormFieldsEnum.VIDEO_FLAG,
+      label: VideoFormFieldsEnum.VIDEO_FLAG,
       component: ComponentEnum.INPUT,
       ifShow: false,
     },

@@ -4,13 +4,14 @@ import 'video.js/dist/video-js.css'
 
 import type { VideoJsPlayerOptions } from 'video.js'
 import { BasicVideoPlay } from './component/index.ts'
-import { getVideoTypeByUrl, isRtspProtocol, useFingerprint } from './component/config'
+import { VideoPlayerType, getVideoTypeByUrl, isRtspProtocol, useFingerprint } from './component/config'
 
 import { getJwtToken, getShareJwtToken } from '@/utils/auth'
 import { isLightboxMode, isShareMode } from '@/utils/env'
 import type { CreateComponentType } from '@/core/Library/types'
-import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '@/api/video'
+import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl, getVideoControlStart } from '@/api/video'
 import { useContentDataStore } from '@/store/modules/contentData'
+import { VideoAccessModeEnum } from '@/enums/videoEnum'
 
 const props = defineProps<{
   config: CreateComponentType
@@ -48,16 +49,24 @@ const playSource = ref<Record<'src' | 'type', string>>(
 const handleGetVideoPlay = async () => {
   const { dataSourceJson } = unref(videoConfig)[0] || {}
   const { videoOption } = dataSourceJson || {}
-  const { id, accessMode, videoUrl } = videoOption || {}
+  const { id, accessMode, videoUrl, deviceId, channelId } = videoOption || {}
   let type = getVideoTypeByUrl(videoUrl!)
   let playUrl = videoUrl
 
   // 判断是否是流媒体播放
-  if (accessMode === 1 && id) {
+  if (accessMode === VideoAccessModeEnum.Streaming && id) {
     const { data: { url } = { url: '' } } = await getStreamingPlayUrl(id!)
     playUrl = url
     playUrl && (type = getVideoTypeByUrl(playUrl!))
   }
+  else if (accessMode === VideoAccessModeEnum.GBT28181 && deviceId && channelId) {
+    const {
+      data: { flv },
+    } = await getVideoControlStart({ channelId, deviceId })
+
+    playUrl = flv
+    type = VideoPlayerType.flv
+  }
 
   // 判断是否是rtsp播放
   if (isRtspProtocol(videoUrl!)) {
@@ -128,9 +137,7 @@ onUnmounted(async () => {
   <div class="w-full h-full flex justify-center items-center">
     <!-- <Spin :spinning="loading" wrapper-class-name="video-spin" class="w-full h-full"> -->
     <BasicVideoPlay
-      ref="basicVideoPlayEl"
-      :options="getOptions"
-      :with-token="withToken"
+      ref="basicVideoPlayEl" :options="getOptions" :with-token="withToken"
       :immediate-init-on-mounted="false"
     />
     <!-- </Spin> -->
@@ -139,10 +146,10 @@ onUnmounted(async () => {
 
 <style lang="less" scoped>
 .video-spin {
-    @apply w-full h-full;
+  @apply w-full h-full;
 
-    :deep(.ant-spin-container) {
-      @apply w-full h-full;
-    }
+  :deep(.ant-spin-container) {
+    @apply w-full h-full;
   }
+}
 </style>

@@ -195,11 +195,6 @@ export enum ContentDataFieldsEnum {
   ORG_ID = 'orgId',
   ATTR = 'attr',
   DEVICE_NAME = 'deviceName',
-  VIDEO_FILTER = 'videoFilter',
-  VIDEO_ID = 'id',
-  VIDEO_URL = 'videoUrl',
-  ACCESS_MODE = 'accessMode',
-  VIDEO_FLAG = 'videoComponentFlag',
 
   CODE_TYPE = 'codeType',
 }
@@ -211,10 +206,6 @@ export enum ContentDataFieldsNameEnum {
   DEVICE_ID = '设备',
   ATTR = '属性',
   deviceName = '设备名称',
-  VIDEO_ID = '视频流',
-  ACCESS_MODE = 'ACCESS_MODE',
-  VIDEO_URL = '视频地址',
-
 }
 
 export enum VariableImageSourceEnum {

+export enum VideoAccessModeEnum {
+  ManuallyEnter = 0,
+  Streaming = 1,
+  GBT28181 = 2,
+}