<!-- 直播监控 -->
|
<template>
|
<CommonTitle title="直播监控" />
|
<div :style="{ marginLeft: pxToRem(14) }">
|
<div class="machine-monitor">
|
<div v-if="singleUavHome.status === 'OFFLINE'" class="off-line">
|
<span>当前设备已关机，无法进行直播</span>
|
</div>
|
<LiveVideo v-else :videoUrl="airPortUrl" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import CommonTitle from '@/components/CommonTitle.vue'
|
import LiveVideo from '@/components/LiveVideo.vue'
|
import { liveStart } from '@/api/home/machineNest'
|
import { useStore } from 'vuex'
|
|
const store = useStore()
|
// 单个机巢信息
|
const singleUavHome = computed(() => store.state.home.singleUavHome);
|
const wsInfo = inject('wsInfo')
|
let device_osd_info = computed(() => wsInfo.value?.device_osd || {});
|
let device_osd_host = computed(() => device_osd_info?.value?.data?.host || {});
|
|
const dockSn = inject('dockSn')
|
const droneSn = inject('droneSn')
|
// 直播地址
|
let airPortUrl = ref('')
|
// 获取机巢直播地址
|
const getVideoUrl = (sn, quality) => {
|
if (singleUavHome.value.status === 'OFFLINE') return;
|
liveStart(sn, quality).then(res => {
|
if (res.data.code !== 0) return
|
airPortUrl.value = res.data.data.rtcs_url
|
})
|
}
|
|
// 获取无人机直播url
|
async function getDroneLiveUrl(sn, quality) {
|
airPortUrl.value = ''
|
await nextTick()
|
const res = await liveStart(sn, quality)
|
airPortUrl.value = res.data.data.rtcs_url
|
}
|
|
const isTakeOff = ref(false)
|
// 监听ws消息
|
watch(device_osd_host, async () => {
|
if (device_osd_host?.value?.mode_code === undefined) return
|
const currentIsTakeOff = ![14, 0].includes(device_osd_host.value?.mode_code)
|
// 如果还是之前的状态，不切换
|
if (isTakeOff.value === currentIsTakeOff) return
|
isTakeOff.value = currentIsTakeOff
|
isTakeOff.value ? await getDroneLiveUrl(droneSn.value, 2) : await getVideoUrl(dockSn.value, 1)
|
},
|
{
|
immediate: true,
|
deep: true,
|
}
|
)
|
|
onMounted(() => {
|
getVideoUrl(dockSn.value, 2)
|
})
|
onUnmounted(() => {
|
airPortUrl.value = ''
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.machine-monitor {
|
width: 390px;
|
height: 228px;
|
background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 100%);
|
opacity: 0.85;
|
display: flex;
|
justify-content: space-between;
|
padding: 10px 10px;
|
.off-line {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background: url(@/assets/images/offLine.png) no-repeat center / 100% 100%;
|
color: #EDEDED;
|
font-size: 16px;
|
span {
|
position: absolute;
|
text-align: center;
|
bottom: 20px;
|
left: 20%;
|
}
|
}
|
}
|
</style>
|
