|
@@ -4,10 +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%;" v-if="key<20"></div>
|
|
|
- <iframe width="210" height="160" allowfullscreen :src="getIframeSrc(item.deviceSerial)" v-if="key>19"></iframe>
|
|
|
- <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 :id="`video-`+item.deviceSerial" style="width:100%;height:100%;" v-if="key<18"></div>
|
|
|
+ <iframe width="210" height="160" allowfullscreen :src="getIframeSrc(item.deviceSerial)" v-if="key>17"></iframe>
|
|
|
+ <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" >
|
|
@@ -41,11 +41,15 @@
|
|
|
device:{
|
|
|
model:false,
|
|
|
deviceName:""
|
|
|
- }
|
|
|
+ },
|
|
|
+ timer:null
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.init()
|
|
|
+ setTimeout(()=>{
|
|
|
+ window.location.reload()
|
|
|
+ },1000*60*30)
|
|
|
},
|
|
|
methods: {
|
|
|
init(){
|
|
@@ -133,7 +137,7 @@
|
|
|
let items=online.concat(offline)
|
|
|
this.items=items
|
|
|
for(let i=0;i<20;i++){
|
|
|
- await this.sleep(20)
|
|
|
+ await this.sleep(300)
|
|
|
this.$nextTick(()=>{
|
|
|
delete items[i].id
|
|
|
this.render(items[i],function(item){
|
|
@@ -142,7 +146,7 @@
|
|
|
item.player.capturePicture('default',function(data){
|
|
|
item.file=data
|
|
|
})
|
|
|
- },3000)
|
|
|
+ },1500)
|
|
|
}
|
|
|
})
|
|
|
})
|
|
@@ -157,17 +161,15 @@
|
|
|
})
|
|
|
}
|
|
|
this.items=items
|
|
|
- for(let i=0;i<20;i++){
|
|
|
+ for(let i=0;i<18;i++){
|
|
|
await this.sleep(500)
|
|
|
this.$nextTick(()=>{
|
|
|
this.render(items[i],function(item){
|
|
|
- if(i<21){
|
|
|
- setTimeout(()=>{
|
|
|
- item.player.capturePicture('default',function(data){
|
|
|
- item.file=data
|
|
|
- })
|
|
|
- },3000)
|
|
|
- }
|
|
|
+ setTimeout(()=>{
|
|
|
+ item.player.capturePicture('default',function(data){
|
|
|
+ item.file=data
|
|
|
+ })
|
|
|
+ },3000)
|
|
|
})
|
|
|
})
|
|
|
}
|
|
@@ -245,8 +247,13 @@
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- handleError: function(e) {
|
|
|
- console.log('捕获到错误', e)
|
|
|
+ handleError: (res)=> {
|
|
|
+ console.log('捕获到错误', res)
|
|
|
+ if(res.retcode!==5404){
|
|
|
+ item.player.stop()
|
|
|
+ item.player.destroy();
|
|
|
+ item.player.play()
|
|
|
+ }
|
|
|
},
|
|
|
handleSuccess: function() {
|
|
|
console.log("播放成功回调函数,此处可执行播放成功后续动作");
|
|
@@ -254,14 +261,15 @@
|
|
|
callback(item)
|
|
|
}
|
|
|
},
|
|
|
- capturePictureCallBack: function(data){
|
|
|
- item.player.play()
|
|
|
+ capturePictureCallBack: function(data){
|
|
|
+ item.player.play()
|
|
|
item.player.setPoster(item.file.base64)
|
|
|
// item.player.stop()
|
|
|
// item.player.destroy();
|
|
|
// document.getElementById(data.id).innerHTML=`<img src="${item.file.base64}" style="width:100%;height:100%;display:block;">`
|
|
|
}
|
|
|
});
|
|
|
+ // item.player.play()
|
|
|
},
|
|
|
renderflvitems(){
|
|
|
function initVideo({id,url}){
|