侧边视频

pages/index.vue

@@ -55,7 +55,9 @@ export default {
             }
             const { id } = data
             if (id) {
-              this.$router.replace(`/game/${id}`)
+              if (this.$router.name !== 'index-game-id') {
+                this.$router.replace(`/game/${id}`)
+              }
             }
           })
         },

pages/index/game/_id.vue

 <template>
   <div>
     <Background/>
-    <div class="live-play">
-      <div class="asset-number">EGM:{{ device ? device.assetNumber : '' }}</div>
-      <img src="@/assets/images/temp/game/video-play.png" alt="" class="bg">
-      <img v-if="isPlay" src="@/assets/images/temp/game/video-play-state.png" alt="" class="play-state">
-      <div class="box">
-        <WebRTCPlayer ref="webrtc" :video-src="player" @click="(data) => click().player(data)"/>
+    <div class="player">
+      <div class="live-play">
+        <div class="asset-number">EGM:{{ device ? device.assetNumber : '' }}</div>
+        <img src="@/assets/images/temp/game/video-play.png" alt="" class="bg">
+        <img v-if="isPlay" src="@/assets/images/temp/game/video-play-state.png" alt="" class="play-state">
+        <div class="box">
+          <WebRTCPlayer ref="webrtc" :video-src="player" @click="(data) => click().player(data)"/>
+        </div>
+      </div>
+      <div v-if="device" class="right-player">
+        <RightPlayer :device="device"/>
       </div>
     </div>
     <div class="option-block">
@@ -78,6 +83,7 @@
 import Background from '@/components/common/bg/index'
 import { mapActions, mapState, mapMutations, } from 'vuex'
 import WebRTCPlayer from './components/WebRTCPlayer'
