调试

src/features/invigilation/OnlinePatrol/PatrolWarningDetail.vue

@@ -246,16 +246,23 @@ export default {
         records[item.source] = item;
       });
 
-      this.viewVideos = orderSources.map((source) => {
-        return (
-          records[source] || {
-            liveUrl: null,
-            source,
-            name: sourceNames[source],
-            ref: snakeToHump(source) + "Video",
-          }
-        );
+      this.viewVideos = [];
+      orderSources.forEach((source) => {
+        if (records[source]) {
+          this.viewVideos.push(records[source]);
+        }
       });
+      // 展示所有
+      // this.viewVideos = orderSources.map((source) => {
+      //   return (
+      //     records[source] || {
+      //       liveUrl: null,
+      //       source,
+      //       name: sourceNames[source],
+      //       ref: snakeToHump(source) + "Video",
+      //     }
+      //   );
+      // });
       this.initSubscribeVideo();
     },
     async getInvigilateDetail() {

src/features/invigilation/RealtimeMonitoring/VideoCommunication.vue

@@ -110,6 +110,7 @@ export default {
     async getCommunicationList() {
       if (!this.loopRunning) return;
       this.clearSetTs();
+      this.students = [];
 
       const res = await communicationList({
         examId: this.examId,

src/features/invigilation/RealtimeMonitoring/WarningDetail.vue

@@ -456,16 +456,23 @@ export default {
         records[item.source] = item;
       });
 
-      this.viewVideos = orderSources.map((source) => {
-        return (
-          records[source] || {
-            liveUrl: null,
-            source,
-            name: sourceNames[source],
-            ref: snakeToHump(source) + "Video",
-          }
-        );
+      this.viewVideos = [];
+      orderSources.forEach((source) => {
+        if (records[source]) {
+          this.viewVideos.push(records[source]);
+        }
       });
+      // 展示所有
+      // this.viewVideos = orderSources.map((source) => {
+      //   return (
+      //     records[source] || {
+      //       liveUrl: null,
+      //       source,
+      //       name: sourceNames[source],
+      //       ref: snakeToHump(source) + "Video",
+      //     }
+      //   );
+      // });
       this.initSubscribeVideo();
     },
     async getInvigilateDetail() {
@@ -868,8 +875,7 @@ export default {
       this.viewVideos
         .filter((vv) => vv.liveUrl)
         .forEach((vv) => {
-          let res = this.$refs[vv.ref][0].mutedPlayer(true);
-          if (res) vv.muted = true;
+          this.$refs[vv.ref][0].mutedPlayer(true);
         });
     },
     toViewImg(photo) {

src/features/invigilation/common/FlvMedia.vue

@@ -22,7 +22,7 @@
       class="media-video-muted"
       @click.stop="videoMuted"
     >
-      <i :class="['icon', isLoud ? 'icon-audio-act' : 'icon-audio']"></i>
+      <i :class="['icon', !muted ? 'icon-audio-act' : 'icon-audio']"></i>
     </div>
   </div>
 </template>
@@ -47,6 +47,7 @@ export default {
   data() {
     return {
       flvPlayer: null,
+      muted: true,
       retryCount: 0,
       loading: false,
       result: {
@@ -55,11 +56,6 @@ export default {
       },
     };
   },
-  computed: {
-    isLoud() {
-      return this.flvPlayer && !this.flvPlayer.muted;
-    },
-  },
   mounted() {
     this.initVideo();
     this.retryCount++;
@@ -145,13 +141,14 @@ export default {
     mutedPlayer(muted) {
       if (!this.flvPlayer) return;
       this.flvPlayer.muted = muted;
-      return true;
+      this.muted = this.flvPlayer.muted;
     },
     videoMuted() {
       if (!this.flvPlayer) return;
       const muted = this.flvPlayer.muted;
       this.$emit("muted-change");
       this.flvPlayer.muted = !muted;
+      this.muted = this.flvPlayer.muted;
     },
     reloadVideo() {
       this.result = {

src/styles/base.scss

@@ -578,6 +578,10 @@ body {
       overflow: hidden;
       position: relative;
       height: 240px;
+
+      .flv-media {
+        z-index: 9;
+      }
     }
     &-tips {
       position: absolute;
@@ -733,7 +737,7 @@ body {
   top: 120px;
   border-radius: 10px;
   z-index: 9999;
-  box-shadow: 0 0 20px #333;
+  box-shadow: 0 0 10px #444;
 
   .communication-box {
     position: relative;
@@ -1029,6 +1033,7 @@ body {
     display: block;
     width: 100%;
     height: 100%;
+    background-color: rgba(0, 0, 0, 1);
   }
 
   .media-error {
@@ -1070,7 +1075,7 @@ body {
     z-index: 100;
     text-align: center;
     line-height: 28px;
-    background-color: rgba(215, 215, 215, 0.3);
+    background-color: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     cursor: pointer;