一、设备激活（PC工具）
激活方式比较多，这里只说一下PC工具激活
1.1 PC激活工具下载安装
激活之前请保证摄像头和电脑在同一局域网下，进入官网
海康威视官网：https://www.hikvision.com/
导航：服务与支持》工具软件》Hikvision Tools（含SADP、录像容量计算等工具）》下载
下载地址：https://www.hikvision.com/cn/download_more_393.html
1.png
下载完成后进行软件安装
1.png
1.2 设备激活
打开软件会自动搜索局域网内的所有设备，因为我这里已经全部激活，选中未激活状态的设备，右边就会提示设置管理员密码并激活，如果一次不成功，退出工具，重新打开再激活。
Inked1_LI.jpg
二、帐号注册 & 添加设备 & 创建应用
2.1 帐号注册
2.1 添加设备（PC）
开发者服务》我的资源》我的设备》添加设备
输入序列号和验证码，其中序列号在机身标签上，萤石设备的验证码在设备机身上，海康设备验证码是在激活设备时自己自定义的。
手机APP添加设备参考官方教程：https://open.ys7.com/bbs/article/10
3.1 创建应用
开发者服务》我的应用
创建好应用后，就可以获得应用密钥
1.png
一定要保存好AppKey和Secret，因为代码中要通过这两个获取AccessToken，然后再用AccessToken获取账户内的设备信息
三、Vue项目引用
3.1 下载依赖文件UIKit.js
1.png
解压缩之后，把ezuikit.js拷贝在项目中
3.2 Vue引入和实现代码：
项目使用@vue/cli 4.0.5搭建
template：
<div class="hello">
<h1>萤石视频监控应用于Vue实践</h1>
<a-tabs defaultActiveKey="1">
<a-tab-pane tab="直播模式" key="1">
<div>
<video id="myPlayer" width="600" height="400" autoplay :src="liveRideo.rtmpHd || ''"></video>
<p>设备编号：{{liveRideo.deviceSerial || ''}}</p>
<p>设备名称：{{liveRideo.deviceName || ''}}</p>
<p>播放地址：{{liveRideo.rtmpHd || ''}}</p>
</div>
</a-tab-pane>
<a-tab-pane tab="监控模式" key="2" forceRender>
<div>
<div style="margin-bottom:15px;">
选择日期：
<a-date-picker @change="dateChange" :defaultValue="dateDefaultValue" />
选择开始时间：
<a-time-picker @change="timeChange" :defaultValue='timeDefaultValue' />
<a-button @click="getMonitor">查看</a-button>
</div>
<div>播放地址：{{this.SplMonitorUrl(this.MonitorParam)}}</div>
<div>
<iframe :src="MonitorUrl" width="600" height="400" id="ysOpenDevice" allowfullscreen>
</iframe>
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
script：
import "jquery"
import "../utils/ezuikit.js" //根据自己的路径引入上面下载的ezuikit.js
import axios from "axios" //vue的请求使用 axios
import Qs from 'qs' //axios自带的依赖，用来转换字符串
import moment from "moment" //moment时间组件，用来选择观看的回放时间
export default {
name: 'HelloWorld',
data() {
return {
accessToken: "",
// 当前的设备 包括编号、播放地址等信息
liveRideo: {},
// 监控地址
MonitorUrl: "",
beginDate: `${moment().format('YYYYMMDD')}000000`,
endDate: `${moment().format('YYYYMMDD')}235959`,
//监控地址参数
MonitorParam: {
url: "", //播放地址其中包含了设备序列号
autoplay: "1", //1-开启自动播放，未显示字段-关闭自动播放
audio: "1", //1-开启音频，未显示字段-关闭音频
accessToken: "", //访问令牌，播放监控地址的必要参数
begin: `${moment().format('YYYYMMDD')}000000`, //开始时间
end: `${moment().format('YYYYMMDD')}235959`, //结束时间
templete: "2", //0极简版 1标准版 2安防版
},
// 选择回放的默认日期 date
dateDefaultValue: moment(moment(), 'YYYY/MM/DD HH'),
// 选择回放的默认时间 time
timeDefaultValue: moment('00:00:00', 'HH:mm:ss'),
}
},
methods: {
// 获取直播视频地址
async getVideoSrc() {
/**
* 获取accessToken
* @appKey *
* @appSecret *
* appKey & appSecret => getURL:https://open.ys7.com/console/application.html
* 注：Content-Type 必须为 application/x-www-form-urlencoded 否则获取不到值
*/
let accessToken = await axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'POST',
url: 'https://open.ys7.com/api/lapp/token/get',
data: Qs.stringify({ //将对象转换为JSON字符串
// 上面在开发平台创建应用的 appKey & appSecret
appKey: '**********************************',
appSecret: '**********************************'
})
}).then(res => {
console.log(res)
if (res.status == 200) {
return res.data.data.accessToken
}
})
// console.log(accessToken)
this.accessToken = accessToken
this.MonitorParam.accessToken = accessToken
/**
* 获取设备列表 & 播放的URL
* @accessToken *
* @pageStart 起始位置
* @pageSize 每页条数
* 注：Content-Type 必须为 application/x-www-form-urlencoded 否则获取不到值
*/
let liveRideo = await axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'POST',
url: 'https://open.ys7.com/api/lapp/live/video/list',
data: Qs.stringify({ //将对象转换为JSON字符串
accessToken: accessToken,
pageStart: 0,
pageSize: 10
})
}).then(res => {
console.log(res)
if (res.status == 200) {
return res.data.data[0]
}
})
this.liveRideo = liveRideo
this.MonitorParam.url = `ezopen://open.ys7.com/${liveRideo.deviceSerial || ''}/1.rec`
// 等所有组件加载完毕后再执行
this.$nextTick(function () {
var player = new EZUIPlayer('myPlayer')
// player.play()
})
// console.log(this.MonitorParam)
// 获取监控（可回放）视频地址
this.getVideoMonitorSrc(this.SplMonitorUrl(this.MonitorParam))
},
// 获取监控（可回放）视频地址
getVideoMonitorSrc(url) {
// 拼接监控地址
this.MonitorUrl = url
this.$nextTick(function () {
/* 获取播放器元素 */
var iframeWindow = document.getElementById('ysOpenDevice').contentWindow;
})
},
// 拼接监控地址
SplMonitorUrl(...param) {
let obj = {}
Object.assign(obj, ...param);
let url = "https://open.ys7.com/ezopen/h5/iframe_se?"
for (let item in obj) {
url += `${item}=${obj[item]}&`
}
return url.substr(0, url.length - 1);
},
// 选择日期
dateChange(date) {
let mydate = moment(date).format("YYYYMMDD")
this.MonitorParam.begin = `${mydate}000000`
this.MonitorParam.end = `${mydate}235959`
},
// 选择时间
timeChange(time) {
console.log(time)
let mytime = moment(time).format("HHmmss")
let b = moment(this.MonitorParam.begin, "YYYYMMDDHHmmss").format("YYYYMMDD")
this.MonitorParam.begin = `${b}${mytime}`
let e = moment(this.MonitorParam.end, "YYYYMMDDHHmmss").format("YYYYMMDD")
this.MonitorParam.end = `${e}235959`
},
// 查看监控
getMonitor() {
// 获取监控（可回放）视频地址
this.getVideoMonitorSrc(this.SplMonitorUrl(this.MonitorParam))
}
},
mounted() {
// 获取直播视频地址
this.getVideoSrc()
}
}
