298 lines
11 KiB
Vue
298 lines
11 KiB
Vue
<template>
|
|
<div class="video-box">
|
|
<video id="videoPlayer" ref="videoPlayer" class="video-player" autoplay controls="controls" @click="checkVideo(1)"/>
|
|
<!-- <video id="videoPlayer" class="video-player" autoplay="autoplay" loop="loop"
|
|
muted controls="controls"></video> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import { videoConfig } from './js/video'
|
|
import flvjs from 'flv.js'
|
|
import CryptoJS from 'crypto-js';
|
|
import $ from 'jquery';
|
|
let _cf = {
|
|
ver:'debug',
|
|
q2http_url: 'http://112.31.70.193:1854/icvs/',
|
|
websocket_url:'ws://112.31.70.193:9580/wss',
|
|
// - 配置登录参数
|
|
connParams : {
|
|
// - 登录平台IP
|
|
address : "112.31.70.193",
|
|
port : "9988",
|
|
// - 登录平台用户名
|
|
user : "bns3",
|
|
// - 登录平台密码
|
|
password :"Bns@admin**",
|
|
// - 登录平台企业ID
|
|
epid : "system",
|
|
// - 登录平台是否通过网闸模式
|
|
bfix :1
|
|
}
|
|
}
|
|
var loginToken='';
|
|
var puId='';
|
|
export default {
|
|
name: "monitor",
|
|
props: {
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
return {
|
|
// 视频播放实例
|
|
videoPlayer: null,
|
|
classStyle: 'ball-content',
|
|
};
|
|
},
|
|
mounted() {
|
|
this.connect()
|
|
},
|
|
methods: {
|
|
checkVideo(index){
|
|
console.log(index)
|
|
},
|
|
//加密
|
|
videoEncrypt(word){
|
|
var key = CryptoJS.enc.Utf8.parse("297796CCB81D2553");
|
|
var srcs = CryptoJS.enc.Utf8.parse(word);
|
|
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
|
|
return encrypted.toString();
|
|
},
|
|
// 请求
|
|
requestPost(router, params, callback) {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: _cf.q2http_url + router,
|
|
data: params,
|
|
traditional: true,
|
|
dataType: 'json',
|
|
async: false,
|
|
complete: function (rv) {
|
|
if (typeof callback == 'function') callback(rv)
|
|
}
|
|
})
|
|
},
|
|
//连接
|
|
connect() {
|
|
console.log('connect')
|
|
var allDataParams="address="+_cf.connParams.address+"&port="+_cf.connParams.port+
|
|
"&user="+ _cf.connParams.user+"&password="+_cf.connParams.password+"&epid="+_cf.connParams.epid+"&fixaddr="+_cf.connParams.bfix;
|
|
let params = {
|
|
"params":this.videoEncrypt(allDataParams)
|
|
}
|
|
// console.log(params)
|
|
this.requestPost('login2', params, function (rv) {
|
|
let result = {
|
|
errcode: -1,
|
|
token: ''
|
|
}
|
|
let respJSON = JSON.parse(rv.responseText);
|
|
if (respJSON.hasOwnProperty('errcode')) {
|
|
result.errcode = respJSON.errcode;
|
|
}
|
|
if (respJSON.hasOwnProperty('token')) {
|
|
result.token = respJSON.token;
|
|
result.errcode = 0;
|
|
loginToken = result.token;//获取Token
|
|
}
|
|
});
|
|
|
|
},
|
|
// 初始化视频监控
|
|
initVideo(devId) {
|
|
puId = devId;
|
|
console.log(puId)
|
|
console.log(loginToken)
|
|
this.$nextTick(() => {
|
|
const videoElement = this.$refs.videoPlayer
|
|
const url = `${_cf.q2http_url}/stream.flv?puid=${puId}&idx=0&stream=0&token=${loginToken}`
|
|
try {
|
|
this.videoPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
url: url,
|
|
isLive: true,
|
|
hasAudio: false
|
|
})
|
|
|
|
this.videoPlayer.attachMediaElement(videoElement)
|
|
this.videoPlayer.load()
|
|
|
|
setTimeout(() => {
|
|
this.videoPlayer.play()
|
|
}, 200)
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
//缩放功能
|
|
zoomcontrol(option) {
|
|
console.log(puId)
|
|
let params = {
|
|
puid: puId,
|
|
idx: "0"
|
|
}
|
|
switch (option) {
|
|
case "stop":
|
|
//停止缩放接口
|
|
this.requestPost('PTZ/C_PTZ_StopPictureZoom?token=' + loginToken, params, rv => {
|
|
})
|
|
break;
|
|
case "zoomin":
|
|
//放大图像接口
|
|
this.requestPost('PTZ/C_PTZ_ZoomInPicture?token=' + loginToken, params, rv => {
|
|
})
|
|
break;
|
|
default:
|
|
//缩小图像接口
|
|
this.requestPost('PTZ/C_PTZ_ZoomOutPicture?token=' + loginToken, params, rv => {
|
|
})
|
|
break;
|
|
}
|
|
},
|
|
//远近焦点功能
|
|
focuscontrol(option) {
|
|
console.log(puId)
|
|
let params = {
|
|
puid: puId,
|
|
idx: "0"
|
|
}
|
|
switch (option) {
|
|
case "near":
|
|
this.requestPost('PTZ/C_PTZ_MakeFocusNear?token=' + loginToken, params, rv => {
|
|
console.log(rv)
|
|
})
|
|
break;
|
|
case "faraway":
|
|
this.requestPost('PTZ/C_PTZ_MakeFocusFar?token=' + loginToken, params, rv => {
|
|
console.log(rv)
|
|
})
|
|
break;
|
|
default:
|
|
this.requestPost('PTZ/C_PTZ_StopFocusMove?token=' + loginToken, params, rv => {
|
|
console.log(rv)
|
|
})
|
|
break;
|
|
}
|
|
},
|
|
aperture(option) {
|
|
let camera = {
|
|
puid: puId,
|
|
idx: "0"
|
|
};
|
|
let xml = "";
|
|
switch (option) {
|
|
case "augment":
|
|
xml = `<?xml version="1.0" encoding="UTF-8"?>
|
|
<M Type="ComReq">
|
|
<C Type="G" Prio="1" EPID="system" Lang="zh_CN">
|
|
<Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_AugmentAperture" Stream="0"><Param></Param></Res>
|
|
</C>
|
|
</M>`;
|
|
this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
|
|
console.log(rv);
|
|
});
|
|
break;
|
|
case "minish":
|
|
xml = `<?xml version="1.0" encoding="UTF-8"?>
|
|
<M Type="ComReq">
|
|
<C Type="G" Prio="1" EPID="system" Lang="zh_CN">
|
|
<Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_MinishAperture" Stream="0"><Param></Param></Res>
|
|
</C>
|
|
</M>`;
|
|
this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
|
|
console.log(rv)
|
|
});
|
|
break;
|
|
default:
|
|
xml = `<?xml version="1.0" encoding="UTF-8"?>
|
|
<M Type="ComReq">
|
|
<C Type="G" Prio="1" EPID="system" Lang="zh_CN">
|
|
<Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_StopApertureZoom" Stream="0"><Param></Param></Res>
|
|
</C>
|
|
</M>`;
|
|
this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
|
|
console.log(rv);
|
|
});
|
|
break;
|
|
}
|
|
},
|
|
//旋转平台功能
|
|
async turncontrol(option) {
|
|
let params = {
|
|
puid: puId,
|
|
idx: "0",
|
|
motion: option
|
|
};
|
|
this.requestPost('PTZ/C_PTZ_Turn?token=' + loginToken, params, (rv) => { });
|
|
},
|
|
//控制
|
|
control(key) {
|
|
console.log(key)
|
|
switch (key) {
|
|
case 0:
|
|
this.turncontrol('stop');
|
|
break;
|
|
case 1:
|
|
this.turncontrol('up');
|
|
break;
|
|
case 2:
|
|
this.turncontrol('down');
|
|
break;
|
|
case 3:
|
|
this.turncontrol('left');
|
|
break;
|
|
case 4:
|
|
this.turncontrol('right');
|
|
break;
|
|
case 5:
|
|
this.zoomcontrol('zoomin');
|
|
break;
|
|
case 6:
|
|
this.zoomcontrol('zoominout');
|
|
break;
|
|
case 7:
|
|
this.focuscontrol('near');
|
|
break;
|
|
case 8:
|
|
this.focuscontrol('faraway');
|
|
break;
|
|
case 9:
|
|
this.zoomcontrol('stop');
|
|
break;
|
|
case 10:
|
|
this.focuscontrol('stop');
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
},
|
|
// 销毁视频监控
|
|
closeVideo() {
|
|
if (this.videoPlayer) {
|
|
// this.videoPlayer.pause()
|
|
this.videoPlayer.unload()
|
|
this.videoPlayer.detachMediaElement()
|
|
this.videoPlayer.destroy()
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.video-box{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.video-player {
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
object-fit: fill;
|
|
}
|
|
</style> |