基于demo源码修改功能

husq

2023-09-14 004f9514d4858201ce116b878e464931bd5c5df8

 src/pages/page-web/projects/components/DockConfig.vue

@@ -1,3 +1,13 @@
<!--
 * @Author: husq 931347610@qq.com
 * @Date: 2023-09-13 18:21:08
 * @LastEditors: husq 931347610@qq.com
 * @LastEditTime: 2023-09-14 11:40:03
 * @FilePath: \Cloud-API-Demo-Web\src\pages\page-web\projects\components\DockConfig.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
    <div class="config_dock">
        <div class="w100 option flex-display">
@@ -35,7 +45,7 @@
                </div>
                <div class="option-btn flex-display flex-justify-between">
                    <div class="btn">
                        <a-button type="primary" @click="videoControl = !videoControl" :class="{ unchecked: !videoControl }"
                        <a-button type="primary" @click="control" :class="{ unchecked: !videoControl }"
                            style="width: 100%;">
                            <template #icon>
                                <VideoCameraOutlined />
@@ -55,12 +65,12 @@
                </div>
            </div>
        </div>
        <div class="video">
        <div class="video" v-if="videoControl">
            <!-- <div class="video-option">
                <a-tooltip title="关闭补光灯"></a-tooltip>
            </div> -->
            <video auto src="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4"
                style="width: 100%;height: 200px;"></video>
                style="width: 100%;height: 200px;" id="video-webrtc" ref="videowebrtc" controls class="mt20"></video>
        </div>
        <div class="w100 option flex-display aerial">
            <div class="option-left-icon flex-display">
@@ -123,8 +133,8 @@
                </div>
                <div class="mb5 select-box flex-display flex-align-center">
                    <span class="f10 label mr15">失联动作</span>
                    <a-select :dropdownMatchSelectWidth="false" class="select-style" :bordered="false" size="small" ref="select"
                        v-model:value="option.lose_connection" style="width: 60px" @change="handleChange">
                    <a-select :dropdownMatchSelectWidth="false" class="select-style" :bordered="false" size="small"
                        ref="select" v-model:value="option.lose_connection" style="width: 60px" @change="handleChange">
                        <a-select-option value="1">悬停</a-select-option>
                        <a-select-option value="2">返航</a-select-option>
                        <a-select-option value="3">继续执行</a-select-option>
@@ -137,10 +147,20 @@

<script setup lang="ts">
import { VideoCameraOutlined, RobotOutlined, ToolOutlined, CloudOutlined, ThunderboltOutlined, FundProjectionScreenOutlined, UploadOutlined, BoxPlotOutlined } from '@ant-design/icons-vue'
import Drawer from '/@/components/Drawer/Drawer.vue'
import { getLiveCapacity, setLivestreamQuality, startLivestream, stopLivestream } from '/@/api/manage'
import { message } from 'ant-design-vue'
import jswebrtc from '/@/vendors/jswebrtc.min.js'
import { CURRENT_CONFIG as config } from '/@/api/http/config'
const nonSwitchable = 'normal'
// 视频ref
const videowebrtc = ref(null)
// 是否显示视频
const videoControl = ref(false)
// 是否显示操作  页面暂未加
const optionControl = ref(false)
// 一键起飞操作
const flyControl = ref(false)
// 操作设置
const option = ref({
  safe_height: 60,
  fly_height: 60,
@@ -149,6 +169,87 @@
})
const handleChange = (e: string) => {
  console.log(e, 'eee')
}
// 画质设置
interface SelectOption {
  value: any,
  label: string,
  more?: any
}
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 videoOption = ref({
  url_type: 3,
  url: '',
  video_id: '',
  video_quality: 3,
})
const control = () => {
  videoControl.value = !videoControl.value
  if (videoControl.value) {
    onStart()
  } else {
    onPause()
  }
}
// 开启视频直播
const onStart = async () => {
  videoOption.value.video_id = `${'设备id'}/${'默认设备第一个相机id'}/${nonSwitchable}-0`
  const liveURL = `serverIP=${config.gbServerIp}&serverPort=${config.gbServerPort}&serverID=${config.gbServerId}&agentID=${config.gbAgentId}&agentPassword=${config.gbPassword}&localPort=${config.gbAgentPort}&channel=${config.gbAgentChannel}`
  const res = await startLivestream({
    url: liveURL,
    video_id: videoOption.value.video_id,
    url_type: videoOption.value.url_type,
    video_quality: videoOption.value.video_quality,
  })
  if (res.code !== 0) return
  const url = res.data.url
  const videoElement = videowebrtc.value
  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')
        }
      })
    }
  })
}
// 暂停直播
const onPause = async () => {
  stopLivestream({
    video_id: videoOption.value.video_id
  }).then(res => {
    if (res.code === 0) {
      message.success(res.message)
      console.log('stop play livestream')
    }
  })
}
</script>

@@ -279,4 +380,5 @@
            background-color: hsla(0, 0%, 100%, .1);
        }
    }
}</style>
}
</style>