player.stop

public/antd_color.less

@@ -1397,7 +1397,7 @@ tr.ant-table-expanded-row:hover {background: #fbfbfb;}
 .ant-tag-blue-inverse {color: #fff;background: #1890ff;border-color: #1890ff;}
 .ant-tag-geekblue {color: #2f54eb;background: #f0f5ff;border-color: #adc6ff;}
 .ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;}
-.ant-tag-purple {color: #722ed1;background: #f9f0ff;border-color: #d3adf7;}
+.ant-tag-purple {color: #722ed1;background: color(~`colorPalette("@{text-color-secondary}", 1)`);border-color: #d3adf7;}
 .ant-tag-purple-inverse {color: #fff;background: #722ed1;border-color: #722ed1;}
 .ant-time-picker-panel {color: @text-color;}
 .ant-time-picker-panel-inner {background-color: #fff;background-clip: padding-box;border-radius: 4px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}

src/views/realTimeMonitoring/index.vue

@@ -46,6 +46,7 @@ export default {
             modelData: [],
             clientHeight: 0,
             showVideo: false,
+            players: []
         };
     },
     computed: {
@@ -70,7 +71,7 @@ export default {
         this.getClientHeight();
     },
     destroyed() {
-        // window.onresize = null;
+        this.destory()
     },
     methods: {
         getClientHeight() {
@@ -113,6 +114,7 @@ export default {
                     if(video){
                         let player = new WebRtcPlayer(video,'camera'+b.id);
                         player.load('camera'+b.id);
+                        this.players.push(player)
                     }
                     
                 }
@@ -120,6 +122,12 @@ export default {
             }
         
         },
+        destory(){
+            for(let player of this.players){
+                console.log("stop")
+                player.destroy()
+            }
+        },
         setVideoServer(){
             this.$api.httpApi.getVideoServer({
                 data: {}