<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<title>播放器</title>
|
<style>
|
#videoWin {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
|
</head>
|
|
<body style="margin: 0;">
|
<div style="width: 100%;height: 100%;position: absolute;">
|
<div id="iwin" style="width: 100%;height: calc(100% - 200px);background:firebrick;">
|
<div id="videoWin"></div>
|
</div>
|
<button onclick="getAccessToken();">getAccessToken</button>
|
<!-- <button onclick="getLiveVideoList();">获取直播视频列表</button>
|
<button onclick="getDeviceList();">获取设备列表</button> -->
|
<button onclick="getCamerasList();">获取摄像头列表</button>
|
<br />
|
<span>设备获取列表demo</span>
|
<select id="cameralist" style="min-width: 280px"></select>
|
<button onclick="play();">播放测试</button>
|
<br />
|
<span>云台控制demo</span>
|
<table>
|
<tbody>
|
<tr>
|
<td>
|
<button onmousedown="PtzMove(4);" onmouseup="PtzStop();">左上</button>
|
</td>
|
<td>
|
<button onmousedown="PtzMove(0);" onmouseup="PtzStop();">上</button>
|
</td>
|
<td>
|
<button onmousedown="PtzMove(6);" onmouseup="PtzStop();">右上</button>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<button onmousedown="PtzMove(2);" onmouseup="PtzStop();">左</button>
|
</td>
|
<td>
|
<button onmouseup="PtzStop();">O</button>
|
</td>
|
<td>
|
<button onmousedown="PtzMove(3);" onmouseup="PtzStop();">右</button>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<button onmousedown="PtzMove(5);" onmouseup="PtzStop();">左下</button>
|
</td>
|
<td>
|
<button onmousedown="PtzMove(1);" onmouseup="PtzStop();">下</button>
|
</td>
|
<td>
|
<button onmousedown="PtzMove(7);" onmouseup="PtzStop();">右下</button>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<span>回放demo(hkDeviceControl.js文件里还有“根据时间获取历史影像”接口)</span>
|
<br/>
|
<span>时间:</span>
|
<input id="begintime" type="text" placeholder="yyyyMMddhhmmss" /> - <input id="endtime" type="text" placeholder="yyyyMMddhhmmss" />
|
<button onclick="playback();">回放</button>
|
<button onclick="getPlaybackRecord();">查看回放记录</button>
|
</div>
|
<script type="text/javascript" src="js/ezuikit.js"></script>
|
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
|
<script type="text/javascript" src="js/hkDeviceControl.js"></script>
|
<script>
|
function play(obj) {
|
|
//var url = $('#cameralist option:selected').val();
|
//var accessToken = "at.262uxopt6ifa59wi62a92w19cf9jqzl3-5tow0h34ce-1qzgzxf-4ci8iqqrk";
|
var index = $('#cameralist option:selected').val();
|
var info = hkDevice.cameralist[index];
|
var url = 'ezopen://open.ys7.com/' + info.deviceSerial + '/' + info.channelNo + '.live';
|
|
var videoplay = new EZUIKit.EZUIPlayer({
|
id: 'videoWin',
|
autoplay: true,
|
url: url,
|
accessToken: hkDevice.accessToken,
|
decoderPath: '/videoPlay/', //decoderPath：${window.YOUR_PATH};请在生产模式输入ezuikit.js的绝对路径
|
width: '600',
|
height: '400',
|
// handleError: handleError,
|
//handleSuccess: handleSuccess,
|
});
|
}
|
|
function mppx(list) {
|
var count = list.length;
|
for (var i = 0; i < count - 1; i++) {
|
for (var j = 0; j < count - 1; j++) {
|
if (list[j].channelNo > list[j + 1].channelNo) {
|
var t = list[j];
|
list[j] = list[j + 1];
|
list[j + 1] = t;
|
}
|
}
|
}
|
return list;
|
}
|
var cameralist = [];
|
var backRecord = [];
|
function setCameralist(list) {
|
list = mppx(list);
|
console.log(list)
|
var ht = "";
|
for (var i = 0; i < list.length; i++) {
|
if(list[i].status == 1){
|
// ht += '<option value=' + i + '>' + (list[i].status == 1 ? "" : "[不可用]") + list[i].channelName + '</option>';
|
list[i].index = i;
|
cameralist.push(list[i])
|
//ht += '<option value=' + i + '>' + list[i].channelName + '</option>';
|
}
|
}
|
var cameralist1 = cameralist.slice(0,6);
|
for(var j=0;j<cameralist1.length;j++){
|
console.log(cameralist1[j].index)
|
getPlaybackRecord(cameralist1[j].index,cameralist1[j].channelName)
|
}
|
|
function sortNumber(a, b)
|
{
|
return b.startTime - a.startTime
|
}
|
//document.getElementById("cameralist").innerHTML = ht;
|
setTimeout(function(){
|
console.log(backRecord.sort(sortNumber))
|
},1000)
|
}
|
//
|
var hkDevice = new HkDevice("09c7be5c918542069e3f78737f2968a6","4c3ed3086fde15c5a28c975656882a1d");
|
|
function getAccessToken(listFn) {
|
hkDevice.getAccessToken(function (data) {
|
listFn&&listFn();
|
});
|
}
|
// function getLiveVideoList() {
|
// hkDevice.getLiveVideoList(function (data) {
|
|
// });
|
// }
|
// function getDeviceList() {
|
// hkDevice.getDeviceList(function (data) {
|
|
// });
|
// }
|
function getCamerasList() {
|
hkDevice.getCamerasList(function (data) {
|
setCameralist(data.data);
|
});
|
}
|
function PtzMove(direction) {
|
var index = $('#cameralist option:selected').val();
|
var info = hkDevice.cameralist[index];
|
hkDevice.setPtzTurn({
|
deviceSerial: info.deviceSerial,
|
channelNo: info.channelNo,
|
direction: direction,
|
speed: 1,//云台速度：0-慢，1-适中，2-快
|
}, function (data) {
|
|
});
|
|
}
|
function PtzStop() {
|
var index = $('#cameralist option:selected').val();
|
var info = hkDevice.cameralist[index];
|
hkDevice.setPtzStop({
|
deviceSerial: info.deviceSerial,
|
channelNo: info.channelNo,
|
}, function (data) {
|
|
});
|
}
|
function getPlaybackRecord(index,name){
|
//var index = $('#cameralist option:selected').val();
|
var info = hkDevice.cameralist[index];
|
var begin = document.getElementById("begintime").value;
|
var end = document.getElementById("endtime").value;
|
hkDevice.getPlaybackRecord({
|
deviceSerial:info.deviceSerial,
|
channelNo:info.channelNo,
|
startTime:begin,
|
endTime:end,
|
},function(data){
|
//console.log(data);
|
if(data.data.length > 10){
|
var arr = data.data.slice(0,9);
|
for(var i=0;i<arr.length;i++){
|
arr[i].name = name;
|
}
|
|
backRecord = backRecord.concat(arr);
|
console.log(backRecord);
|
}else{
|
for(var i=0;i<data.data.length;i++){
|
data.data[i].name = name;
|
}
|
//console.log(data.data);
|
//backRecord.push(data.data[i]);
|
backRecord = backRecord.concat(data.data);
|
console.log(backRecord);
|
}
|
});
|
}
|
|
function playback() {
|
|
var begin = document.getElementById("begintime").value;
|
var end = document.getElementById("endtime").value;
|
var index = $('#cameralist option:selected').val();
|
var info = hkDevice.cameralist[index];
|
var url = 'ezopen://open.ys7.com/' + info.deviceSerial + '/' + info.channelNo + '.rec?begin='+begin+'&end='+end;
|
|
var videoplay = new EZUIKit.EZUIPlayer({
|
id: 'videoWin',
|
autoplay: true,
|
url: url,
|
accessToken: hkDevice.accessToken,
|
decoderPath: '', //decoderPath：${window.YOUR_PATH};请在生产模式输入ezuikit.js的绝对路径
|
width: '600',
|
height: '400',
|
// handleError: handleError,
|
//handleSuccess: handleSuccess,
|
});
|
}
|
//自动获取accessToken
|
getAccessToken(getCamerasList);
|
//自动获取摄像头列表
|
//getCamerasList();
|
</script>
|
</body>
|
|
</html>
|
