add 10 stream

vr/src/App.vue

@@ -4,9 +4,15 @@
   </div>
 </template>
 
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
 <style lang="scss">
-@import url('http://at.alicdn.com/t/font_1857388_u76j431l9gp.css');
+@import url('https://at.alicdn.com/t/font_1857388_u76j431l9gp.css');
-@import "./assets/css/reset.scss";
+@import "@/assets/css/reset.scss";
 #app{
   height: 100%;
   background: rgb(75,75,75);

vr/src/components/VRLive/index.vue

@@ -58,7 +58,8 @@
         </div>
         <div v-else class="type">
           <span class="statu-circle"></span>
-          <span>{{playVariables.type}}</span>
+          <span> </span>
+          <!-- <span>{{playVariables.type}}</span> -->
         </div>
         <div @click="changeFullscreenStatu()" class="fullscreen">
           <i class="iconfont icon-quanping"></i>
@@ -362,7 +363,6 @@ export default {
 
       // Load and start playing the WHEP URL
       try {
-        console.log(this.option.source.url)
         player.load(new URL(this.option.source.url))
         player.on('waiting', () => {
           console.error('waiting:');
@@ -582,19 +582,31 @@ export default {
 
 <style lang="scss" scoped>
     .vr-video {
-      position: relative;
+      position: fixed;
-      width: 100%;
+      top: 0;
-      height: 100%;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background-color: #000;
+      z-index: 1000;
+
       .video-wrapper {
         display: flex;
         align-items: center;
         height: 100%;
-        // min-height: 300px;
+        width: 100%;
+        border: none;
+        outline: none;
       }
 
       #video {
         width: 100%;
         height: 100%;
+        border: none;
+        outline: none;
 
         &:hover {
           .control {
@@ -604,6 +616,11 @@ export default {
             animation-fill-mode: forwards;
           }
         }
+
+        canvas {
+          border: none !important;
+          outline: none !important;
+        }
       }
 
       .control-hidden {
@@ -871,8 +888,6 @@ export default {
           left: 0;
           width: 100vw;
           height: 100vh;
-          // transform-origin: top left;
-          // transform: rotate(90deg) translate(-0vh, -100vw);
         }
       }
     }

vr/src/router/index.js

@@ -34,7 +34,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: process.env.BASE_URL,
   routes
 })

vr/src/views/VRLive.vue

@@ -1,9 +1,17 @@
 <template>
     <div class="vr-live">
+      <div class="controls">
+        <div class="url-selector">
+          <select v-model="opt.source.url">
+            <option v-for="(url, index) in streamUrls" :key="index" :value="url.value">
+              {{ url.label }}
+            </option>
+          </select>
+        </div>
         <p>{{opt.source.src}}</p>
+      </div>
       <div class="container">
-
+        <vr-live :option="opt" :key="componentKey"></vr-live>
-        <vr-live :option="opt"></vr-live>
       </div>
     </div>
 </template>
@@ -16,6 +24,49 @@ export default {
   },
   data () {
     return {
+      componentKey: 0, // 添加一个key来控制组件重新渲染
+      streamUrls: [
+        {
+          label: 'Stream1',
+          value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream1'
+        },
+        {
+          label: 'Stream2',
+          value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream2'
+        },
+        {
+          label: 'Stream3',
+          value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream3'
+        },
+        {
+          label: 'Stream4',
+          value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream4'
+        },
+        {
+          label: 'Stream5',
+          value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream5'
+        },
+        {
+          label: 'Stream6',
+          value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream6'
+        },
+        {
+          label: 'Stream7',
+          value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream7'
+        },
+        {
+          label: 'Stream8',
+          value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream8'  
+        },
+        {
+          label: 'Stream9',
+          value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream9'
+        },  
+        {
+          label: 'Stream10',
+          value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream10'
+        }        
+      ],
       opt: {
         statistics: false, // 统计信息
         source: {
@@ -34,12 +85,30 @@ export default {
           http://localhost:9001/live/wwt.flv
           http://localhost:9001/live/wwt/index.m3u8
           */
-          // url: 'https://www.ashenone.tk/public/video/1.mp4'
+          url: 'http://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream1'
-          // url: 'http://localhost:8080/live/livestream.flv'
-          url: 'http://localhost:1985/rtc/v1/whep/?app=live&stream=livestream'
         }
       }
     }
+  },
+  watch: {
+    'opt.source.url': {
+      handler(newUrl) {
+        // 根据URL自动设置对应的type
+        if (newUrl.endsWith('.mp4')) {
+          this.opt.source.type = 'normal'
+        } else if (newUrl.endsWith('.m3u8')) {
+          this.opt.source.type = 'hls'
+        } else if (newUrl.endsWith('.flv')) {
+          this.opt.source.type = 'flv'
+        } else if (newUrl.includes('whep')) {
+          this.opt.source.type = 'whep'
+        }
+        
+        // 增加componentKey强制vr-live组件重新渲染
+        this.componentKey += 1
+      },
+      immediate: true
+    }
   }
 }
 </script>
@@ -49,23 +118,78 @@ export default {
   display: inline-block;
   width: 100%;
   height: 100%;
-  .container{
+  position: relative;
-    margin: 80px auto 0 auto;
+
-    padding: 15px;
+  .controls {
-    width: 70vw;
+    position: absolute;
-    height: calc(70vw / 16 * 9);
+    top: 20px;
-    background: rgba(125,125,125,1);
+    left: 0;
-    border-radius: 10px;
+    right: 0;
+    width: 100%;
+    z-index: 2000;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 10px 0;
+    pointer-events: auto;
   }
-  @media screen and (max-width: 768px) {
+
+  .url-selector {
+    text-align: center;
+    position: relative;
+    z-index: 2001;
+    
+    select {
+      padding: 8px 12px;
+      border-radius: 4px;
+      width: 400px;
+      max-width: 90%;
+      background: white;
+      border: 1px solid #ccc;
+      font-size: 14px;
+      color: #333;
+      cursor: pointer;
+      position: relative;
+      z-index: 2002;
+      
+      &:focus {
+        outline: none;
+        border-color: #666;
+      }
+
+      option {
+        background: white;
+        color: #333;
+        padding: 8px;
+      }
+    }
+  }
+
+  p {
+    text-align: center;
+    color: white;
+    margin: 10px 0 0 0;
+    position: relative;
+    z-index: 2001;
+  }
+
   .container {
-      margin: 0;
+    position: relative;
-      padding: 0;
+    margin: 0 auto;
+    padding: 15px;
     width: 100vw;
-      height: calc(100vw / 16 * 9);
+    height: 100vh;
-      background: none;
+    background: rgba(125,125,125,1);
     border-radius: 0;
   }
+
+  @media screen and (max-width: 768px) {
+    .controls {
+      top: 10px;
+    }
+    
+    .url-selector select {
+      width: 90%;
+    }
   }
 }
 </style>
+

vr/src/views/WebRTCPlayer.vue

@@ -70,11 +70,35 @@ export default {
 
 <style lang="scss" scoped>
 .webrtc-player {
-  width: 100%;
+  position: fixed;
-  height: 100%;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #000;
+  z-index: 1000;
+
   .video-js {
     width: 100%;
     height: 100%;
+    object-fit: cover;
+    border: none;
+    outline: none;
   }
 }
+
+/* 隐藏视频控件的边框 */
+:deep(.vjs-default-skin) {
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+/* 确保视频元素本身没有边框 */
+video {
+  border: none !important;
+  outline: none !important;
+}
 </style>

vr/vue.config.js

@@ -8,7 +8,7 @@ module.exports = {
     open: true,
     openPage: '',
     host: '0.0.0.0',
-    port: 8081,
+    port: 8080,
     https: false,
     proxy: null, // 设置代理
     before: app => {}