vue调用监控(海康威视)
萤石云api萤石云监控操作文档ezuikit-js1、安装依赖npm install ezuikit-js2、在你使用的页面引入import EZUIKit from 'ezuikit-js';3、HTML<div id="video-container"></div><div v-if="isControl"><p class="up contain"
·
萤石云api
萤石云监控操作文档
ezuikit-js
1、安装依赖
npm install ezuikit-js
2、在你使用的页面引入
import EZUIKit from 'ezuikit-js';
3、HTML
<div id="video-container"></div>
<div v-if="isControl">
<p class="up contain" title="上" @click="control(0)"><img src="../../assets/image/video/up.png" /></p>
<p class="left contain" title="左" @click="control(2)"><img src="../../assets/image/video/left.png" /></p>
<p class="zt contain" title="暂停" @click="stop()"><img src="../../assets/image/video/zt.png" /></p>
<p class="right contain" title="右" @click="control(3)"><img src="../../assets/image/video/right.png" /></p>
<p class="bottom contain" title="下" @click="control(1)"><img src="../../assets/image/video/bottom.png" /></p>
</div>
js
//获取token
handleAsstoken() {
this.Sevice({
url: 'monitor/accessToken',
method: 'get'
}).then(res => {
if (res && res.code == 200) {
this.accessToken = res.data.accessToken;
this.handleEzuikit();
}
}).catch(err => {
console.log(err);
})
},
//开启监控
handleEzuikit() {
//获取地址
this.isControl = false;
this.Sevice({
url: '/monitor/address?accessToken=' + this.accessToken + '&deviceSerial=123',
method: 'get',
}).then(res => {
if (res && res.code == 200) {
this.isControl = true;
var player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: this.accessToken, //token
url: res.data.url, //播放地址
audio: 1, //开启声音
width: 1000,
height: 600,
template: 'standard', //播放器模板 simple:极简版;standard:标准版;security:安防版(预览回放);vioce:语音版
header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
// footer: ["broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
})
}
}).catch(err => {
console.log(err);
})
}
//操作监控
control(val) {
let that = this;
that.direction = val;
this.Sevice({
url: "monitor/controlStop?accessToken=" + that.accessToken + "&deviceSerial=123" +"&channelNo=1&direction=" + that.direction,
method: 'get',
}).then((res) => {
console.log(res);
if (res.code == 200) {
that.$message.success('暂停成功');
this.Sevice({
url: "monitor/control?accessToken=" + that.accessToken +
"&deviceSerial=123" + "&channelNo=1&direction=" + val + "&speed=1",
method: 'get',
}).then((res) => {
console.log(res);
if (res.code == 200) {
that.$message.success('控制成功');
}
})
}
})
}
// 暂停操作
stop() {
let that = this;
this.Sevice({
url:"monitor/controlStop?accessToken=" + that.accessToken + "&deviceSerial=123"+"&channelNo=1&direction="+'',
method: 'get',
}).then((res) => {
console.log(res);
if (res.data.code == 200) {
that.$message.success('暂停成功');
}
})
},
css
#video-container {
width: 100%;
}
更多推荐
已为社区贡献2条内容
所有评论(0)