vue调用监控（海康威视）

萤石云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%;
}