From af55d475ac20226f1345f98b3cb73d4b0e4317eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E9=92=8A?= <lizhao_sr@neusiri.com>
Date: Mon, 31 Jul 2023 16:22:42 +0800
Subject: [PATCH] =?UTF-8?q?lz=E4=BF=AE=E6=94=B9=E8=AE=BE=E5=A4=87=E7=9B=B4?=
 =?UTF-8?q?=E6=92=AD=E7=82=B9=E5=87=BB=E6=92=AD=E6=94=BE1-20230731?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GMap.vue                 |  24 +-
 src/components/livestream-newOthers.vue | 419 ++++++++++++++++++++++++
 src/pages/page-web/projects/tsa.vue     |   7 +
 3 files changed, 449 insertions(+), 1 deletion(-)
 create mode 100644 src/components/livestream-newOthers.vue

diff --git a/src/components/GMap.vue b/src/components/GMap.vue
index a57065a..013720e 100644
--- a/src/components/GMap.vue
+++ b/src/components/GMap.vue
@@ -139,6 +139,14 @@
           {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }}
         </div>
       </div>
+      <div class="fz14">
+        <div @click="play()">直播视频</div>
+      </div>
+      <div class="live" v-if="showLive">
+        <!-- <div>2222</div> -->
+        <!-- <router-view :name="routeName" /> -->
+        <LiveNewOthers></LiveNewOthers>
+      </div>
     </div>
     <!-- 机场OSD -->
     <div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12">
@@ -445,16 +453,19 @@ import M30 from '/@/assets/icons/m30.png'
 import {
   BorderOutlined, LineOutlined, CloseOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,
   ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined,
-  FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined
+  FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined,
+  EyeInvisibleOutlined
 } from '@ant-design/icons-vue'
 import { EDeviceTypeName } from '../types'
 import DockControlPanel from './g-map/DockControlPanel.vue'
 import { useDockControl } from './g-map/use-dock-control'
 import DroneControlPanel from './g-map/DroneControlPanel.vue'
 import { useConnectMqtt } from './g-map/use-connect-mqtt'
