update

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import BrandSearch from '../views/BrandSearch.vue'
+import RtspStream from '../views/RtspStream.vue'
 // import ArTourView from '../views/ArTourView.vue'
 
 const router = createRouter({
@@ -16,6 +17,11 @@ const router = createRouter({
       name: 'BrandSearch',
       component: BrandSearch,
     },
+    {
+      path: '/rtsp-stream',
+      name: 'RtspStream',
+      component: RtspStream,
+    },
     // 定位點網址設定
     // {
     //   path: '/b1-1',

src/views/HomeView.vue

@@ -7,7 +7,7 @@ import {
   nextTick,
   onBeforeUnmount,
 } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 // VR
 import "aframe";
 // i18n
@@ -29,59 +29,19 @@ import "recorder-core/src/engine/mp3";
 import "recorder-core/src/engine/mp3-engine";
 // QR Code
 import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from "vue-qrcode-reader";
+// Video.js
+// import videojs from "video.js";
+// import "video.js/dist/video-js.css";
+// import "videojs-vr/dist/videojs-vr.css";
+// import "videojs-vr"; // 確保正確引入 VR 插件
 // Components
 import Navbar from "../components/Navbar.vue";
 import TicketPurchase from "../components/TicketPurchase.vue";
-// 測試
-import videojs from "video.js";
-import "video.js/dist/video-js.css";
-// import 'videojs-vr/dist/videojs-vr.css';
-import "videojs-vr/dist/videojs-vr.css";
-import "videojs-vr"; // 確保正確引入 VR 插件
-
-let vrVideo = ref(null);
-let player;
-onMounted(() => {
-  if (vrVideo.value) {
-    // console.log(player.plugins_);
-    player = videojs(vrVideo.value, {
-      controls: true,
-      autoplay: true,
-      loop: true,
-      // plugins: {
-      //   vr: {
-      //     projection: '360', // 確保設置為 360
-      //     debug: true // 打開 debug 以便於檢查問題
-      //   }
-      // }
-    });
-    console.log(player.plugins_);
-    if (!player.mediainfo) {
-      player.mediainfo = {};
-    }
-
-    if (!player.mediainfo.projection) {
-      player.mediainfo.projection = "360";
-    }
-
-    // player.vr({ projection: "AUTO" });
-
-    // 檢查插件是否成功初始化
-    player.ready(() => {
-      console.log("Video.js is ready with VR plugin");
-    });
-  }
-});
-
-onBeforeUnmount(() => {
-  if (player) {
-    player.dispose();
-  }
-});
 
 const { t, locale } = useI18n();
 
 const route = useRoute();
+const router = useRouter();
 const routeParam = ref(null);
 
 let qrCodeDialog = ref(false);
@@ -553,10 +513,10 @@ let observationList = reactive([
     value: "參觀資訊",
     text: "observatory_info.visitor.title",
   },
-  // {
-  //   value: "實境景色",
-  //   text: "observatory_info.view",
-  // },
+  {
+    value: "實境景色",
+    text: "observatory_info.view",
+  },
   {
     value: "前往秘境花園觀景台",
     text: "observatory_info.garden",
@@ -1948,8 +1908,8 @@ function handleObservationDialog(value) {
       body: visitList,
     });
   } else if (value === "實境景色") {
-    // window.location.href = "https://www.youtube.com/watch?v=RVV00FZbeH0";
-    window.open("https://www.youtube.com/watch?v=RVV00FZbeH0", "_blank"); // 另開頁面
+    // window.open("https://www.youtube.com/watch?v=RVV00FZbeH0", "_blank"); // 另開頁面
+    router.push("/rtsp-stream");
   } else if (value === "前往秘境花園觀景台") {
     messages.value.push({
       label: "text",
@@ -2506,6 +2466,38 @@ const submitContactForm = async () => {
     }
   }
 };
+
+// Video.js 測試
+// let vrVideo = ref(null);
+// let player;
+
+// onMounted(() => {
+//   if (vrVideo.value) {
+//     player = videojs(vrVideo.value, {
+//       controls: true,
+//       autoplay: true,
+//       loop: true,
+//     });
+//     console.log(player.plugins_);
+//     if (!player.mediainfo) {
+//       player.mediainfo = {};
+//     }
+
+//     if (!player.mediainfo.projection) {
+//       player.mediainfo.projection = "360";
+//     }
+
+//     player.ready(() => {
+//       console.log("Video.js is ready with VR plugin");
+//     });
+//   }
+// });
+
+// onBeforeUnmount(() => {
+//   if (player) {
+//     player.dispose();
+//   }
+// });
 </script>
 
 <template>
@@ -3140,9 +3132,10 @@ const submitContactForm = async () => {
                         </a>
                       </div>
                     </div>
-                    <p class="description">
-                      {{ item.info.content || item.info.description }}
-                    </p>
+                    <p
+                      class="description"
+                      v-html="item.info.content || item.info.description"
+                    ></p>
                   </section>
                 </div>
               </swiper-slide>
@@ -4389,8 +4382,13 @@ const submitContactForm = async () => {
 
         .description {
           line-height: 1.8;
-          // text-align: justify;
           font-size: 0.875rem;
+
+          a {
+            text-decoration: none;
+            color: var(--main-color);
+            border-bottom: 1px solid;
+          }
         }
 
         .date {

src/views/RtspStream.vue

@@ -0,0 +1,55 @@
+<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="video-content">
+    <video
+      id="videoPlayer"
+      class="video-js vjs-default-skin"
+      autoplay
+      muted
+      preload="auto"
+    ></video>
+  </div>
+</template>
+
+<style lang="scss">
+.video-content {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  transform: rotate(180deg);
+
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw !important;
+    height: 100vh !important;
+  }
+}
+</style>