229 lines
9.8 KiB
Vue
229 lines
9.8 KiB
Vue
<template>
|
||
<div class="formula realTime videoMonitoring" @mouseup="upEnd()">
|
||
<div class="page-content new-data">
|
||
<div class="table-title">
|
||
<img src="../../assets/image/real-time.png" alt="" />
|
||
{{ deviceTypeName }}—视频监控<span class="outline" v-if="deviceState == 0">(设备离线)</span>
|
||
</div>
|
||
<div class="flex-list realTime-bottom videoMonitoring-monitor">
|
||
<div class="left-view" v-if="deviceName != 30">
|
||
<div ref="monitor" class="monitor" id="monitor">
|
||
<!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
|
||
<img v-if="imgUrl" class="video-js" :src="imgUrl" alt="">
|
||
<div v-else ref="videoPlayer" class="video-js" id="video-js"></div>
|
||
<div class="video-control">
|
||
<div class="video-btn-big">
|
||
<div class="top" @mousedown="downStart(0)">
|
||
<div class="arrow"></div>
|
||
</div>
|
||
<div class="bottom" @mousedown="downStart(1)">
|
||
<div class="arrow"></div>
|
||
</div>
|
||
<div class="left" @mousedown="downStart(2)">
|
||
<div class="arrow"></div>
|
||
</div>
|
||
<div class="right" @mousedown="downStart(3)">
|
||
<div class="arrow"></div>
|
||
</div>
|
||
</div>
|
||
<div class="video-btn">
|
||
<div @mousedown="downStart(4)"><img src="../../assets/img/video-icon0.png" alt="">
|
||
<div>左上 </div>
|
||
</div>
|
||
<div @mousedown="downStart(6)"><img src="../../assets/img/video-icon1.png" alt="">
|
||
<div>右上 </div>
|
||
</div>
|
||
<div @mousedown="downStart(5)"><img src="../../assets/img/video-icon2.png" alt="">
|
||
<div>左下 </div>
|
||
</div>
|
||
<div @mousedown="downStart(7)"><img src="../../assets/img/video-icon3.png" alt="">
|
||
<div>右下 </div>
|
||
</div>
|
||
<div @mousedown="downStart(8)"><img src="../../assets/img/video-icon4.png" alt="">
|
||
<div>放大+</div>
|
||
</div>
|
||
<div @mousedown="downStart(9)"><img src="../../assets/img/video-icon5.png" alt="">
|
||
<div>缩小-</div>
|
||
</div>
|
||
<div @mousedown="downStart(10)"><img src="../../assets/img/video-icon6.png" alt="">
|
||
<div>近焦距</div>
|
||
</div>
|
||
<div @mousedown="downStart(11)"><img src="../../assets/img/video-icon7.png" alt="">
|
||
<div>远焦距</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import EZUIKit from 'ezuikit-js';
|
||
import videojs from 'video.js';
|
||
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
|
||
import axios from 'axios';
|
||
export default {
|
||
data() {
|
||
return {
|
||
deviceTypeName: '',
|
||
deviceName: '',
|
||
deviceState: 1,
|
||
statusInterval: null,//status状态的Interval
|
||
player: null,
|
||
imgUrl:'',
|
||
url: '',
|
||
nowNum: -1,
|
||
}
|
||
},
|
||
watch: {
|
||
$route(newVal, oldVal) {
|
||
const that = this;
|
||
const store = this.$store.state
|
||
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
|
||
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
|
||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
|
||
clearInterval(this.statusInterval) && this.statusInterval
|
||
setTimeout(() => {
|
||
|
||
if (this.player) {
|
||
this.player.stop()
|
||
that.player.destroy()
|
||
that.player = null
|
||
}
|
||
that.dataInit();
|
||
|
||
|
||
}, 0);
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
const that = this;
|
||
// 销毁播放器
|
||
if (this.player) {
|
||
// this.player.dispose();
|
||
this.player.stop()
|
||
this.player.destroy()
|
||
this.player = null
|
||
}
|
||
clearInterval(this.statusInterval) && this.statusInterval
|
||
},
|
||
mounted() {
|
||
const that = this;
|
||
const store = this.$store.state
|
||
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
|
||
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
|
||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
|
||
setTimeout(() => {
|
||
that.dataInit();
|
||
}, 0);
|
||
},
|
||
methods: {
|
||
downStart(num) {
|
||
const store = this.$store.state
|
||
const that = this
|
||
console.log('start');
|
||
this.nowNum = num
|
||
var nowDevice = store.equipmentList[this.indexs - 1]
|
||
// var data = {
|
||
// accessToken: this.accesstoken,
|
||
// deviceSerial: nowDevice.cameraSerialNumber,
|
||
// channelNo: nowDevice.cameraChannelNumber,
|
||
// direction: num,
|
||
// speed: 1,
|
||
// }
|
||
// var header={
|
||
// 'Content-Type': 'application/x-www-form-urlencoded',
|
||
// }
|
||
// axios.post('https://open.ys7.com/api/lapp/device/ptz/start',data,header)
|
||
// .then(response => {
|
||
// console.log(response.data);
|
||
// })
|
||
// .catch(error => {
|
||
// console.error(error);
|
||
// });
|
||
this.api.cameraStart(nowDevice.cameraSerialNumber,nowDevice.cameraChannelNumber,num).then(res => {
|
||
setTimeout(() => {
|
||
that.upEnd()
|
||
}, 10000);
|
||
})
|
||
},
|
||
upEnd() {
|
||
const store = this.$store.state
|
||
const that = this
|
||
var num = this.nowNum
|
||
var nowDevice = store.equipmentList[this.indexs - 1]
|
||
console.log('end');
|
||
// var data = {
|
||
// accessToken: this.accesstoken,
|
||
// deviceSerial: nowDevice.cameraSerialNumber,
|
||
// channelNo: nowDevice.cameraChannelNumber,
|
||
// direction: num,
|
||
// speed: 1,
|
||
// }
|
||
// var header={
|
||
// 'Content-Type': 'application/x-www-form-urlencoded',
|
||
// }
|
||
// axios.post('https://open.ys7.com/api/lapp/device/ptz/stop',data,header)
|
||
// .then(response => {
|
||
// console.log(response.data);
|
||
// })
|
||
// .catch(error => {
|
||
// console.error(error);
|
||
// });
|
||
if (num != -1) {
|
||
this.api.cameraStop(nowDevice.cameraSerialNumber, nowDevice.cameraChannelNumber, num).then(res => {
|
||
this.nowNum=-1
|
||
})
|
||
}
|
||
|
||
},
|
||
createVideoNew(accessToken) {
|
||
// divW和divH是获取了父级宽高 使播放容器能铺满div
|
||
let divW = this.$refs.videoPlayer.clientWidth
|
||
let divH = this.$refs.videoPlayer.clientHeight
|
||
this.player = new EZUIKit.EZUIKitPlayer({
|
||
id: 'video-js', // 视频容器ID
|
||
accessToken: accessToken,
|
||
url: this.url,
|
||
// 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
|
||
// 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
|
||
template: 'security',
|
||
useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
|
||
// plugin: ["talk"], // 加载插件，talk-对讲 非必填
|
||
width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
|
||
height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
|
||
})
|
||
},
|
||
dataInit() {
|
||
const store = this.$store.state
|
||
var nowDevice = store.equipmentList[this.indexs - 1]
|
||
var data2 = {
|
||
cameraid: nowDevice.cameraSerialNumber,
|
||
channelid: nowDevice.cameraChannelNumber
|
||
}
|
||
if (!this.player) {
|
||
this.api.getGethls(data2).then(res => {
|
||
// console.log(res.data, 11);
|
||
if (res.data.code == 200) {
|
||
this.url = res.data.data.ezopen
|
||
this.accesstoken = res.data.data.accesstoken
|
||
this.createVideoNew(res.data.data.accesstoken)
|
||
}else{
|
||
this.imgUrl=nowDevice.hls
|
||
}
|
||
})
|
||
}
|
||
},
|
||
},
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss"></style>
|
||
|
||
|