<!-- Description: 安全树监控视频--flv视频流 Author: 李亚光 Date: 2023-05-18 --> <script lang="ts" setup name="EditPerson"> import flvjs from 'flv.js' // 对话框是否显示 const $emit = defineEmits(['close']) const dialogFormVisible = ref(true) const rtsp = ref('rtsp://admin:1234qwer@192.168.10.101:554') const player = ref(null) const playerRef = ref() const initDialog = () => { console.log('页面挂在') if (flvjs.isSupported()) { setTimeout(() => { const video = playerRef.value console.log(video, 'video') if (video) { console.log('player初始化') player.value = flvjs.createPlayer({ type: 'flv', isLive: true, url: `ws://localhost:8888/${rtsp.value}`, }) console.log(player.value, 'player.value') player.value.attachMediaElement(video) try { player.value.load() player.value.play() } catch (error) { console.log(error) } } }) } } // 弹窗关闭 watch(() => dialogFormVisible.value, (newVal) => { if (!newVal) { // player.value?.destory() // player.value = null $emit('close') } }) defineExpose({ initDialog, }) onMounted(() => { initDialog() }) </script> <template> <el-dialog v-model="dialogFormVisible" append-to-body width="1000px" title="实时监控" draggable :close-on-click-modal="false" > <video ref="playerRef" class="demo-video" muted autoplay /> </el-dialog> </template> <style lang="scss" scoped> .el-dialog { width: 700px; } .demo-video { max-width: 880px; max-height: 660px; } </style>