From 004f9514d4858201ce116b878e464931bd5c5df8 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Thu, 14 Sep 2023 15:21:32 +0800
Subject: [PATCH] 基于demo源码修改功能
---
src/pages/page-web/projects/components/DockConfig.vue | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 109 insertions(+), 7 deletions(-)
diff --git a/src/pages/page-web/projects/components/DockConfig.vue b/src/pages/page-web/projects/components/DockConfig.vue
index 8583483..0a02d69 100644
--- a/src/pages/page-web/projects/components/DockConfig.vue
+++ b/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>
--
Gitblit v1.9.3