101-aiv1/src/views/RtspStream.vue

<script setup>
import { onMounted, onBeforeUnmount } from "vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
// import "videojs-contrib-hls";

onMounted(() => {
  const player = videojs("videoPlayer", {
    techOrder: ["html5"],
    sources: [
      {
        src: "https://cmm.ai:9101/stream.m3u8", // 替換成 HTTP 服務器地址
        type: "application/x-mpegURL",
      },
    ],
  });

  onBeforeUnmount(() => {
    if (player) {
      player.dispose();
    }
  });
});
</script>

<template>
  <div class="rtsp-video-content">
    <video
      id="videoPlayer"
      class="video-js vjs-default-skin"
      autoplay
      muted
      playsinline
      preload="auto"
    ></video>
  </div>
</template>

<style lang="scss" scoped>
.rtsp-video-content {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transform: rotate(180deg);
  background-color: #000;

  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
  }
}
</style>