+import LiveNewOthers from '/@/components/livestream-newOthers.vue'
 
 export default defineComponent({
   components: {
+    LiveNewOthers,
     BorderOutlined,
     LineOutlined,
     CloseOutlined,
@@ -484,6 +495,8 @@ export default defineComponent({
     const useGMapManageHook = useGMapManage()
     const deviceTsaUpdateHook = deviceTsaUpdate()
     const root = getRoot()
+    // const routeName = ref<string>('LiveOthers')
+    const showLive = ref(false)
 
     const mouseMode = ref(false)
     const store = useMyStore()
@@ -641,6 +654,11 @@ export default defineComponent({
       useMouseToolHook.mouseTool(type, getDrawCallback)
       mouseMode.value = bool
     }
+    function play () {
+      console.log(222)
+      // routeName.value = 'LiveOthers'
+      showLive.value = true
+    }
 
     // dock 控制面板
     const {
@@ -813,8 +831,12 @@ export default defineComponent({
         }
       }
     }
+
     return {
       draw,
+      play,
+      showLive,
+      // routeName,
       mouseMode,
       drawVisible,
       osdVisible,
diff --git a/src/components/livestream-newOthers.vue b/src/components/livestream-newOthers.vue
new file mode 100644
index 0000000..c05834a
--- /dev/null
+++ b/src/components/livestream-newOthers.vue
@@ -0,0 +1,419 @@
+<template>
+  <div class="flex-column flex-justify-start flex-align-center">
+    <video
+      :style="{ width: '100%', height: '100%' }"
+      id="video-webrtc"
+      ref="videowebrtc"
+      controls
+      class="mt20"
+    ></video>
+    <p class="fz24">Live streaming source selection</p>
+
+    <div class="">
+      <template v-if="liveState && isDockLive">
+        <span class="mr10">Lens:</span>
+        <a-radio-group v-model:value="lensSelected" button-style="solid">
+          <a-radio-button v-for="lens in lensList" :key="lens" :value="lens">{{lens}}</a-radio-button>
+        </a-radio-group>
+      </template>
+      <template v-else>
+      <a-select
+        style="width: 100px"
+        placeholder="Select Live Type"
+        @select="onLiveTypeSelect"
+        v-model:value="livetypeSelected"
+      >
+        <a-select-option
+          v-for="item in liveTypeList"
+          :key="item.label"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </a-select-option>
+      </a-select>
+      <a-select
+        class="ml10"
+        style="width:100px"
+        placeholder="Select Drone"
+        v-model:value="droneSelected"
+      >
+        <a-select-option
+          v-for="item in droneList"
+          :key="item.value"
+          :value="item.value"
+          @click="onDroneSelect(item)"
+          >{{ item.label }}</a-select-option
+        >
+      </a-select>
+      <a-select
+        class="ml10"
+        style="width:100px"
+        placeholder="Select Camera"
+        v-model:value="cameraSelected"
+      >
+        <a-select-option
+          v-for="item in cameraList"
+          :key="item.value"
+          :value="item.value"
+          @click="onCameraSelect(item)"
+          >{{ item.label }}</a-select-option
+        >
+      </a-select>
+      <!-- <a-select
+        class="ml10"
+        style="width:150px"
+        placeholder="Select Lens"
+        v-model:value="videoSelected"
+      >
+        <a-select-option
+          v-for="item in videoList"
+          :key="item.value"
+          :value="item.value"
+          @click="onVideoSelect(item)"
+          >{{ item.label }}</a-select-option
+        >
+      </a-select> -->
+      </template>
+      <a-select
+        class="ml10"
+        style="width:100px"
+        placeholder="Select Clarity"
+        @select="onClaritySelect"
+        v-model:value="claritySelected"
+      >
+        <a-select-option
+          v-for="item in clarityList"
+          :key="item.value"
+          :value="item.value"
+          >{{ item.label }}</a-select-option
+        >
+      </a-select>
+    </div>
+    <div class="mt20">
+      <p class="fz10" v-if="livetypeSelected == 2">
+        Please use VLC media player to play the RTSP livestream !!!
+      </p>
+      <p class="fz10" v-if="livetypeSelected == 2">
+        RTSP Parameter:{{ rtspData }}
+      </p>
+    </div>
+    <div class="flex-row flex-justify-center flex-align-center" style="margin-bottom: 20px;">
+      <a-button v-if="liveState && isDockLive" type="primary" large @click="onSwitch">Switch Lens</a-button>
+      <a-button v-else type="primary" large @click="onStart">Play</a-button>
+      <a-button class="ml20" type="primary" large @click="onStop"
+        >Stop</a-button
+      >
+      <!-- <a-button class="ml20" type="primary" large @click="onUpdateQuality"
+        >Update Clarity</a-button
+      >
+      <a-button v-if="!liveState || !isDockLive" class="ml20" type="primary" large @click="onRefresh"
+        >Refresh Live Capacity</a-button
+      > -->
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { message } from 'ant-design-vue'
+import { onMounted, reactive, ref } from 'vue'
+import { CURRENT_CONFIG as config } from '/@/api/http/config'
+import { changeLivestreamLens, getLiveCapacity, setLivestreamQuality, startLivestream, stopLivestream } from '/@/api/manage'
+import { getRoot } from '/@/root'
+import jswebrtc from '/@/vendors/jswebrtc.min.js'
+const root = getRoot()
+
+interface SelectOption {
+  value: any,
+  label: string,
+  more?: any
+}
+
+const liveTypeList: SelectOption[] = [
+  {
+    value: 1,
+    label: 'RTMP'
+  },
+  {
+    value: 2,
+    label: 'RTSP'
+  },
+  {
+    value: 3,
+    label: 'GB28181'
+  }
+]
+const clarityList: SelectOption[] = [
+  {
+    value: 0,
+    label: 'Adaptive'
+  },
+  {
+    value: 1,
+    label: 'Smooth'
+  },
+  {
+    value: 2,
+    label: 'Standard'
+  },
+  {
+    value: 3,
+    label: 'HD'
+  },
+  {
+    value: 4,
+    label: 'Super Clear'
+  }
+]
+
+const videowebrtc = ref(null)
+const livestreamSource = ref()
+const droneList = ref()
+const cameraList = ref()
+const videoList = ref()
+const droneSelected = ref()
+const cameraSelected = ref()
+const videoSelected = ref()
+const claritySelected = ref()
+const videoId = ref()
+const liveState = ref<boolean>(false)
+const livetypeSelected = ref()
+const rtspData = ref()
+const lensList = ref<string[]>([])
+const lensSelected = ref<String>()
+const isDockLive = ref(false)
+const nonSwitchable = 'normal'
+
+const onRefresh = async () => {
+  droneList.value = []
+  cameraList.value = []
+  videoList.value = []
+  droneSelected.value = null
+  cameraSelected.value = null
+  videoSelected.value = null
+  await getLiveCapacity({})
+    .then(res => {
+      console.log(res)
+      if (res.code === 0) {
+        if (res.data === null) {
+          console.warn('warning: get live capacity is null!!!')
+          return
+        }
+        const resData: Array<[]> = res.data
+        console.log('live_capacity:', resData)
+        livestreamSource.value = resData
+
+        const temp: Array<SelectOption> = []
+        if (livestreamSource.value) {
+          livestreamSource.value.forEach((ele: any) => {
+            temp.push({ label: ele.name + '-' + ele.sn, value: ele.sn, more: ele.cameras_list })
+          })
+          droneList.value = temp
+        }
+      }
+    })
+    .catch(error => {
+      message.error(error)
+      console.error(error)
+    })
+}
+
+onMounted(() => {
+  onRefresh()
+})
+const onStart = async () => {
+  console.log(
+    'Param:',
+    livetypeSelected.value,
+    droneSelected.value,
+    cameraSelected.value,
+    videoSelected.value,
+    claritySelected.value
+  )
+  const timestamp = new Date().getTime().toString()
+  if (
+    livetypeSelected.value == null ||
+    droneSelected.value == null ||
+    cameraSelected.value == null ||
+    claritySelected.value == null
+  ) {
+    message.warn('waring: not select live para!!!')
+    return
+  }
+  videoId.value =
+    droneSelected.value + '/' + cameraSelected.value + '/' + (videoSelected.value || nonSwitchable + '-0')
+
+  let liveURL = ''
+  switch (livetypeSelected.value) {
+    case 1: {
+      // RTMP
+      liveURL = config.rtmpURL + timestamp
+      break
+    }
+    case 2: {
+      // RTSP
+      liveURL = `userName=${config.rtspUserName}&password=${config.rtspPassword}&port=${config.rtspPort}`
+      break
+    }
+    case 3: {
+      liveURL = `serverIP=${config.gbServerIp}&serverPort=${config.gbServerPort}&serverID=${config.gbServerId}&agentID=${config.gbAgentId}&agentPassword=${config.gbPassword}&localPort=${config.gbAgentPort}&channel=${config.gbAgentChannel}`
+      break
+    }
+    default:
+      console.warn('warning: live type is not correct!!!')
+      break
+  }
+  await startLivestream({
+    url: liveURL,
+    video_id: videoId.value,
+    url_type: livetypeSelected.value,
+    video_quality: claritySelected.value
+  })
+    .then(res => {
+      if (res.code !== 0) {
+        return
+      }
+      if (livetypeSelected.value === 3) {
+        const url = res.data.url
+        const videoElement = videowebrtc.value
+        // gb28181,it will fail if not wait.
+        message.loading({
+          content: 'Loding...',
+          duration: 4,
+          onClose () {
+            const player = new jswebrtc.Player(url, {
+              video: videoElement,
+              autoplay: true,
+              onPlay: (obj: any) => {
+                console.log('start play livestream')
+              }
+            })
+          }
+        })
+      } else if (livetypeSelected.value === 2) {
+        console.log(res)
+        rtspData.value =
+          'url:' +
+          res.data.url +
+          '&username:' +
+          res.data.username +
+          '&password:' +
+          res.data.password
+      } else if (livetypeSelected.value === 1) {
+        const url = res.data.url
+        const videoElement = videowebrtc.value
+        console.log('start live:', url)
+        console.log(videoElement)
+        const player = new jswebrtc.Player(url, {
+          video: videoElement,
+          autoplay: true,
+          onPlay: (obj: any) => {
+            console.log('start play livestream')
+          }
+        })
+      }
+      liveState.value = true
+    })
+    .catch(err => {
+      console.error(err)
+    })
+}
+const onStop = () => {
+  videoId.value =
+    droneSelected.value + '/' + cameraSelected.value + '/' + (videoSelected.value || nonSwitchable + '-0')
+
+  stopLivestream({
+    video_id: videoId.value
+  }).then(res => {
+    if (res.code === 0) {
+      message.success(res.message)
+      liveState.value = false
+      lensSelected.value = undefined
+      console.log('stop play livestream')
+    }
+  })
+}
+
+const onUpdateQuality = () => {
+  if (!liveState.value) {
+    message.info('Please turn on the livestream first.')
+    return
+  }
+  setLivestreamQuality({
+    video_id: videoId.value,
+    video_quality: claritySelected.value
+  }).then(res => {
+    if (res.code === 0) {
+      message.success('Set the clarity to ' + clarityList[claritySelected.value].label)
+    }
+  })
+}
+
+const onLiveTypeSelect = (val: any) => {
+  livetypeSelected.value = val
+}
+const onDroneSelect = (val: SelectOption) => {
+  droneSelected.value = val.value
+  const temp: Array<SelectOption> = []
+  cameraList.value = []
+  cameraSelected.value = undefined
+  videoSelected.value = undefined
+  videoList.value = []
+  lensList.value = []
+  if (!val.more) {
+    return
+  }
+  val.more.forEach((ele: any) => {
+    temp.push({ label: ele.name, value: ele.index, more: ele.videos_list })
+  })
+  cameraList.value = temp
+}
+const onCameraSelect = (val: SelectOption) => {
+  cameraSelected.value = val.value
+  const result: Array<SelectOption> = []
+  videoSelected.value = undefined
+  videoList.value = []
+  lensList.value = []
+  if (!val.more) {
+    return
+  }
+
+  val.more.forEach((ele: any) => {
+    result.push({ label: ele.type, value: ele.index, more: ele.switch_video_types })
+  })
+  videoList.value = result
+  if (videoList.value.length === 0) {
+    return
+  }
+  const firstVideo: SelectOption = videoList.value[0]
+  videoSelected.value = firstVideo.value
+  lensList.value = firstVideo.more
+  lensSelected.value = firstVideo.label
+  isDockLive.value = lensList.value?.length > 0
+}
+const onVideoSelect = (val: SelectOption) => {
+  videoSelected.value = val.value
+  lensList.value = val.more
+  lensSelected.value = val.label
+}
+const onClaritySelect = (val: any) => {
+  claritySelected.value = val
+}
+const onSwitch = () => {
+  if (lensSelected.value === undefined || lensSelected.value === nonSwitchable) {
+    message.info('The ' + nonSwitchable + ' lens cannot be switched, please select the lens to be switched.', 8)
+    return
+  }
+  changeLivestreamLens({
+    video_id: videoId.value,
+    video_type: lensSelected.value
+  }).then(res => {
+    if (res.code === 0) {
+      message.success('Switching live camera successfully.')
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import '/@/styles/index.scss';
+</style>
diff --git a/src/pages/page-web/projects/tsa.vue b/src/pages/page-web/projects/tsa.vue
index 9ab2216..0258b24 100644
--- a/src/pages/page-web/projects/tsa.vue
+++ b/src/pages/page-web/projects/tsa.vue
@@ -139,6 +139,7 @@
       <a-collapse :bordered="false" expandIconPosition="right" accordion style="background: #232323;">
         <a-collapse-panel :key="EDeviceTypeName.Aircraft" header="Online Devices" style="border-bottom: 1px solid #4f4f4f;">
           <div v-if="onlineDevices.data.length === 0" style="height: 150px; color: white;">
+            <div style="background: red;" @click="cheshi">设备测试</div>
             <a-empty :image="noData" :image-style="{ height: '60px' }" />
           </div>
           <div v-else class="fz12" style="color: white;">
@@ -344,6 +345,12 @@ function readHms (visiable: boolean, sn: string) {
     })
   }
 }
+
+function cheshi () {
+  osdVisible.value.visible = true
+  store.commit('SET_OSD_VISIBLE_INFO', osdVisible)
+  console.log(osdVisible.value.visible)
+}
 </script>
 
 <style lang="scss">