flv 监控 尧柏 两个

admin/src/components/cameras/index.vue

@@ -2,6 +2,16 @@
     <div class="camera-page">
         <div class="nav">双预防视频监控平台</div>    
         <div class="camera-container">
+            <!-- flv-video -->
+            <div  class="flv video-container" v-for="(item,key) in flvsItem" :key="'flv-'+key"  @click.stop="showflvModel(item)" :class="flv.id===item.id?'fixed':'121'">
+                <div class="flv-camera-box">
+                    <div class="title">
+                        <div class="name">{{ item.name }}</div>                                                                 
+                        <div class="close" @click.stop="closeflv">X</div>
+                    </div>               
+                    <video class="flv-video" :id="item.id"  style="width:100%;height:100%;" controls autoplay muted></video>             
+                </div>
+            </div>        
             <div class="video-container" v-for="(item,key) in items" :key="key" >
                 <div class="name">{{ item.deviceName }}</div>   
                 <div :id="`video-`+item.deviceSerial"  style="width:100%;height:100%;" v-if="key<18"></div>  
@@ -9,11 +19,6 @@
                 <div class="camera-show-handle" @click.stop="showModel(item,2)"  v-if="key>17"></div>
                 <div class="camera-show-handle" @click.stop="showModel(item)"  v-if="key<18"></div>
             </div>
-            <!-- flv-video -->
-            <!-- <div class="video-container" v-for="(item,key) in flvsItem" :key="key" >
-                <div class="name">{{ item.name }}</div>
-                <video class="flv-video" :id="item.id"  style="width:100%;height:100%;"></video> 
-            </div> -->
             <div id="camera-model" v-show="device.model">
                 <div id="camera-box">
                     <div class="title">                        
@@ -23,7 +28,7 @@
                     </div>           
                     <div id="camera-deviceSerial"></div>     
                 </div>
-            </div>
+            </div>           
         </div>    
     </div>
 </template>
@@ -36,6 +41,10 @@
             return {
                 items:[],
                 flvsItem:[],
+                flv:{
+                    name:"",
+                    id:""
+                },
                 accessToken:undefined,
                 devicePlayIsRec:false,
                 device:{
@@ -65,6 +74,7 @@
                     this.getData()
                     // this.getDevicelist()
                 })
+                this.renderflvitems()
             },
             showModel(item,type){
                 if(type!==2){
@@ -299,18 +309,44 @@
                         id:"flv-video-2",
                         name:'尧柏室内',
                         url:'https://rtmp01open.ys7.com:9188/v3/openlive/D21357992_1_1.flv?expire=1727866347&id=631202266972758016&t=213001a96c71218df4eb35a3ccfcc3e4e0477ebd88dd1277ce6de864325bd758&ev=100'
-                    }                   
+                    }                 
                 ]
                 this.flvsItem=flvs
                 this.$nextTick(()=>{
                     for(let i=0;i<flvs.length;i++){
-                        initVideo({
+                        this.flvsItem[i].player=initVideo({
                             id:flvs[i].id,
                             url:flvs[i].url
                         }) 
+                        
                     }
                 })
-            }
+            },
+            showflvModel(item){
+                debugger
+                this.flv={
+                    model:true,
+                    name:item.name,
+                    id:item.id
+                }
+            },
+            closeflv(){
+                this.flv={
+                    model:false,
+                    name:"",
+                    id:undefined
+                }
+                // window.location.reload()
+            },
+            flv_destroy(flvPlayer) {
+                if (flvPlayer) {
+                    flvPlayer.pause();
+                    flvPlayer.unload();
+                    flvPlayer.detachMediaElement();
+                    flvPlayer.destroy();
+                    flvPlayer = null;
+                }
+            }            
         },
         destroyed() {
             this.items.map(item=>{
@@ -321,6 +357,9 @@
                     })                    
                 }
             })
+            for(let i=0;i<this.flvsItem.length;i++){               
+                this.flv_destroy(this.flvsItem[i].player)
+            }
         },
     }
 </script>
@@ -392,7 +431,7 @@
     align-items: center;
     font-size: 28px;
 }
-#camera-model{
+#camera-model,#flv-camera-model{
     position: fixed;
     left: 0;
     top: 0;
@@ -401,7 +440,7 @@
     background-color: rgba(0,0,0,0.6);
     z-index: 9999;
 }
-#camera-box{
+#camera-box,#flv-camera-box{
     width: 900px;
     height: 750px;
     max-width: 100%;
@@ -412,7 +451,7 @@
     overflow: hidden;
     padding: 10px;
 }
-#camera-box .title{
+#camera-box .title,#flv-camera-box .title{
     widows: 100%;
     height: 50px;
     line-height: 50px;
@@ -424,7 +463,7 @@
     position: relative;
     text-align: center;
 }
-#camera-box .title .close{
+#camera-box .title .close,#flv-camera-box .title .close{
     width: 50px;
     height: 50px;
     color: #6e6c6c;
@@ -436,9 +475,80 @@
     cursor: pointer;
     font-size: 30px;
 }
-#camera-deviceSerial{
+#camera-deviceSerial,#flv-camera-deviceSerial{
     width: 900px;
     height: 700px;  
     background-color: #3333;
 }
+.flv.video-container.fixed{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0,0,0,0.6);
+    z-index: 9998;
+}
+.flv.video-container .title .close{
+    display: none;
+}
+.flv-camera-box{
+    width: 100%;
+    height: 100%
+}
+.fixed .flv-camera-box{
+    width: 900px;
+    height: 750px;
+    max-width: 100%;
+    background-color: #fff;
+    margin: 50px auto;
+    border-radius: 10px;
+    box-shadow: 1px 1px 6px rgba(0,0,0,0.6);
+    overflow: hidden;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+}
+.fixed .flv-camera-box .title{
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    font-weight: 600;
+    font-size: 20px;
+    background-color: #fff;
+    color: #333;
+    border-bottom: 1px solid #eaeaea;
+    position: relative;
+    text-align: center;
+}
+.fixed .flv-camera-box .title .name{
+    font-weight: 600;
+    font-size: 20px;
+    background-color: #fff;
+    color: #333;
+}
+.fixed .flv-camera-box .title .close{
+    width: 50px;
+    height: 50px;
+    color: #6e6c6c;
+    text-align: center;
+    line-height: 50px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+    font-size: 30px;
+    display: block !important;
+    z-index: 9999;
+}
+.fixed .flv-camera-box video{
+    flex: 1;
+    border: 1px solid #eaeaea;
+    box-sizing: border-box;
+}
+.flv.video-container .title{
+    width: 100%;
+}
 </style>