293 lines
12 KiB
Vue
293 lines
12 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 }}—{{ $t('videoMonitoring.title') }}<span class="outline" v-if="deviceState == 0">({{ $t('realTime.deviceOffline') }})</span>
|
||
</div>
|
||
<div class="flex-list realTime-bottom videoMonitoring-monitor" :class="limitUserId==13?'noHeader':''+' '+cameraName==1?'':'center'">
|
||
<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-if="!imgUrl" ref="videoPlayer" class="video-js">
|
||
<div id="video-js"></div>
|
||
</div>
|
||
|
||
<div class="video-control" v-if="cameraName==1">
|
||
<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>{{ $t('videoMonitoring.topLeft') }}</div>
|
||
</div>
|
||
<div @mousedown="downStart(6)">
|
||
<img src="../../assets/img/video-icon1.png" alt="">
|
||
<div>{{ $t('videoMonitoring.topRight') }}</div>
|
||
</div>
|
||
<div @mousedown="downStart(5)">
|
||
<img src="../../assets/img/video-icon2.png" alt="">
|
||
<div>{{ $t('videoMonitoring.bottomLeft') }}</div>
|
||
</div>
|
||
<div @mousedown="downStart(7)">
|
||
<img src="../../assets/img/video-icon3.png" alt="">
|
||
<div>{{ $t('videoMonitoring.bottomRight') }}</div>
|
||
</div>
|
||
<div @mousedown="downStart(8)">
|
||
<img src="../../assets/img/video-icon4.png" alt="">
|
||
<div>{{ $t('videoMonitoring.zoomIn') }}</div>
|
||
</div>
|
||
<div @mousedown="downStart(9)">
|
||
<img src="../../assets/img/video-icon5.png" alt="">
|
||
<div>{{ $t('videoMonitoring.zoomOut') }}</div>
|
||
</div>
|
||
<div @mousedown="downStart(10)">
|
||
<img src="../../assets/img/video-icon6.png" alt="">
|
||
<div>{{ $t('videoMonitoring.focusNear') }}</div>
|
||
</div>
|
||
<div @mousedown="downStart(11)">
|
||
<img src="../../assets/img/video-icon7.png" alt="">
|
||
<div>{{ $t('videoMonitoring.focusFar') }}</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,
|
||
limitUserId:1,
|
||
|
||
cameraName: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
|
||
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
|
||
clearInterval(this.statusInterval) && this.statusInterval
|
||
this.imgUrl=''
|
||
setTimeout(() => {
|
||
|
||
if (this.player) {
|
||
this.player.stop()
|
||
that.player.destroy()
|
||
that.player = null
|
||
}
|
||
that.dataInit();
|
||
|
||
|
||
}, 0);
|
||
},
|
||
'$store.state.equipmentIndex'(newVal, oldVal) {
|
||
const that = this;
|
||
const store = this.$store.state
|
||
this.indexs = newVal;
|
||
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
|
||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
|
||
this.imgUrl=''
|
||
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
|
||
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
|
||
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
|
||
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.limitUserId==13?48:0)
|
||
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
|
||
})
|
||
window.onresize = () => {
|
||
this.player.reSize(
|
||
this.$refs.videoPlayer.clientWidth,
|
||
this.$refs.videoPlayer.clientHeight
|
||
);
|
||
};
|
||
},
|
||
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) {
|
||
|
||
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||
this.api.user_getjurisdiction(userInfo.userid).then((res1) => {
|
||
if (res1.data.code == 200) {
|
||
this.limitUserId = (res1.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10 || el.id == 11|| el.id == 12|| el.id == 13))[0].id;
|
||
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">
|
||
.videoMonitoring{
|
||
.noHeader .header-controls{
|
||
// .theme-icon-item{
|
||
// display: none!important;
|
||
// }
|
||
display: none!important;
|
||
|
||
//
|
||
}
|
||
}
|
||
</style> |