/*
* 本文件仅供demo使用
*/
let curLang = 'SimpChinese';
//webpack中引用此代码块，格式不要随意改动
//开发模式需要import,打包给3.0的变成了全局变量，不需要
document.querySelector('#device_ipc_tab').addEventListener('click', (event) => {
event.target.style.color = 'blue';
document.querySelector('#device_ipc_content').style.display = '';
ipcFunc();
});
document.querySelector('#onChangeLanguage').addEventListener('change', (event) => {
let val = event.target.value;
curLang = val;
languageTrans();
});
const ipcFunc = () => {
let $stream,
$volume,
$canvas, //canvas播放视频DOM
$video, //video播放视频DOM
$ivsCanvas,
$detectCanvas,
$drawCanvas, //canvas绘图DOM
$video_wrap, //视频外层Wrap
$videoLoading, //“加载中...”提示
WndIndex = 0; //宫格窗口Id
let channel = 0; //当前通道
let curPage = 1; //视频下载列表的当前页
let totalPage = 1; //视频下载列表的总页数
let recordArr = []; //视频文件数组
let canvasInstance = null; //canvas绘图实例
let playerInstance = []; //预览实例数组
let speedX = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
let recordInstance = []; //录像下载实例数组
let talkInstance = []; //对讲实例数组
let drawInstance = []; //canvas绘图实例数组
let cutInstance = []; //视频裁剪实例数组
let ivsInstance = []; //智能帧实例数组
let positionInstance = []; //快读定位实例数组
let isCuting = false; //是否正在进行视频裁剪
let downList = []; //勾选的视频下载列表
let downItemIndex = 0; //视频下载索引
let canvasParam = { //canvas绘图默认传参
'strokeColor': '#FFFF00',
'title': '',
'resizeEnable': false,
'moveEnable': false,
'closeEnable': true,
'array': true,
'showSize': false,
'selectType': 'inSide',
'disappear': true,
'selected': true
}
let curDeviceIndex = 0;
const lINENUMBER = 16; //回放列表每页显示录像条数
let deviceObject = {
loginState: [],
session: []
}
let isStartAll = false;
let curEnlargeWnd = 0;
let _doc = document.getElementById('device_ipc_content');
let playbackOptions = {};
let ChannelPTZCaps = [];
/**
* @description 初始化
*/
const init = () => {
let videoStr = '';
for(let i = 0; i < 16; i++) {
videoStr += '' +
'
' +
'
加载中...
' +
'
' +
'
' + //智能帧的canvas
'
' + //智能区域的canvas
'
' + //绘制的canvas
'
| ${i+1} | ${time} | ${size} | --/-- | `;
}
_doc.querySelectorAll('[id^=h5_button_go_]').forEach(item => {
item.addEventListener('click', function(event) {
let id = item.getAttribute('id').split('_')[3] - 0;
onGoTime(id);
});
});
_doc.querySelectorAll('[id^=h5_check_]').forEach(function(item) {
item.addEventListener('click', function(event) {
event.stopPropagation();
if(event.target.checked) {
//渲染裁剪时间
let _index = event.target.getAttribute('id').split('_')[2] - 0;
let startTime = recordArr[_index].StartTime.split(' ').join('T');
let endTime = recordArr[_index].EndTime.split(' ').join('T');
if(startTime.split(':')[2] === '00') {
startTime = startTime.substr(0, startTime.length - 3);
}
if(endTime.split(':')[2] === '00') {
endTime = endTime.substr(0, endTime.length - 3);
}
$('#h5_cutStartTime').value = startTime;
$('#h5_cutEndTime').value = endTime;
_doc.querySelector('[btn-for=onStartCut]').setAttribute('cutIndex', _index);
}
});
});
_doc.querySelectorAll('#h5_table tbody tr').forEach(function(item) {
item.addEventListener('dblclick', function(event) {
event.stopPropagation();
if(event.target.nodeName === 'TD') {
let dom = event.target.parentNode.childNodes[1];
let value = dom.innerText - 1;
let url = recordArr[value].FilePath;
onPlayBack(url, value);
}
});
});
}
const updatePages = () => {
totalPage = Math.ceil(recordNums/lINENUMBER);
$('#h5_curPage').innerText = 1;
$('#h5_totalPage').innerText = totalPage;
}
let tmpDir = [];
try {
/**
* RPC.getDeviceAllInfo 获取存储信息
* @param {string} 'getDeviceAllInfo' 方法名
* @return {Promise}
*/
tmpDir = await RPC.getDeviceAllInfo('getDeviceAllInfo');
} catch(e) {
console.log(e);
}
let dirs = null;
if (tmpDir.info && tmpDir.info.length > 1) {
dirs = 'All';
}else {
dirs = tmpDir.info && tmpDir.info[0] && tmpDir.info[0].Detail && tmpDir.info[0].Detail[0] && tmpDir.info[0].Detail[0].Path || '/mnt/sd';
}
let startTime = $('#h5_startTime').value.replace('T', ' ');
let endTime = $('#h5_endTime').value.replace('T', ' ');
if(startTime.split(' ')[1].split(':').length < 3) {
startTime = startTime + ':00';
}
if(endTime.split(' ')[1].split(':').length < 3) {
endTime = endTime + ':00';
}
let params = {
condition: {
Channel: playChannel,
Dirs: [dirs],
StartTime: startTime,
EndTime: endTime,
Flags: null,
Events: ['*'],
Types: ['dav']
}
};
getMediaFile(params).catch((err) => {
if (err && err.error && err.error.code === 285409409) {
alert(tl('com.SDEncryptPlaybackTip')); //回放功能需要确保SD卡经过设备认证
} else {
let table = _doc.querySelector('#h5_table tbody');
table.innerHTML = '';
$('#h5_curPage').innerText = 1;
$('#h5_totalPage').innerText = 1;
alert(tl('com.NoData')); //无数据
}
});
}
/**
* @description 勾选当前页的全部录像
*/
const onCheckAll = () => {
let dom = $('#h5_checkAll');
let ele = _doc.querySelectorAll('[id^=h5_check_]');
let domChecked = dom.checked;
ele.forEach((item, index) => {
item.checked = domChecked;
})
}
/**
* @description 下载录像
*/
const onDownload = async () => {
let ele = _doc.querySelectorAll('[id^=h5_check_]');
downList = [];
ele.forEach((item, index) => {
let _id = item.getAttribute('id').split('_')[2] - 0;
if(item.checked) {
recordArr[(curPage - 1) * lINENUMBER + _id].selfCheckIndex = _id;
downList.push(recordArr[(curPage - 1) * lINENUMBER + _id]);
}
});
downItemIndex = 0;
onStartDownload(downList[downItemIndex]);
}
/**
* @description 开始下载录像
* @param {object} item 录像信息
*/
const onStartDownload = (item) => {
let _cutIndex;
if(item) {
_cutIndex = item.selfCheckIndex;
}
let cutPlayer = null;
let _dom = _doc.querySelector('.h5-menu-list li:nth-child(' + (curDeviceIndex + 1) + ')');
let ip = _dom.getAttribute('data-ip');
let port = Number(_dom.getAttribute('data-port'));
let username = _dom.getAttribute('data-user');
let password = _dom.getAttribute('data-pswd');
let url = recordArr[_cutIndex].FilePath;
let _rtspURL = 'rtsp://'+ ip +':' + port + '/' + url;
let optionsRecord = {
wsURL: 'ws://'+ ip +':' + port + '/rtspoverwebsocket',
rtspURL: _rtspURL,
username: username,
password: password,
isPrivateProtocol: false,
realm: RPC.realm,
speed: 16,
playback: true,
isDownLoad:true
}
cutPlayer = new PlayerControl(optionsRecord);
cutPlayer.on('WorkerReady',function(){
cutPlayer.connect();
});
cutPlayer.on('FileOver',function(){
cutPlayer.startCut(false);
isCuting = false;
$('#h5_down_process').innerText = '100%';
downItemIndex++;
if(downList[downItemIndex]) {
onStartDownload(downList[downItemIndex]);
}
});
cutPlayer.on('UpdateTimeStamp', function (e) {
let s1 = new Date(item.StartTime).getTime()/1000;
let e1 = new Date(item.EndTime).getTime()/1000;
let process = parseInt((1 - (e1 - e.timestamp) / (e1 - s1)) * 100);
$('#h5_down_process').innerText = (process > 100 ? 100 : process) + '%';
if((e.timestamp >= s1) && !isCuting) {
cutPlayer.startCut(true);
isCuting = true;
}
if((e.timestamp >= e1 ) && isCuting) {
cutPlayer.startCut(false);
isCuting = false;
$('#h5_down_process').innerText = '100%';
downItemIndex++;
if(downList[downItemIndex]) {
onStartDownload(downList[downItemIndex]);
}
}
});
cutPlayer.init($canvas, $video);
cutInstance[WndIndex] = cutPlayer;
}
/**
* @description 更新录像列表当前页
*/
const updateTable = () => {
$('#h5_checkAll').checked = false;
$('#h5_curPage').innerText = curPage;
let table = _doc.querySelector('#h5_table tbody');
table.innerHTML = '';
let index = (curPage - 1 ) * lINENUMBER;
let infos = recordArr.slice(index, index + lINENUMBER);
for(let i = 0; i < infos.length; i++) {
let time = infos[i].StartTime + '-' + infos[i].EndTime;
let size = Math.round(infos[i].Length / 1024) + '(KB)';
let newRow = table.insertRow(-1);
newRow.innerHTML = ` | ${index + i+1} | ${time} | ${size} | --/-- | `;
}
_doc.querySelectorAll('[id^=h5_check_]').forEach(function(item) {
item.addEventListener('click', function(event) {
event.stopPropagation();
if(event.target.checked) {
//渲染裁剪时间
let pageToIndex = (curPage - 1 ) * lINENUMBER;
let _index = event.target.getAttribute('id').split('_')[2] - 0 + pageToIndex;
let startTime = recordArr[_index].StartTime;
let endTime = recordArr[_index].EndTime;
$('#h5_cutStartTime').value = startTime;
$('#h5_cutEndTime').value = endTime;
_doc.querySelector('[btn-for=onStartCut]').setAttribute('cutIndex', _index);
}
});
});
_doc.querySelectorAll('#h5_table tbody tr').forEach(function(item) {
item.addEventListener('dblclick', function(event) {
event.stopPropagation();
let dom = event.target.parentNode.childNodes[1];
let value = dom.innerText - 1;
let url = recordArr[value].FilePath;
onPlayBack(url, value);
});
});
_doc.querySelectorAll('[id^=h5_button_go_]').forEach(item => {
item.addEventListener('click', function(event) {
event.stopPropagation();
let id = item.getAttribute('id').split('_')[3] - 0;
onGoTime(id);
});
});
}
/**
* @description 暂停回放
*/
const onPausePlayback = () => {
if(playerInstance[WndIndex]) {
playerInstance[WndIndex].pause();
}
}
/**
* @description 继续回放
*/
const onContinuePlayback = () => {
if(playerInstance[WndIndex]) {
playerInstance[WndIndex].play();
}
}
/**
* @description 停止回放
*/
const onClosePlayback = () => {
if(playerInstance[WndIndex]) {
playerInstance[WndIndex].stop();
playerInstance[WndIndex].close();
playerInstance[WndIndex] = null;
let dom = $canvas;
if (dom.style.display === 'none') {
dom = $video;
}
dom.style.display = 'none';
}
}
/**
* @description 录像跳到指定时间
* @param 要跳转时间的录像的id
*/
const onGoTime = (id) => {
let curTime = $('#h5_goTime_'+id).value - 0;
if(playerInstance[WndIndex]) {
playerInstance[WndIndex].playByTime(curTime);
}
}
/**
* @description ptz云台事件
* @param {string} type 云台事件类型
* @param {boolean} isStop 是否停止相应事件
*/
window.onHandlePTZ = function(type, isStop) {
let _realDevice = _doc.querySelector('div[wnd-index="'+WndIndex+'"]').getAttribute('deviceindex');
if(_realDevice === null) {
return;
}
let _session = deviceObject.session[curDeviceIndex];
_setSession(_session);
let stepVal = $('#h5_ptz_step').value - 0;
let arg2 = 0;
let arg2Arr = ['LeftUp', 'RightUp', 'LeftDown', 'RightDown'];
let presetArr = ['GotoPreset','SetPreset', 'ClearPreset'];
let presetNum = $('#h5_preset').value - 0;
if(arg2Arr.indexOf(type) > -1) {
arg2 = stepVal;
}
if(!isStop) {
if(presetArr.indexOf(type) > -1) {
/**
* RPC.PTZManager 云台相关
* @param {string} 方法
* @param {number} channel 通道
* @param {object} 参数集合
*/
RPC.PTZManager('start', channel, { 'code': type, 'arg1': presetNum, 'arg2': 0, 'arg3': 0 });
} else {
RPC.PTZManager('start', channel, { 'code': type, 'arg1': stepVal, 'arg2': arg2, 'arg3': 0 });
}
} else {
RPC.PTZManager('stop', channel, { 'code': type, 'arg1': stepVal, 'arg2': arg2, 'arg3': 0 });
}
};
//进入页面自动初始化
init();
}
document.querySelector('#device_ipc_tab').click();
/*
* 加载翻译
*/
const languageTrans = () => {
fetch('./lang/' + curLang + '.txt')
.then(res => {
return res.json()
}).then(text => {
setLanguage(JSON.parse(JSON.stringify(text)));
translation();
});
}
languageTrans();
window.onload = function() {
if (!['http:', 'https:'].includes(window.location.protocol)) {
confirm('请参考readme.txt，在https server中打开此页面');
try {
window.close();
} catch (e) {
alert('请手动关闭此标签页');
}
}
};