<!--
  Description: 视频播放-rtsp-webrtc
  Author: 李亚光
  Date: 2024-11-11
 -->
<script lang="ts" setup name="VideoPlayer">
const $props = defineProps({
  id: {
    type: String,
    required: true,
  },
  url: {
    type: String,
    required: true,
  },
})
const webRtcServer = ref(null)
onMounted(() => {
  if (!$props.url) {
    return
  }
  nextTick(() => {
    webRtcServer.value = new WebRtcStreamer($props.id, 'http://127.0.0.1:8000')
    webRtcServer.value.connect($props.url)
  })
})
watch(() => $props.url, (newVal) => {
  if (newVal) {
    nextTick(() => {
      webRtcServer.value = new WebRtcStreamer($props.id, 'http://127.0.0.1:8000')
      webRtcServer.value.connect($props.url)
    })
  }
})
onUnmounted(() => {
  if (webRtcServer.value) {
    webRtcServer.value.disconnect()
    webRtcServer.value = null
  }
})
</script>

<template>
  <video :id="$props.id" controls autoplay muted width="100%" height="100%" style="object-fit: fill;" />
</template>