From 3667807a7b7418efc090ee3fa6a6b734bc3080bf Mon Sep 17 00:00:00 2001
From: xieb <vip_xiaobin810@163.com>
Date: Wed, 13 Sep 2023 20:36:29 +0800
Subject: [PATCH] Merge branch 'develop' of http://s16s652780.51mypc.cn:49896/r/yskj/iot_drone_web into develop
---
src/components/livestream-others.vue | 175 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 108 insertions(+), 67 deletions(-)
diff --git a/src/components/livestream-others.vue b/src/components/livestream-others.vue
index a77bcc0..754f556 100644
--- a/src/components/livestream-others.vue
+++ b/src/components/livestream-others.vue
@@ -8,11 +8,20 @@
class="mt20"
></video>
<p class="fz24">Live streaming source selection</p>
+
<div class="flex-row flex-justify-center flex-align-center mt10">
+ <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: 150px"
placeholder="Select Live Type"
@select="onLiveTypeSelect"
+ v-model:value="livetypeSelected"
>
<a-select-option
v-for="item in liveTypeList"
@@ -26,12 +35,13 @@
class="ml10"
style="width:150px"
placeholder="Select Drone"
- @select="onDroneSelect"
+ 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>
@@ -39,12 +49,13 @@
class="ml10"
style="width:150px"
placeholder="Select Camera"
- @select="onCameraSelect"
+ 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>
@@ -52,21 +63,23 @@
class="ml10"
style="width:150px"
placeholder="Select Lens"
- @select="onVideoSelect"
+ v-model:value="videoSelected"
>
<a-select-option
- class="ml10"
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:150px"
placeholder="Select Clarity"
@select="onClaritySelect"
+ v-model:value="claritySelected"
>
<a-select-option
v-for="item in clarityList"
@@ -85,14 +98,15 @@
</p>
</div>
<div class="mt10 flex-row flex-justify-center flex-align-center">
- <a-button type="primary" large @click="onStart">Play</a-button>
+ <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 class="ml20" type="primary" large @click="onRefresh"
+ <a-button v-if="!liveState || !isDockLive" class="ml20" type="primary" large @click="onRefresh"
>Refresh Live Capacity</a-button
>
</div>
@@ -103,12 +117,18 @@
import { message } from 'ant-design-vue'
import { onMounted, reactive, ref } from 'vue'
import { CURRENT_CONFIG as config } from '/@/api/http/config'
-import { getLiveCapacity, setLivestreamQuality, startLivestream, stopLivestream } from '/@/api/manage'
+import { changeLivestreamLens, getLiveCapacity, setLivestreamQuality, startLivestream, stopLivestream } from '/@/api/manage'
import { getRoot } from '/@/root'
import jswebrtc from '/@/vendors/jswebrtc.min.js'
const root = getRoot()
-const liveTypeList = [
+interface SelectOption {
+ value: any,
+ label: string,
+ more?: any
+}
+
+const liveTypeList: SelectOption[] = [
{
value: 1,
label: 'RTMP'
@@ -122,7 +142,7 @@
label: 'GB28181'
}
]
-const clarityList = [
+const clarityList: SelectOption[] = [
{
value: 0,
label: 'Adaptive'
@@ -152,12 +172,16 @@
const videoList = ref()
const droneSelected = ref()
const cameraSelected = ref()
-const videoSeleted = ref()
-const claritySeleted = 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 = []
@@ -165,7 +189,7 @@
videoList.value = []
droneSelected.value = null
cameraSelected.value = null
- videoSeleted.value = null
+ videoSelected.value = null
await getLiveCapacity({})
.then(res => {
console.log(res)
@@ -178,16 +202,17 @@
console.log('live_capacity:', resData)
livestreamSource.value = resData
- const temp: Array<{}> = []
+ const temp: Array<SelectOption> = []
if (livestreamSource.value) {
livestreamSource.value.forEach((ele: any) => {
- temp.push({ label: ele.name + '-' + ele.sn, value: ele.sn })
+ 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)
})
}
@@ -201,22 +226,22 @@
livetypeSelected.value,
droneSelected.value,
cameraSelected.value,
- videoSeleted.value,
- claritySeleted.value
+ videoSelected.value,
+ claritySelected.value
)
const timestamp = new Date().getTime().toString()
if (
livetypeSelected.value == null ||
droneSelected.value == null ||
cameraSelected.value == null ||
- videoSeleted.value == null ||
- claritySeleted.value == null
+ claritySelected.value == null
) {
message.warn('waring: not select live para!!!')
return
}
videoId.value =
- droneSelected.value + '/' + cameraSelected.value + '/' + videoSeleted.value
+ droneSelected.value + '/' + cameraSelected.value + '/' + (videoSelected.value || nonSwitchable + '-0')
+
let liveURL = ''
switch (livetypeSelected.value) {
case 1: {
@@ -241,9 +266,12 @@
url: liveURL,
video_id: videoId.value,
url_type: livetypeSelected.value,
- video_quality: claritySeleted.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
@@ -259,7 +287,6 @@
console.log('start play livestream')
}
})
- liveState.value = true
}
})
} else if (livetypeSelected.value === 2) {
@@ -281,10 +308,10 @@
autoplay: true,
onPlay: (obj: any) => {
console.log('start play livestream')
- liveState.value = true
}
})
}
+ liveState.value = true
})
.catch(err => {
console.error(err)
@@ -292,13 +319,15 @@
}
const onStop = () => {
videoId.value =
- droneSelected.value + '/' + cameraSelected.value + '/' + videoSeleted.value
+ droneSelected.value + '/' + cameraSelected.value + '/' + (videoSelected.value || nonSwitchable + '-0')
+
stopLivestream({
video_id: videoId.value
}).then(res => {
if (res.code === 0) {
- message.info(res.message)
+ message.success(res.message)
liveState.value = false
+ lensSelected.value = undefined
console.log('stop play livestream')
}
})
@@ -311,10 +340,10 @@
}
setLivestreamQuality({
video_id: videoId.value,
- video_quality: claritySeleted.value
+ video_quality: claritySelected.value
}).then(res => {
if (res.code === 0) {
- message.success('Set the clarity to ' + clarityList[claritySeleted.value].label)
+ message.success('Set the clarity to ' + clarityList[claritySelected.value].label)
}
})
}
@@ -322,54 +351,66 @@
const onLiveTypeSelect = (val: any) => {
livetypeSelected.value = val
}
-const onDroneSelect = (val: any) => {
- droneSelected.value = val
- const temp: Array<{}> = []
+const onDroneSelect = (val: SelectOption) => {
+ droneSelected.value = val.value
+ const temp: Array<SelectOption> = []
cameraList.value = []
- if (droneSelected.value) {
- const droneTemp = livestreamSource.value
- droneTemp.forEach((ele: any) => {
- const drone = ele
- if (drone.cameras_list && drone.sn === droneSelected.value) {
- const cameraListTemp = drone.cameras_list
- console.info(ele)
- cameraListTemp.forEach((ele: any) => {
- temp.push({ label: ele.name, value: ele.index })
- })
- cameraList.value = temp
- }
- })
+ 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: any) => {
- cameraSelected.value = val
- const result: Array<{}> = []
- if (cameraSelected.value) {
- const droneTemp = livestreamSource.value
- droneTemp.forEach((ele: any) => {
- const drone = ele
- if (drone.sn === droneSelected.value) {
- const cameraListTemp = drone.cameras_list
- cameraListTemp.forEach((ele: any) => {
- const camera = ele
- if (camera.index === cameraSelected.value) {
- const videoListTemp = camera.videos_list
- videoListTemp.forEach((ele: any) => {
- result.push({ label: ele.type, value: ele.index })
- })
- videoList.value = result
- videoSeleted.value = videoList.value[0]?.value
- }
- })
- }
- })
+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: any) => {
- videoSeleted.value = val
+const onVideoSelect = (val: SelectOption) => {
+ videoSelected.value = val.value
+ lensList.value = val.more
+ lensSelected.value = val.label
}
const onClaritySelect = (val: any) => {
- claritySeleted.value = val
+ 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>
--
Gitblit v1.9.3