+import RightPlayer from './components/right-player'
 export default {
   filters: {
     autoTimeFilter(value) {
@@ -92,8 +98,9 @@ export default {
     },
   },
   components: {
-    WebRTCPlayer,
+    WebRTCPlayer, // 直播视频
     Background,
+    RightPlayer, // 右侧的直播板块
   },
   data() {
     return {
@@ -360,56 +367,64 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.live-play {
-  width: 560px;
-  height: 368px;
-  padding: 15px 15px 10px;
-  position: relative;
-  box-sizing: border-box;
+.player {
+  display: flex;
   left: 200px;
-  top: 16px;
-  background: black;
-  .asset-number {
-    position: absolute;
-    left: 12px;
-    top: 4px;
-    z-index: 2;
-    color: #dbd5d0;
-    font-size: 18px;
-    font-weight: bold;
-  }
-  .bg {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-  @keyframes twinkle {
-    from {
-      opacity: 1.0;
+  top: 10px;
+  position: relative;
+  .live-play {
+    width: 560px;
+    height: 368px;
+    padding: 15px 15px 10px;
+    position: relative;
+    box-sizing: border-box;
+    background: black;
+    .asset-number {
+      position: absolute;
+      left: 12px;
+      top: 4px;
+      z-index: 2;
+      color: #dbd5d0;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .bg {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    @keyframes twinkle {
+      from {
+        opacity: 1.0;
+      }
+      50% {
+        opacity: 0.4;
+      }
+      to {
+        opacity: 1.0;
+      }
     }
-    50% {
-      opacity: 0.4;
+    .play-state {
+      width: 14px;
+      position: absolute;
+      right: 53px;
+      top: 5px;
+      z-index: 2;
+      animation: twinkle 2s;
+      animation-iteration-count: infinite;
     }
-    to {
-      opacity: 1.0;
+    .box {
+      height: 100%;
+      width: 100%;
     }
   }
-  .play-state {
-    width: 14px;
-    position: absolute;
-    right: 53px;
-    top: 5px;
-    z-index: 2;
-    animation: twinkle 2s;
-    animation-iteration-count: infinite;
-  }
-  .box {
-    height: 100%;
-    width: 100%;
+  .right-player {
+    margin-left: 30px;
   }
 }
+
 .option-block {
   position: absolute;
   bottom: 0;

pages/index/game/components/right-player.vue

+<template>
+  <div class="box">
+    <div :class="showPlayer1 ? 'show' : ''" class="btn camera" @click="showPlayer1 = !showPlayer1">
+      <div class="left-icon">
+        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/photo-camera-interface-symbol-for-button.png" alt="">
+      </div>
+      <div class="text">上方屏幕</div>
+      <div class="right-icon">
+        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/arrowIcon.png" alt="">
+      </div>
+    </div>
+    <div v-show="showPlayer1" class="player1">
+      <div class="player-box">
+        <WebRTCPlayer ref="player1" class="player"/>
+      </div>
+    </div>
+    <div :class="showPlayer2 ? 'show' : ''" class="btn camera camera2" @click="showPlayer2 = !showPlayer2">
+      <div class="left-icon">
+        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/photo-camera-interface-symbol-for-button.png" alt="">
+      </div>
+      <div class="text">实时视图</div>
+      <div class="right-icon">
+        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/arrowIcon.png" alt="">
+      </div>
+    </div>
+    <div v-show="showPlayer2" :class="showPlayer1 ? '' : 'big'" class="player2">
+      <div class="player-box">
+        <WebRTCPlayer ref="player2" class="player"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import WebRTCPlayer from './WebRTCPlayer'
+export default {
+  components: {
+    WebRTCPlayer,
+  },
+  props: {
+    device: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      showPlayer1: false,
+      showPlayer2: false,
+    }
+  },
+  watch: {
+    device() {
+      this.play2()
+    },
+  },
+  mounted() {
+    if (this.device) {
+      this.play2()
+    }
+  },
+  methods: {
+    play1() {
+      const url = this.device.videoMainNumber
+      const webrtc = `webrtc://eslotstreaming.com${url}`
+      this.$refs.player1.initVideo(webrtc)
+    },
+    play2() {
+      const url = this.device.videoCamNumber
+      const webrtc = `webrtc://eslotstreaming.com${url}`
+      this.$refs.player2.initVideo(webrtc)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 220px;
+  .btn {
+    &.camera {
+      text-align: center;
+      display: flex;
+      height: 34px;
+      width: 160px;
+      line-height: 34px;
+      background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%208%20copy.png);
+      background-size: 100% 100%;
+      padding: 0 4px;
+      box-sizing: border-box;
+      color: #37e5f0;
+      font-size: 12px;
+      &.show {
+        .right-icon {
+          transform: rotate(180deg);
+        }
+      }
+      &.camera2 {
+        margin-top: -6px;
+      }
+      .left-icon {
+        width: 30px;
+        box-sizing: border-box;
+        padding: 8px;
+        img {
+          height: 100%;
+          display: block;
+        }
+      }
+      .right-icon {
+        width: 30px;
+        box-sizing: border-box;
+        padding: 8px 0;
+        img {
+          height: 16px;
+          margin: auto;
+          display: block;
+        }
+      }
+      .text {
+        flex: 1;
+      }
+    }
+  }
+  .player1, .player2 {
+    background-size: 100% 100%;
+    margin-top: -8px;
+    position: relative;
+    .player-box {
+      background: black;
+      margin: 5px;
+      box-sizing: border-box;
+      border-radius: 4px;
+      position: absolute;
+      left: 0px;
+      right: 0px;
+      top: 0px;
+      bottom: -2px;
+      overflow: hidden;
+    }
+  }
+  .player1 {
+    width: 220px;
+    height: 124px;
+    background-image: url(@/assets/images/temp/game/player1.png);
+  }
+  .player2 {
+    width: 160px;
+    height: 210px;
+    background-image: url(@/assets/images/temp/game/player2.png);
+    &.big {
+      width: 220px;
+      height: 290px;
+      .player-box {
+        border-radius: 6px;
+        left: 1px;
+        right: 1px;
+        top: 1px;
+        bottom: -1px;
+      }
+    }
+  }
+}
+</style>