一访敌、設備激活（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 設備激活
打開軟件會自動搜索局域網內的所有設備势决，因為我這里已經全部激活迅涮，選中未激活狀態(tài)的設備，右邊就會提示設置管理員密碼并激活徽龟，如果一次不成功叮姑，退出工具，重新打開再激活据悔。
Inked1_LI.jpg
二传透、帳號注冊 & 添加設備 & 創(chuàng)建應用
2.1 帳號注冊
2.1 添加設備（PC）
進入開發(fā)者服務：https://open.ys7.com/console/device.html
開發(fā)者服務》我的資源》我的設備》添加設備
輸入序列號和驗證碼，其中序列號在機身標簽上极颓，螢石設備的驗證碼在設備機身上朱盐，海康設備驗證碼是在激活設備時自己自定義的菠隆。
手機APP添加設備參考官方教程：https://open.ys7.com/bbs/article/10
3.1 創(chuàng)建應用
進入開發(fā)者服務：https://open.ys7.com/console/device.html
開發(fā)者服務》我的應用
創(chuàng)建好應用后兵琳，就可以獲得應用密鑰
1.png
一定要保存好AppKey和Secret狂秘，因為代碼中要通過這兩個獲取AccessToken，然后再用AccessToken獲取賬戶內的設備信息
三躯肌、Vue項目引用
3.1 下載依賴文件UIKit.js
1.png
解壓縮之后者春，把ezuikit.js拷貝在項目中
3.2 Vue引入和實現(xiàn)代碼：
項目使用@vue/cli 4.0.5搭建
template：
<div class="hello">
<h1>螢石視頻監(jiān)控應用于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="監(jiān)控模式" 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: {},
// 監(jiān)控地址
MonitorUrl: "",
beginDate: `${moment().format('YYYYMMDD')}000000`,
endDate: `${moment().format('YYYYMMDD')}235959`,
//監(jiān)控地址參數(shù)
MonitorParam: {
url: "", //播放地址其中包含了設備序列號
autoplay: "1", //1-開啟自動播放，未顯示字段-關閉自動播放
audio: "1", //1-開啟音頻嫡丙，未顯示字段-關閉音頻
accessToken: "", //訪問令牌拴袭，播放監(jiān)控地址的必要參數(shù)
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字符串
// 上面在開發(fā)平臺創(chuàng)建應用的 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 每頁條數(shù)
* 注：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`
// 等所有組件加載完畢后再執(zhí)行
this.$nextTick(function () {
var player = new EZUIPlayer('myPlayer')
// player.play()
})
// console.log(this.MonitorParam)
// 獲取監(jiān)控（可回放）視頻地址
this.getVideoMonitorSrc(this.SplMonitorUrl(this.MonitorParam))
},
// 獲取監(jiān)控（可回放）視頻地址
getVideoMonitorSrc(url) {
// 拼接監(jiān)控地址
this.MonitorUrl = url
this.$nextTick(function () {
/* 獲取播放器元素 */
var iframeWindow = document.getElementById('ysOpenDevice').contentWindow;
})
},
// 拼接監(jiān)控地址
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 = `$${mytime}`
let e = moment(this.MonitorParam.end, "YYYYMMDDHHmmss").format("YYYYMMDD")
this.MonitorParam.end = `${e}235959`
},
// 查看監(jiān)控
getMonitor() {
// 獲取監(jiān)控（可回放）視頻地址
this.getVideoMonitorSrc(this.SplMonitorUrl(this.MonitorParam))
}
},
mounted() {
// 獲取直播視頻地址
this.getVideoSrc()
}
}
