<!--
  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>