|
|
@@ -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;
|
