|
|
<template>
|
|
|
<div class="video-mask" :style="{width:w,height:h}">
|
|
|
<object id="video" type='application/x-vlc-plugin' events='True'
|
|
|
width="100%" height="100%" pluginspage="http://www.videolan.org"
|
|
|
codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
|
|
|
<param name='controls' value='false'/>
|
|
|
<param name='text' value='正在加载视频中...'/>
|
|
|
<param name='branding' value='false'/>
|
|
|
<param name="windowless" value="true">
|
|
|
<param name='fullscreen' value='true'/>
|
|
|
<embed type="application/x-google-vlc-plugin"/>
|
|
|
</object>
|
|
|
<div class="video-close" @click="handleCancel">
|
|
|
╳
|
|
|
</div>
|
|
|
<div class="operation-list">
|
|
|
<div class="operation-item">
|
|
|
<img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart" @mouseup="zoomDecStop">
|
|
|
<span>变倍</span>
|
|
|
<img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart" @mouseup="zoomAddStop">
|
|
|
</div>
|
|
|
<div class="operation-item">
|
|
|
<img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
|
|
|
<span>变焦</span>
|
|
|
<img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop">
|
|
|
</div>
|
|
|
<div class="operation-item">
|
|
|
<img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
|
|
|
<span>光圈</span>
|
|
|
<img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="direction-list">
|
|
|
<div class="direction-item">
|
|
|
<img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop">
|
|
|
<img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop">
|
|
|
<img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop">
|
|
|
</div>
|
|
|
<div class="direction-item">
|
|
|
<img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop">
|
|
|
<img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop">
|
|
|
</div>
|
|
|
<div class="direction-item">
|
|
|
<img :src="leftDownUrl" alt="" @mousedown="leftDownStart" @mouseup="leftDownStop">
|
|
|
<img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop">
|
|
|
<img :src="rightDownUrl" alt="" @mousedown="rightDownStart" @mouseup="rightDownStop">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
w: document.documentElement.offsetWidth || document.body.offsetWidth,
|
|
|
h: document.documentElement.offsetHeight || document.body.offsetHeight,
|
|
|
confirmLoading: false,
|
|
|
id: '',
|
|
|
mdata: [],
|
|
|
zoomSubUrl: require('@/assets/sub-icon.png'),
|
|
|
zoomAddUrl: require('@/assets/add-icon.png'),
|
|
|
focusSubUrl: require('@/assets/sub-icon.png'),
|
|
|
focusAddUrl: require('@/assets/add-icon.png'),
|
|
|
irisSubUrl: require('@/assets/sub-icon.png'),
|
|
|
irisAddUrl: require('@/assets/add-icon.png'),
|
|
|
leftUpUrl: require('@/assets/left-up-icon.png'),
|
|
|
upUrl: require('@/assets/up-icon.png'),
|
|
|
rightUpUrl: require('@/assets/right-up-icon.png'),
|
|
|
leftUrl: require('@/assets/left-icon.png'),
|
|
|
rightUrl: require('@/assets/right-icon.png'),
|
|
|
leftDownUrl: require('@/assets/left-down-icon.png'),
|
|
|
downUrl: require('@/assets/down-icon.png'),
|
|
|
rightDownUrl: require('@/assets/right-down-icon.png'),
|
|
|
vlcm: ""
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.mdata = this.$route.query.modelData
|
|
|
this.id = this.$route.query.modelData.id
|
|
|
console.log(this.id)
|
|
|
this.getHdVideos(this.$route.query.modelData.rtsp)
|
|
|
},
|
|
|
// beforeRouteLeave(to, form, next) {
|
|
|
// if (this.vlcm) {
|
|
|
// this.vlcm.playlist.stop();
|
|
|
// next(true)
|
|
|
// } else {
|
|
|
// next(true)
|
|
|
// }
|
|
|
// },
|
|
|
methods: {
|
|
|
handleCancel() {
|
|
|
this.$router.push({name: 'realTimeMonitoring'});
|
|
|
},
|
|
|
getHdVideos(rtsp) {
|
|
|
this.$nextTick(() => {
|
|
|
var vlc = document.getElementById('video');
|
|
|
var options = new Array(":network-caching=100");//减少延迟
|
|
|
var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
|
|
|
vlc.playlist.playItem(vlcItem);
|
|
|
this.vlcm = vlc
|
|
|
})
|
|
|
},
|
|
|
zoomDecStart(){
|
|
|
console.log('变倍-按下')
|
|
|
this.zoomSubUrl=require('@/assets/sub-active-icon.png')
|
|
|
this.$axios.post('/camera/control/zoomDec/start/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
zoomDecStop(){
|
|
|
console.log('变倍-抬起')
|
|
|
this.zoomSubUrl=require('@/assets/sub-icon.png')
|
|
|
this.$axios.post('/camera/control/zoomDec/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
zoomAddStart(){
|
|
|
console.log('变倍+按下')
|
|
|
this.zoomAddUrl=require('@/assets/add-active-icon.png')
|
|
|
this.$axios.post('/camera/control/zoomAdd/start/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
zoomAddStop(){
|
|
|
console.log('变倍+抬起')
|
|
|
this.zoomAddUrl=require('@/assets/add-icon.png')
|
|
|
this.$axios.post('/camera/control/zoomAdd/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
focusDecStart(){
|
|
|
console.log('变焦-按下')
|
|
|
this.focusSubUrl=require('@/assets/sub-active-icon.png')
|
|
|
this.$axios.post('/camera/control/focusDec/start/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
focusDecStop(){
|
|
|
console.log('变焦-抬起')
|
|
|
this.focusSubUrl=require('@/assets/sub-icon.png')
|
|
|
this.$axios.post('/camera/control/focusDec/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
focusAddStart(){
|
|
|
console.log('变焦+按下')
|
|
|
this.focusAddUrl=require('@/assets/add-active-icon.png')
|
|
|
this.$axios.post('/camera/control/focusAdd/start/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
focusAddStop(){
|
|
|
console.log('变焦+抬起')
|
|
|
this.focusAddUrl=require('@/assets/add-icon.png')
|
|
|
this.$axios.post('/camera/control/focusAdd/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
irisDecStart(){
|
|
|
console.log('光圈-按下')
|
|
|
this.irisSubUrl=require('@/assets/sub-active-icon.png')
|
|
|
this.$axios.post('/camera/control/irisDec/start/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
irisDecStop(){
|
|
|
console.log('光圈-抬起')
|
|
|
this.irisSubUrl=require('@/assets/sub-icon.png')
|
|
|
this.$axios.post('/camera/control/irisDec/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
irisAddStart(){
|
|
|
console.log('光圈+按下')
|
|
|
this.irisAddUrl=require('@/assets/add-active-icon.png')
|
|
|
this.$axios.post('/camera/control/irisAdd/start/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
irisAddStop(){
|
|
|
console.log('光圈+抬起')
|
|
|
this.irisAddUrl=require('@/assets/add-icon.png')
|
|
|
this.$axios.post('/camera/control/irisAdd/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
leftUpStart(){
|
|
|
console.log('左上鼠标按下')
|
|
|
this.leftUpUrl=require('@/assets/left-up-active-icon.png')
|
|
|
this.$axios.post('/camera/control/leftUp/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
leftUpStop(){
|
|
|
console.log('左上鼠标抬起')
|
|
|
this.leftUpUrl=require('@/assets/left-up-icon.png')
|
|
|
this.$axios.post('/camera/control/leftUp/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
upStart(){
|
|
|
console.log('上鼠标按下')
|
|
|
this.upUrl=require('@/assets/up-active-icon.png')
|
|
|
this.$axios.post('/camera/control/up/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
upStop(){
|
|
|
console.log('上鼠标抬起')
|
|
|
this.upUrl=require('@/assets/up-icon.png')
|
|
|
this.$axios.post('/camera/control/up/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
rightUpStart(){
|
|
|
console.log('右上鼠标按下')
|
|
|
this.rightUpUrl=require('@/assets/right-up-active-icon.png')
|
|
|
this.$axios.post('/camera/control/rightUp/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
rightUpStop(){
|
|
|
console.log('右上鼠标抬起')
|
|
|
this.rightUpUrl=require('@/assets/right-up-icon.png')
|
|
|
this.$axios.post('/camera/control/rightUp/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
leftStart(){
|
|
|
// console.log(this.id)
|
|
|
console.log('左转鼠标按下')
|
|
|
this.leftUrl=require('@/assets/left-active-icon.png')
|
|
|
this.$axios.post('/camera/control/left/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
leftStop(){
|
|
|
this.leftUrl=require('@/assets/left-icon.png')
|
|
|
console.log('左转鼠标抬起')
|
|
|
this.$axios.post('/camera/control/left/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
rightStart(){
|
|
|
console.log('右转鼠标按下')
|
|
|
this.rightUrl=require('@/assets/right-active-icon.png')
|
|
|
this.$axios.post('/camera/control/right/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
rightStop(){
|
|
|
console.log('右转鼠标抬起')
|
|
|
this.rightUrl=require('@/assets/right-icon.png')
|
|
|
this.$axios.post('/camera/control/right/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
leftDownStart(){
|
|
|
console.log('左下鼠标按下')
|
|
|
this.leftDownUrl=require('@/assets/left-down-active-icon.png')
|
|
|
this.$axios.post('/camera/control/leftDown/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
leftDownStop(){
|
|
|
console.log('左下鼠标抬起')
|
|
|
this.leftDownUrl=require('@/assets/left-down-icon.png')
|
|
|
this.$axios.post('/camera/control/leftDown/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
downStart(){
|
|
|
console.log('下鼠标按下')
|
|
|
this.downUrl=require('@/assets/down-active-icon.png')
|
|
|
this.$axios.post('/camera/control/down/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
downStop(){
|
|
|
console.log('下鼠标抬起')
|
|
|
this.downUrl=require('@/assets/down-icon.png')
|
|
|
this.$axios.post('/camera/control/down/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
rightDownStart(){
|
|
|
console.log('右下鼠标按下')
|
|
|
this.rightDownUrl=require('@/assets/right-down-active-icon.png')
|
|
|
this.$axios.post('/camera/control/rightDown/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
rightDownStop(){
|
|
|
console.log('右下鼠标抬起')
|
|
|
this.rightDownUrl=require('@/assets/right-down-icon.png')
|
|
|
this.$axios.post('/camera/control/rightDown/stop/'+this.id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.wrap {
|
|
|
.table {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.video-mask {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
/*background-color: #001529;*/
|
|
|
z-index: 1000;
|
|
|
|
|
|
#video {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.video-close {
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
top: 20px;
|
|
|
color: #ffffff;
|
|
|
font-size: 24px;
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
background: rgba(0,0,0,0.5);
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
.operation-list{
|
|
|
position: absolute;
|
|
|
right: 200px;
|
|
|
bottom: 20px;
|
|
|
/*width: 150px;*/
|
|
|
/*border: solid 1px blue;*/
|
|
|
z-index: 10;
|
|
|
.operation-item{
|
|
|
img{
|
|
|
width: 42px;
|
|
|
}
|
|
|
span{
|
|
|
padding: 5px 10px;
|
|
|
background: rgba(0,0,0,0.5);
|
|
|
font-size: 18px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.direction-list{
|
|
|
position: absolute;
|
|
|
right: 30px;
|
|
|
bottom: 20px;
|
|
|
width: 150px;
|
|
|
z-index: 10;
|
|
|
/*border: solid 1px blue;*/
|
|
|
.direction-item{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
img {
|
|
|
width: 42px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
img {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.vxgplayer {
|
|
|
border: none;
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
</style>
|