Vue 3 & Nuxt RTSP Surveillance Dashboard with HLS.js

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import Hls from 'hls.js';

const props = defineProps<{ streamUrl: string }>();
const videoElement = ref<HTMLVideoElement | null>(null);
let hls: Hls | null = null;

onMounted(() => {
  if (videoElement.value && Hls.isSupported()) {
    hls = new Hls({ lowLatencyMode: true, maxBufferLength: 4 });
    hls.loadSource(props.streamUrl);
    hls.attachMedia(videoElement.value);
  }
});

onUnmounted(() => {
  if (hls) hls.destroy();
});
</script>

<template>
  <video ref="videoElement" autoplay muted playsinline class="rounded-xl border border-slate-800" />
</template>