29 lines
1.3 KiB
Vue
29 lines
1.3 KiB
Vue
<template>
|
|
<el-dialog v-model="visible" title="实时预览" width="960px" @close="stop">
|
|
<div style="min-height:300px;display:flex;align-items:center;justify-content:center;background:#000">
|
|
<div v-if="!wsFlv" style="color:#fff">{{ loading ? '加载中...' : '无法获取流地址' }}</div>
|
|
<video v-else ref="playerRef" :src="wsFlv" autoplay muted controls style="width:100%;height:500px;background:#000" />
|
|
</div>
|
|
<template #footer><el-button @click="visible=false">关闭</el-button></template>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup>
|
|
import { ref, computed, watch } from 'vue'
|
|
import { getLiveStream } from '@/api/gateway'
|
|
|
|
const props = defineProps({ modelValue: Boolean, device: Object })
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const visible = computed({ get: () => props.modelValue, set: v => emit('update:modelValue', v) })
|
|
const stream = ref(null), loading = ref(false)
|
|
const wsFlv = computed(() => stream.value?.wsFlv || stream.value?.httpFlv)
|
|
const stop = () => { stream.value = null }
|
|
|
|
watch(() => props.device, async (d) => {
|
|
if (d && visible.value) {
|
|
loading.value = true
|
|
try { stream.value = await getLiveStream(d.adapterCode, d.sourceId) } catch(e) {}
|
|
finally { loading.value = false }
|
|
}
|
|
}, { immediate: true })
|
|
</script>
|