<!--
  Description: 安全树监控视频-ifrmane标签嵌套
  Author: 李亚光
  Date: 2023-05-18
 -->
<script lang="ts" setup name="EditPerson">
// 对话框是否显示
const $emit = defineEmits(['close'])
const dialogFormVisible = ref(true)
const web = ref()
// 弹窗关闭
watch(() => dialogFormVisible.value, (newVal) => {
  if (!newVal) {
    $emit('close')
  }
})
const webRtcServer = ref(null)
onMounted(() => {
  setTimeout(() => {
    nextTick(() => {
      webRtcServer.value = new WebRtcStreamer('video', 'http://127.0.0.1:8000')
      webRtcServer.value.connect(
        'rtsp://admin:1234qwer@192.168.10.101',
      )
    })
  }, 500)
})
onBeforeUnmount(() => {
  webRtcServer.value.disconnect()
})
</script>

<template>
  <el-dialog
    v-model="dialogFormVisible" append-to-body width="800px" title="实时监控" draggable
    :close-on-click-modal="false"
  >
    <!-- <iframe src="http://localhost:8080/"  height="500" width="100%" /> -->
    <div className="home">
      <video id="video" autoPlay width="800" height="400" style="margin-left: -20px;" />
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.demo-video {
  max-width: 880px;
  max-height: 660px;
}
</style>