Signed-off-by: zhaobao <528046418@qq.com>

admin/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.5.1",
+    "ezuikit-js": "7.7.X",
     "vue": "^3.3.4"
   },
   "devDependencies": {

admin/src/components/cameras/index.vue

@@ -4,8 +4,10 @@
         <div class="camera-container">
             <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%;" ></div>
-                <div class="camera-show-handle" @click.stop="showModel(item)"></div>
+                <iframe width="400" height="300" allowfullscreen :src="getIframeSrc(item.deviceSerial)" v-if="key>19"></iframe>      
+                <div :id="`video-`+item.deviceSerial"  style="width:100%;height:100%;" v-if="key<20"></div>  
+                <div class="camera-show-handle" @click.stop="showModel(item,2)"  v-if="key>19"></div>
+                <div class="camera-show-handle" @click.stop="showModel(item)"  v-if="key<20"></div>
             </div>
             <div id="camera-model" v-show="device.model">
                 <div id="camera-box">
@@ -21,10 +23,8 @@
 </template>
 <script>
   import "@/assets/js/ezuikit.js"
+//   import EZUIKit from 'ezuikit-js';
   import cameras from '@/assets/js/cameras.js';
-  console.log({
-    cameras
-  })
   import axios from 'axios';
     export default {
         data() {
@@ -55,12 +55,14 @@
                 })
 
             },
-            showModel(item){
-                var destroyPromise = item.player.destroy();
-                destroyPromise.then((data) => {
-                    console.log("销毁-promise 获取 数据", data)
-                })  
-                event.stopPropagation()
+            showModel(item,type){
+                if(type!==2){
+                    var destroyPromise = item.player.destroy();
+                    destroyPromise.then((data) => {
+                        console.log("销毁-promise 获取 数据", data)
+                    })  
+                    event.stopPropagation()
+                }
                 let device={
                     ...item,
                     model:true,
@@ -77,16 +79,38 @@
                 this.device={}   
                 document.getElementById('camera-deviceSerial').innerHTML=""         
             },
-            getData(){
-                let items=cameras
-                this.items=cameras
-                for(let i=0;i<items.length;i++){
+            async getData(){
+                let items=[]
+                for(let i=0;i<cameras.length;i++){  
+                    items.push({
+                        ...cameras[i]
+                    })
+                }
+                this.items=items
+                for(let i=0;i<20;i++){
+                    await this.sleep(20)
                     this.$nextTick(()=>{
-                        this.render(items[i])
+                        this.render(items[i],function(item){
+                            if(i<21){
+                                setTimeout(()=>{
+                                    item.player.capturePicture('default',function(data){
+                                        item.file=data                              
+                                    })
+                                },3000)
+                            }
+                        })                      
                     }) 
-                }
+                }                
+            },
+            getIframeSrc(deviceSerial){
+                return `https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/${deviceSerial}/1.live&autoplay=1&accessToken=${this.accessToken}`
             },
-            render(item={}){
+            sleep(){
+                return new Promise((resolve)=>{
+                    setTimeout(resolve,1000)                                        
+                })
+            },
+            render(item={},callback){
                 let accessToken=this.accessToken;
                 item.player =  new EZUIKit.EZUIKitPlayer({
                     id: item.id||`video-${item.deviceSerial}`,
@@ -97,6 +121,7 @@
                     width: item.width||400,
                     height: item.height||300,
                     audio:0,
+                    // useHardDev: true, //开启高性能模式
                     themeData:{
                         "autoFocus": 5,
                         "poster":item.deviceCover||"https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png",
@@ -154,7 +179,15 @@
                     },
                     handleSuccess: function() {
                         console.log("播放成功回调函数，此处可执行播放成功后续动作");
+                        if(callback){
+                            callback(item)
+                        }
                     },
+                    capturePictureCallBack: function(data){
+                        item.player.stop()
+                        item.player.destroy();
+                        document.getElementById(data.id).innerHTML=`<img src="${item.file.base64}" style="width:100%;height:100%;display:block;">`    
+                    }
                 });
             }
         },
@@ -203,6 +236,11 @@
     position: relative;
     overflow: hidden;
 }
+.video-container iframe{
+    border: 0;
+    box-sizing: border-box;
+    display: block;
+}
 .video-container .name{
     color: #fff;
     padding: 3px 0;

admin/yarn.lock

@@ -281,6 +281,11 @@ estree-walker@^2.0.2:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
+ezuikit-js@7.7.X:
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/ezuikit-js/-/ezuikit-js-7.7.7.tgz#a3ab6d44e1e5797f1e6510a44d98e26e2803cd5b"
+  integrity sha512-VRkQN5u7bTdSwCqQYk3db7lR2kiXdCrMzr/rwmRZww8xqeXaghgttPjjI/kS+u/xVMAkl6hp9+47Yxs/zBRB8A==
+
 follow-redirects@^1.15.0:
   version "1.15.3"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"