1498 lines
56 KiB
JavaScript
1498 lines
56 KiB
JavaScript
/*
|
||
* 本文件仅供demo使用
|
||
*/
|
||
|
||
//webpack中引用此代码块，格式不要随意改动
|
||
//开发模式需要import,打包给3.0的变成了全局变量，不需要
|
||
|
||
|
||
|
||
function ipcFunc()
|
||
{
|
||
//document.write("<script language = javascript src = '../../../static/fast/module/PlayerControl.js'></script>");
|
||
|
||
let new_element = document.createElement("script");
|
||
new_element.setAttribute("type","text/javascript");
|
||
new_element.setAttribute("src", "./static/fast/module/PlayerControl.js");
|
||
document.body.appendChild(new_element);
|
||
|
||
let $stream,
|
||
$volume,
|
||
$canvas, //canvas播放视频DOM
|
||
$video, //video播放视频DOM
|
||
$canvas_ivs, //canvas绘图DOM
|
||
$video_wrap, //视频外层Wrap
|
||
$videoLoading, //“加载中...”提示
|
||
WndIndex = 0; //宫格窗口Id
|
||
let channel = 0; //当前通道
|
||
let curPage = 1; //视频下载列表的当前页
|
||
let totalPage = 1; //视频下载列表的总页数
|
||
let recordArr = []; //视频文件数组
|
||
let canvasSon = null; //canvas绘图实例
|
||
let playerInstance = []; //预览实例数组
|
||
let recordInstance = []; //录像下载实例数组
|
||
let talkInstance = []; //对讲实例数组
|
||
let ivsInstance = []; //canvas绘图实例数组
|
||
let cutInstance = []; //视频裁剪实例数组
|
||
let isCuting = false; //是否正在进行视频裁剪
|
||
let downList = []; //勾选的视频下载列表
|
||
let downItemIndex = 0; //视频下载索引
|
||
let canvasParam = { //canvas绘图默认传参
|
||
'strokeColor': '#FF0000',
|
||
'title': '',
|
||
'resizeEnable': false,
|
||
'moveEnable': false,
|
||
'closeEnable': true,
|
||
'array': true,
|
||
'showSize': false,
|
||
'selectType': 'inSide',
|
||
'disappear': true,
|
||
'selected': false
|
||
}
|
||
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 = {};
|
||
/**
|
||
* @description 初始化
|
||
*/
|
||
const init = () => {
|
||
let videoStr = '';
|
||
for(var i = 0; i < 16; i++) {
|
||
videoStr += '<div wnd-index="' + i + '" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;border:1px solid rgb(125,125,125)"><canvas id="h5_canvas_' + i + '" style="width:100%;height:100%;"></canvas><p id="h5_loading_' + i + '" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' + i + '" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' + i + '" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="800" height="600"></canvas></div>';
|
||
}
|
||
_doc.querySelector('.h5-play-wrap').innerHTML = videoStr;
|
||
_doc.querySelectorAll('.h5-play-wrap div').forEach((item, index) => {
|
||
item.addEventListener('click', function(event) {
|
||
let _wndIndex = event.target.parentNode.getAttribute('wnd-index') - 0;
|
||
_doc.querySelectorAll('.h5-play-wrap div').forEach(function(item, index) {
|
||
if(index === _wndIndex) {
|
||
item.style.borderColor = 'rgb(255, 204, 0)';
|
||
WndIndex = _wndIndex;
|
||
curDeviceIndex = item.getAttribute('deviceindex') - 0;
|
||
setVideoDom();
|
||
} else {
|
||
item.style.borderColor = 'rgb(125, 125, 125)';
|
||
}
|
||
});
|
||
})
|
||
});
|
||
let deviceDom = _doc.querySelectorAll('.h5-menu-list li');
|
||
deviceObject.loginState = new Array(deviceDom.length).fill(false);
|
||
deviceObject.session = new Array(deviceDom.length).fill(0);
|
||
deviceDom.forEach(function(item, index) {
|
||
console.log("----------------"+index);
|
||
item.addEventListener('click', async () => {
|
||
await onLogout();
|
||
|
||
curDeviceIndex = index;
|
||
onLogin();
|
||
});
|
||
});
|
||
$stream = $('#h5_stream');
|
||
$volume = $('#h5_volume');
|
||
$video_wrap = _doc.querySelector('.h5-play-wrap');
|
||
setVideoDom();
|
||
|
||
let inputArr = _doc.querySelectorAll('input[btn-for]');
|
||
for(let node of inputArr) {
|
||
node.addEventListener('click', bindClickEvent);
|
||
}
|
||
|
||
let selArr = _doc.querySelectorAll('select[sel-for]');
|
||
for(let node of selArr) {
|
||
node.addEventListener('change', bindChangeEvent);
|
||
}
|
||
|
||
$volume.addEventListener('input', function(event) {
|
||
let vol = event.target.value - 0;
|
||
$('#h5_volume_value').innerText = vol;
|
||
});
|
||
$volume.addEventListener('change', function(event) {
|
||
let vol = event.target.value - 0;
|
||
if(playerInstance[WndIndex]) {
|
||
playerInstance[WndIndex].setAudioVolume(vol);
|
||
}
|
||
});
|
||
$('#h5_first').addEventListener('click', function() {
|
||
if(curPage != 1) {
|
||
curPage = 1;
|
||
updateTable();
|
||
}
|
||
});
|
||
$('#h5_pre').addEventListener('click', function() {
|
||
if(curPage > 1) {
|
||
curPage = curPage - 1;
|
||
updateTable();
|
||
}
|
||
});
|
||
$('#h5_next').addEventListener('click', function() {
|
||
if(curPage < totalPage) {
|
||
curPage = curPage + 1;
|
||
updateTable();
|
||
}
|
||
});
|
||
$('#h5_last').addEventListener('click', function() {
|
||
if(curPage != totalPage) {
|
||
curPage = totalPage;
|
||
updateTable();
|
||
}
|
||
});
|
||
$('#h5_goPage').addEventListener('click', function() {
|
||
let val = $('#h5_goNumber').value - 0;
|
||
if(curPage != val) {
|
||
curPage = val;
|
||
updateTable();
|
||
}
|
||
});
|
||
['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'].forEach((item, index) => {
|
||
document.addEventListener(item, fullscreenchange, false);
|
||
});
|
||
onChangeWdnNum();
|
||
}
|
||
/**
|
||
* @description 获取视频通道
|
||
*/
|
||
|
||
/**
|
||
* @description 切换宫格时重新设置当前视频dom
|
||
*/
|
||
const setVideoDom = () => {
|
||
$canvas = $('#h5_canvas_' + WndIndex);
|
||
$video = $('#h5_video_' + WndIndex);
|
||
$canvas_ivs = $('#h5_ivs_' + WndIndex);
|
||
$videoLoading = $('#h5_loading_' + WndIndex);
|
||
let _session = deviceObject.session[curDeviceIndex];
|
||
let _dom = _doc.querySelector('.h5-menu-list li:nth-child('+(curDeviceIndex+1)+')');
|
||
let ip = _dom.getAttribute('data-ip');
|
||
let port = _dom.getAttribute('data-port');
|
||
setIP(ip + ':' + port);
|
||
if(_session !== 0) {
|
||
_setSession(_session);
|
||
}
|
||
}
|
||
/**
|
||
* @description 登录之后调用，获取设备能力，获取通道、码流
|
||
*/
|
||
const afterLogin = () => {
|
||
deviceObject.loginState[curDeviceIndex] = true;
|
||
deviceObject.session[curDeviceIndex] = _getSession();
|
||
$stream.options.length = 0;
|
||
$('#h5_playback_channel').options.length = 0;
|
||
$('#h5_channel').options.length = 0;
|
||
/**
|
||
* RPC.MagicBox.getProductDefinition 获取产品定义
|
||
* @param {string} 'MaxExtraStream' 定义名称
|
||
* @returns {Promise}
|
||
*/
|
||
RPC.MagicBox.getProductDefinition('MaxExtraStream').then(function(params) {
|
||
let maxExtra = params.definition;
|
||
$stream.options.add(new Option('主码流', 0));
|
||
if (maxExtra > 1) {
|
||
for(let i = 1; i <= maxExtra; i++) {
|
||
$stream.options.add(new Option('辅码流' + i, i));
|
||
}
|
||
} else {
|
||
$stream.options.add(new Option('辅码流', 1));
|
||
}
|
||
});
|
||
RPC.DevVideoInput.getCollect().then(function (params) {
|
||
let chnls = params.channels;
|
||
for(let i = 0; i < chnls;i++) {
|
||
$('#h5_playback_channel').options.add(new Option(i+1,i));
|
||
$('#h5_channel').options.add(new Option(i+1,i));
|
||
}
|
||
});
|
||
let curDate = new Date();
|
||
let dateString = curDate.toLocaleDateString();
|
||
let dateSplit = dateString.split('/');
|
||
let month = dateSplit[1] - 0;
|
||
if(month < 10) {
|
||
dateSplit[1] = '0' + month;
|
||
}
|
||
let day = dateSplit[2] - 0;
|
||
if(day < 10) {
|
||
dateSplit[2] = '0' + day;
|
||
}
|
||
let date = dateSplit.join('-');
|
||
$('#h5_startTime').value = date + 'T' + '00:00';
|
||
$('#h5_endTime').value = date + 'T' + '23:59:59';
|
||
}
|
||
const onStartAll = async () => {
|
||
await onLogoutAll()
|
||
curDeviceIndex = 0;
|
||
_doc.querySelector('#h5_ivs_' + curDeviceIndex).click();
|
||
isStartAll = true;
|
||
onLogin();
|
||
}
|
||
/**
|
||
* @description 登录
|
||
*/
|
||
const onLogin = () => {
|
||
let _dom = _doc.querySelector('.h5-menu-list li:nth-child('+(curDeviceIndex+1)+')');
|
||
let ip = _dom.getAttribute('data-ip');
|
||
let port = _dom.getAttribute('data-port');
|
||
let name = _dom.getAttribute('data-user');
|
||
let pswd = _dom.getAttribute('data-pswd');
|
||
let target = ip + ':' + port;
|
||
setIP(target);
|
||
RPC.login(name, pswd, false).then((res) => {
|
||
setCookie('DWebClientSessionID', '', -1);
|
||
setCookie('DhWebClientSessionID', '', -1);
|
||
/**
|
||
* RPC.keepAlive 保活
|
||
*/
|
||
RPC.keepAlive(300, 60000, _getSession(), target, WndIndex);
|
||
afterLogin();
|
||
onRealPreview(ip,port,name,pswd);//登录后拉流
|
||
}).catch((err) => {
|
||
console.log(err);
|
||
loginError(err);
|
||
$videoLoading.style.display = '';
|
||
$videoLoading.innerText = '打开失败！';
|
||
let curWndType = _doc.querySelector('[sel-for=onChangeWdnNum]').value - 0;
|
||
let _newDom = _doc.querySelector('.h5-menu-list li:nth-child(' + (curDeviceIndex + 2) + ')');
|
||
if(curWndType !== 1 && _newDom != null && isStartAll) {
|
||
clickNextWnd();
|
||
_newDom.click();
|
||
};
|
||
});
|
||
}
|
||
const onRealPreview = (ip,port,name,pswd) => {
|
||
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';
|
||
}
|
||
var player = null;
|
||
let curChannel = channel + 1; //无插件通道号从1开始
|
||
let stream = $stream.value - 0;
|
||
let options = {
|
||
wsURL: 'ws://'+ ip +':' + port + '/rtspoverwebsocket',
|
||
rtspURL: 'rtsp://'+ ip +':' + port + '/cam/realmonitor?channel=' + curChannel + '&subtype='+ stream +'&proto=Private3',
|
||
username: name,
|
||
password: pswd,
|
||
lessRateCanvas:true
|
||
};
|
||
player = new PlayerControl(options);
|
||
player.on('MSEResolutionChanged', function (e) {
|
||
console.log(e)
|
||
});
|
||
player.on('PlayStart', function (e) {
|
||
console.log(e);
|
||
$canvas.parentNode.setAttribute('deviceindex', curDeviceIndex);
|
||
$videoLoading.style.display = 'none';
|
||
let curWndType = _doc.querySelector('[sel-for=onChangeWdnNum]').value - 0;
|
||
let _newDom = _doc.querySelector('.h5-menu-list li:nth-child(' + (curDeviceIndex + 2) + ')');
|
||
let hasLoginNum = getLoginState();
|
||
if(curWndType !== 1 && _newDom != null && isStartAll && hasLoginNum < curWndType * curWndType) {
|
||
clickNextWnd();
|
||
_newDom.click();
|
||
} else {
|
||
isStartAll = false;
|
||
}
|
||
});
|
||
player.on('DecodeStart', function (e) {
|
||
console.log(e)
|
||
if(e.decodeMode === 'video'){
|
||
$canvas.style.display = 'none';
|
||
$video.style.display = '';
|
||
}else{
|
||
$video.style.display = 'none';
|
||
$canvas.style.display = '';
|
||
}
|
||
canvasSon = new PluginCanvasES6();
|
||
|
||
canvasSon.init($canvas_ivs, function (data) {
|
||
rebackActivateLocalEnlarging(data);
|
||
});
|
||
canvasSon.addChangeShapeEvent();
|
||
playerInstance[WndIndex] = player;
|
||
ivsInstance[WndIndex] = canvasSon;
|
||
});
|
||
player.on('GetFrameRate', function (e) {
|
||
console.log('GetFrameRate: ' + e)
|
||
});
|
||
player.on('FrameTypeChange', function (e) {
|
||
console.log('FrameTypeChange: ' + e)
|
||
});
|
||
player.on('Error', function (e) {
|
||
//console.log('Error: ' + JSON.stringify(e))
|
||
});
|
||
player.on('WorkerReady',function(){
|
||
player.connect();
|
||
});
|
||
player.init($canvas, $video);
|
||
$videoLoading.style.display = '';
|
||
$videoLoading.innerText = '加载中...';
|
||
}
|
||
const onPlayBack = (url, index) => {
|
||
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';
|
||
}
|
||
let ip = playbackOptions.ip;
|
||
let port = playbackOptions.port;
|
||
let name = playbackOptions.name;
|
||
let pswd = playbackOptions.pswd;
|
||
let player = null;
|
||
let firstTime = 0;
|
||
let options = {
|
||
wsURL: 'ws://'+ ip +':' + port + '/rtspoverwebsocket',
|
||
rtspURL: 'rtsp://'+ ip +':' + port + '/' + url,
|
||
username: name,
|
||
password: pswd,
|
||
lessRateCanvas:true,
|
||
playbackIndex: index
|
||
};
|
||
player = new PlayerControl(options);
|
||
player.on('UpdateCanvas', function (e) {
|
||
let playbackIndex = player.playbackIndex;
|
||
if(firstTime === 0){
|
||
firstTime = e.timestamp;//获取录像文件的第一帧的时间戳
|
||
}
|
||
$('#h5_curTime_'+ playbackIndex).innerText = e.timestamp - firstTime;
|
||
});
|
||
player.on('GetTotalTime', function (e) {
|
||
let playbackIndex = player.playbackIndex;
|
||
$('#h5_totalTime_'+ playbackIndex).innerText = e;
|
||
});
|
||
player.on('MSEResolutionChanged', function (e) {
|
||
console.log(e)
|
||
});
|
||
player.on('PlayStart', function (e) {
|
||
console.log(e);
|
||
$canvas.parentNode.setAttribute('deviceindex', curDeviceIndex);
|
||
$videoLoading.style.display = 'none';
|
||
});
|
||
player.on('DecodeStart', function (e) {
|
||
console.log(e)
|
||
if(e.decodeMode === 'video'){
|
||
$video.style.display = '';
|
||
$canvas.style.display = 'none';
|
||
}else{
|
||
$video.style.display = 'none';
|
||
$canvas.style.display = '';
|
||
}
|
||
canvasSon = new PluginCanvasES6();
|
||
|
||
canvasSon.init($canvas_ivs, function (data) {
|
||
rebackActivateLocalEnlarging(data);
|
||
});
|
||
canvasSon.addChangeShapeEvent();
|
||
playerInstance[WndIndex] = player;
|
||
ivsInstance[WndIndex] = canvasSon;
|
||
});
|
||
player.on('GetFrameRate', function (e) {
|
||
console.log('GetFrameRate: ' + e)
|
||
});
|
||
player.on('FrameTypeChange', function (e) {
|
||
console.log('FrameTypeChange: ' + e)
|
||
});
|
||
player.on('FileOver', function (e) {
|
||
player.close();
|
||
});
|
||
player.on('Error', function (e) {
|
||
//console.log('Error: ' + JSON.stringify(e))
|
||
});
|
||
player.on('WorkerReady',function(){
|
||
player.connect();
|
||
});
|
||
player.init($canvas, $video);
|
||
$videoLoading.style.display = '';
|
||
$videoLoading.innerText = '加载中...';
|
||
}
|
||
const getLoginState = () => {
|
||
let num = 0;
|
||
deviceObject.loginState.map(item => {
|
||
if(item === true) {
|
||
num++;
|
||
}
|
||
});
|
||
return num;
|
||
}
|
||
const clickNextWnd = () => {
|
||
let curWndType = _doc.querySelector('[sel-for=onChangeWdnNum]').value - 0;
|
||
if(curWndType === 2 && WndIndex === 3 || curWndType === 3 && WndIndex === 8 || curWndType === 4 && WndIndex === 15) {
|
||
// _doc.querySelector('#h5_ivs_0').click();
|
||
} else {
|
||
_doc.querySelector('#h5_ivs_' + (WndIndex + 1)).click();
|
||
}
|
||
}
|
||
/**
|
||
* @description 关闭拉流
|
||
*/
|
||
const onStopPreview = () => {
|
||
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';
|
||
}
|
||
if(talkInstance[WndIndex]) {
|
||
talkInstance[WndIndex].talk('off');
|
||
talkInstance[WndIndex] = null;
|
||
}
|
||
if(recordInstance[WndIndex]) {
|
||
recordInstance[WndIndex].startRecod(false);
|
||
recordInstance[WndIndex] = null;
|
||
}
|
||
$videoLoading.style.display = 'none';
|
||
}
|
||
const onStopAllPreview = () => {
|
||
for(let i = 0; i < playerInstance.length; i++) {
|
||
if(playerInstance[i]) {
|
||
playerInstance[i].stop();
|
||
playerInstance[i].close();
|
||
playerInstance[i] = null;
|
||
let canvasDom = $('#h5_canvas_' + i);
|
||
let videoDom = $('#h5_video_' + i);
|
||
let dom = canvasDom;
|
||
if (dom.style.display === 'none') {
|
||
dom = videoDom;
|
||
}
|
||
dom.style.display = 'none';
|
||
}
|
||
}
|
||
talkInstance.forEach(item => {
|
||
if(item) {
|
||
item.talk('off');
|
||
item = null;
|
||
}
|
||
});
|
||
recordInstance.forEach(item => {
|
||
if(item) {
|
||
item.startRecod(false);
|
||
item = null;
|
||
}
|
||
});
|
||
_doc.querySelectorAll('[id^=h5_loading_]').forEach(item => {
|
||
item.style.display = 'none';
|
||
});
|
||
}
|
||
/**
|
||
* @description 登出当前设备
|
||
*/
|
||
const onLogout = async () => {
|
||
let _realDevice = _doc.querySelector('div[wnd-index="'+WndIndex+'"]').getAttribute('deviceindex');
|
||
if(_realDevice === null) {
|
||
return;
|
||
}
|
||
let _session = deviceObject.session[curDeviceIndex];
|
||
if(_session === 0) {
|
||
return;
|
||
}
|
||
_setSession(_session);
|
||
await RPC.Global.logout().then(function() {
|
||
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';
|
||
}
|
||
if(talkInstance[WndIndex]) {
|
||
talkInstance[WndIndex].talk('off');
|
||
talkInstance[WndIndex] = null;
|
||
}
|
||
if(cutInstance[WndIndex]) {
|
||
cutInstance[WndIndex].stop();
|
||
cutInstance[WndIndex].close();
|
||
cutInstance[WndIndex] = null;
|
||
}
|
||
if(recordInstance[WndIndex]) {
|
||
recordInstance[WndIndex].startRecod(false);
|
||
recordInstance[WndIndex] = null;
|
||
}
|
||
$videoLoading.style.display = 'none';
|
||
deviceObject.session[curDeviceIndex] = 0;
|
||
deviceObject.loginState[curDeviceIndex] = false;
|
||
pubsub.publish('_clearTime_', WndIndex);
|
||
});
|
||
}
|
||
/**
|
||
* @description 登出全部设备
|
||
*/
|
||
const onLogoutAll = async () => {
|
||
for(let i = 0; i < playerInstance.length; i++) {
|
||
if(playerInstance[i]) {
|
||
playerInstance[i].stop();
|
||
playerInstance[i].close();
|
||
playerInstance[i] = null;
|
||
let canvasDom = $('#h5_canvas_' + i);
|
||
let videoDom = $('#h5_video_' + i);
|
||
let dom = canvasDom;
|
||
if (dom.style.display === 'none') {
|
||
dom = videoDom;
|
||
}
|
||
dom.style.display = 'none';
|
||
}
|
||
}
|
||
talkInstance.forEach(item => {
|
||
if(item) {
|
||
item.talk('off');
|
||
item = null;
|
||
}
|
||
});
|
||
recordInstance.forEach(item => {
|
||
if(item) {
|
||
item.startRecod(false);
|
||
item = null;
|
||
}
|
||
});
|
||
_doc.querySelectorAll('[id^=h5_loading_]').forEach(item => {
|
||
item.style.display = 'none';
|
||
});
|
||
let len = deviceObject.session.length; //登出已经登录的全部设备
|
||
for (let i = 0; i < len; i++) {
|
||
if(deviceObject.session[i] != 0) {
|
||
let _dom = _doc.querySelector('.h5-menu-list li:nth-child('+(i+1)+')');
|
||
let ip = _dom.getAttribute('data-ip');
|
||
let port = _dom.getAttribute('data-port');
|
||
setIP(ip + ':' + port);
|
||
_setSession(deviceObject.session[i]);
|
||
await RPC.Global.logout().then(() => {
|
||
deviceObject.session[i] = 0;
|
||
deviceObject.loginState[i] = false;
|
||
_doc.querySelector('div[wnd-index="'+WndIndex+'"]').removeAttribute('deviceindex');
|
||
});
|
||
}
|
||
}
|
||
}
|
||
/**
|
||
* @description 切换码流
|
||
*/
|
||
const onChangeStream = () => {
|
||
let _dom = _doc.querySelector('.h5-menu-list li:nth-child('+(curDeviceIndex+1)+')');
|
||
let ip = _dom.getAttribute('data-ip');
|
||
let port = _dom.getAttribute('data-port');
|
||
let name = _dom.getAttribute('data-user');
|
||
let pswd = _dom.getAttribute('data-pswd');
|
||
onRealPreview(ip, port, name, pswd);
|
||
}
|
||
/**
|
||
* @description 切换通道
|
||
*/
|
||
const onChangeChannel = () => {
|
||
channel = $('#h5_channel').value - 0;
|
||
let _dom = _doc.querySelector('.h5-menu-list li:nth-child('+(curDeviceIndex+1)+')');
|
||
let ip = _dom.getAttribute('data-ip');
|
||
let port = _dom.getAttribute('data-port');
|
||
let name = _dom.getAttribute('data-user');
|
||
let pswd = _dom.getAttribute('data-pswd');
|
||
onRealPreview(ip, port, name, pswd);
|
||
}
|
||
/**
|
||
* @description 开启音频
|
||
*/
|
||
const onTurnOnSound = () => {
|
||
let vol = $volume.value - 0;
|
||
if(playerInstance[WndIndex]) {
|
||
playerInstance[WndIndex].setAudioVolume(vol);
|
||
}
|
||
}
|
||
/**
|
||
* @description 关闭音频
|
||
*/
|
||
const onTurnSoundOff = () => {
|
||
if(playerInstance[WndIndex]) {
|
||
playerInstance[WndIndex].setAudioVolume(0);
|
||
}
|
||
}
|
||
/**
|
||
* @description 开启对讲
|
||
*/
|
||
const onStartTalk = () => {
|
||
let _realDevice = _doc.querySelector('div[wnd-index="'+WndIndex+'"]').getAttribute('deviceindex');
|
||
if(_realDevice === null) {
|
||
return;
|
||
}
|
||
let talkPlayer = null;
|
||
let _dom = _doc.querySelector('.h5-menu-list li:nth-child(' + (curDeviceIndex + 1) + ')');
|
||
let curChannel = channel + 1; //无插件通道号从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 rtspURL = 'rtsp://'+ ip +':' + port + '/cam/realmonitor?channel=' + curChannel + '&subtype=5&proto=Private3';
|
||
let optionsAudio = {
|
||
wsURL: 'ws://'+ ip +':' + port + '/rtspoverwebsocket',
|
||
rtspURL: rtspURL,
|
||
username: username,
|
||
password: password,
|
||
isTalkService: true
|
||
}
|
||
talkPlayer = new PlayerControl(optionsAudio);
|
||
talkPlayer.talk('on');
|
||
talkInstance[WndIndex] = talkPlayer;
|
||
}
|
||
/**
|
||
* @description 关闭对讲
|
||
*/
|
||
const onStopTalk = () => {
|
||
if(talkInstance[WndIndex]) {
|
||
talkInstance[WndIndex].talk('off');
|
||
talkInstance[WndIndex] = null;
|
||
}
|
||
}
|
||
/**
|
||
* @description 抓图
|
||
*/
|
||
const onSnap = () => {
|
||
if(playerInstance[WndIndex]) {
|
||
playerInstance[WndIndex].capture('test');
|
||
}
|
||
}
|
||
/**
|
||
* @description 针对直播的，开始本地下载
|
||
*/
|
||
const onStartRecord = () => {
|
||
let _realDevice = _doc.querySelector('div[wnd-index="'+WndIndex+'"]').getAttribute('deviceindex');
|
||
if(_realDevice === null) {
|
||
return;
|
||
}
|
||
let recordPlayer = null;
|
||
let _dom = _doc.querySelector('.h5-menu-list li:nth-child(' + (curDeviceIndex + 1) + ')');
|
||
let curChannel = channel + 1; //无插件通道号从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 stream = $stream.value - 0;
|
||
let rtspURL = 'rtsp://'+ ip +':' + port + '/cam/realmonitor?channel=' + curChannel + '&subtype='+ stream +'&proto=Private3';
|
||
let optionsRecord = {
|
||
wsURL: 'ws://'+ ip +':' + port + '/rtspoverwebsocket',
|
||
rtspURL: rtspURL,
|
||
username: username,
|
||
password: password
|
||
}
|
||
recordPlayer = new PlayerControl(optionsRecord);
|
||
recordPlayer.startRecod(true);
|
||
recordInstance[WndIndex] = recordPlayer;
|
||
$videoLoading.style.display = '';
|
||
$videoLoading.innerText = '录像中！';
|
||
}
|
||
/**
|
||
* @description 针对直播的，停止本地下载
|
||
*/
|
||
const onStopRecord = () => {
|
||
if(recordInstance[WndIndex]) {
|
||
recordInstance[WndIndex].startRecod(false);
|
||
recordInstance[WndIndex] = null;
|
||
$videoLoading.style.display = 'none';
|
||
}
|
||
}
|
||
/**
|
||
* @description 针对回放视频的，视频裁剪
|
||
*/
|
||
const onStartCut = () => {
|
||
let _cutIndex = _doc.querySelector('[btn-for=onStartCut]').getAttribute('cutIndex') - 0;
|
||
let cutPlayer = null;
|
||
let ip = playbackOptions.ip;
|
||
let port = playbackOptions.port;
|
||
let username = playbackOptions.name;
|
||
let password = playbackOptions.pswd;
|
||
let url = recordArr[_cutIndex].FilePath;
|
||
let _rtspURL = 'rtsp://'+ ip +':' + port + '/' + url;
|
||
let cutStartTime = $('#h5_cutStartTime').value;
|
||
let s = new Date(cutStartTime.replace('T', ' ')).getTime();
|
||
let startTime = new Date(recordArr[_cutIndex].StartTime).getTime();
|
||
let range1 = (s - startTime)/1000;
|
||
let optionsRecord = {
|
||
wsURL: 'ws://'+ ip +':' + port + '/rtspoverwebsocket',
|
||
rtspURL: _rtspURL,
|
||
username: username,
|
||
password: password,
|
||
isPrivateProtocol: false, //是否私有协议，默认false
|
||
realm: RPC.realm, //登录返回的设备Realm值
|
||
speed: 16, //倍速拉流，16倍速
|
||
playback: true, //是否是回放
|
||
range: range1 //视频裁剪时间与视频的StartTime时间差值
|
||
}
|
||
cutPlayer = new PlayerControl(optionsRecord);
|
||
cutPlayer.on('WorkerReady',function(){
|
||
cutPlayer.connect();
|
||
});
|
||
cutPlayer.on('FileOver',function(){
|
||
console.log('File Over');
|
||
cutPlayer.startCut(false);
|
||
isCuting = false;
|
||
$('#h5_cut_process').innerText = '100%';
|
||
});
|
||
cutPlayer.on('UpdateTimeStamp', function (e) {
|
||
let cutStartTime1 = $('#h5_cutStartTime').value;
|
||
let cutEndTime1 = $('#h5_cutEndTime').value;
|
||
let s1 = new Date(cutStartTime1.replace('T', ' ')).getTime() / 1000;
|
||
let e1 = new Date(cutEndTime1.replace('T', ' ')).getTime() / 1000;
|
||
let process = parseInt((1 - (e1 - e.timestamp) / (e1 - s1)) * 100);
|
||
// console.log(new Date(e.timestamp * 1000));
|
||
$('#h5_cut_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_cut_process').innerText = '100%';
|
||
}
|
||
});
|
||
cutPlayer.init($canvas, $video);
|
||
cutInstance[WndIndex] = cutPlayer;
|
||
}
|
||
/**
|
||
* @description 开启电子放大
|
||
*/
|
||
const onStartEnlarge = () => {
|
||
if (ivsInstance[WndIndex]) {
|
||
ivsInstance[WndIndex].setRegionNum('rect', 1);
|
||
let param = {...canvasParam};
|
||
ivsInstance[WndIndex].drawStart('rect', param);
|
||
curEnlargeWnd = WndIndex;
|
||
}
|
||
}
|
||
/**
|
||
* @description 开启区域放大
|
||
*/
|
||
const onStartGridEnlarge = () => {
|
||
_doc.querySelectorAll('[wnd-index]').forEach((item, index) => {
|
||
if(index === WndIndex) {
|
||
_doc.querySelector('[wnd-index="' + WndIndex +'"]').style.width = '100%';
|
||
_doc.querySelector('[wnd-index="' + WndIndex +'"]').style.height = '100%';
|
||
_doc.querySelector('#h5_ivs_' + WndIndex).setAttribute('height', 300);
|
||
_doc.querySelector('#h5_ivs_' + WndIndex).setAttribute('width', 500);
|
||
ivsInstance[WndIndex] && ivsInstance[WndIndex].resize();
|
||
} else {
|
||
item.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* @description 关闭区域放大
|
||
*/
|
||
const onCloseGridEnlarge = () => {
|
||
_doc.querySelectorAll('[wnd-index]').forEach((item, index) => {
|
||
item.style.display = '';
|
||
});
|
||
onChangeWdnNum();
|
||
}
|
||
/**
|
||
* @description 关闭电子放大
|
||
*/
|
||
const onStopEnlarge = () => {
|
||
let dom = $canvas;
|
||
if (dom.style.display === 'none') {
|
||
dom = $video;
|
||
}
|
||
dom.style.width = '100%';
|
||
dom.style.height = '100%';
|
||
dom.style.left = 0;
|
||
dom.style.top = 0;
|
||
dom.style.position = 'static';
|
||
}
|
||
/**
|
||
* @description 绘制电子放大后的回调函数
|
||
* @param {object} data 矩形框的坐标信息
|
||
*/
|
||
const rebackActivateLocalEnlarging = data => {
|
||
if(curEnlargeWnd != WndIndex) return;
|
||
let pos = data.data;
|
||
let newData;
|
||
if (pos[0][0] === pos[1][0]) {
|
||
// return false;
|
||
} else {
|
||
newData = {
|
||
left: pos[0][0],
|
||
top: pos[0][1],
|
||
right: pos[1][0],
|
||
bottom: pos[1][1]
|
||
}
|
||
}
|
||
let dom = $canvas;
|
||
if (dom.style.display === 'none') {
|
||
dom = $video;
|
||
}
|
||
// 倒着画
|
||
if (newData.right < newData.left) {
|
||
let tmp = newData.left;
|
||
newData.left = newData.right;
|
||
newData.right = tmp;
|
||
}
|
||
|
||
if (newData.bottom < newData.top) {
|
||
let tmp = newData.top;
|
||
newData.top = newData.bottom;
|
||
newData.bottom = tmp;
|
||
}
|
||
|
||
let scaleW = $video_wrap.childNodes[WndIndex].clientWidth / 8191;
|
||
let scaleH = $video_wrap.childNodes[WndIndex].clientHeight / 8191;
|
||
|
||
let result = zoomArea(newData.left * scaleW, newData.top * scaleH, newData.right * scaleW, newData.bottom * scaleH, $video_wrap.childNodes[WndIndex].clientWidth, $video_wrap.childNodes[WndIndex].clientHeight);
|
||
dom.style.width = result.width + 'px';
|
||
dom.style.height = result.height + 'px';
|
||
dom.style.left = result.left + 'px';
|
||
dom.style.top = result.top + 'px';
|
||
dom.style.position = 'absolute';
|
||
ivsInstance[WndIndex].removeShapeDrawEvent();
|
||
}
|
||
/**
|
||
* @description 设置全屏
|
||
*/
|
||
const onSetFull = () => {
|
||
if (getFull()) {
|
||
exitfullScreen();
|
||
} else {
|
||
setfullScreen();
|
||
}
|
||
}
|
||
/**
|
||
* @description 切换窗口分割
|
||
*/
|
||
const onChangeWdnNum = () => {
|
||
let val = _doc.querySelector('[sel-for=onChangeWdnNum]').value;
|
||
let ivsDom = _doc.querySelectorAll('[id^=h5_ivs_]');
|
||
let divDom = _doc.querySelectorAll('.h5-play-wrap div');
|
||
if(val === '1') {
|
||
divDom.forEach(item => {
|
||
item.style.width = '100%';
|
||
item.style.height = '100%';
|
||
item.style.borderColor = '#000';
|
||
});
|
||
} else if(val === '2' ) {
|
||
divDom.forEach((item, index) => {
|
||
item.style.width = 'calc(50% - 2px)';
|
||
item.style.height = 'calc(50% - 2px)';
|
||
});
|
||
} else if(val === '3') {
|
||
divDom.forEach((item,index) => {
|
||
item.style.height = 'calc(33.333% - 2px)';
|
||
item.style.width = 'calc(33.333% - 2px)';
|
||
});
|
||
} else if(val === '4') {
|
||
divDom.forEach((item, index) => {
|
||
item.style.width = 'calc(25% - 2px)';
|
||
item.style.height = 'calc(25% - 2px)';
|
||
});
|
||
}
|
||
ivsDom.forEach(item => {
|
||
item.setAttribute('width', `${item.parentNode.clientWidth}`);
|
||
item.setAttribute('height', `${item.parentNode.clientHeight}`);
|
||
});
|
||
ivsInstance.forEach(item => {
|
||
item && item.resize();
|
||
});
|
||
_doc.querySelector('#h5_ivs_0').click();
|
||
}
|
||
/**
|
||
* @description 自定义选择器
|
||
* @param {string} str dom元素
|
||
*/
|
||
function $(str) {
|
||
if(str.charAt(0) == '#') {
|
||
return document.getElementById(str.substring(1));
|
||
} else if(str.charAt(0) == '.') {
|
||
return _doc.getElementsByClassName(str.substring(1));
|
||
} else {
|
||
return _doc.getElementsByTagName(str);
|
||
}
|
||
}
|
||
/**
|
||
* @description 设置样式
|
||
* @param {object} obj dom元素
|
||
* @param {*} json css样式
|
||
*/
|
||
function setStyle (obj, json){
|
||
for(let i in json) {
|
||
obj.style[i] = json[i];
|
||
}
|
||
}
|
||
/**
|
||
* @description 绑定click事件
|
||
* @param {object} event event对象
|
||
*/
|
||
function bindClickEvent(event) {
|
||
let $el = event.target,
|
||
method = $el.getAttribute('btn-for'),
|
||
disabled = $el.getAttribute('disabled');
|
||
if(!disabled) {
|
||
eval(method + "()");
|
||
}
|
||
}
|
||
/**
|
||
* @description 绑定change事件
|
||
* @param {object} event event对象
|
||
*/
|
||
function bindChangeEvent(event) {
|
||
let $el = event.target,
|
||
method = $el.getAttribute('sel-for'),
|
||
disabled = $el.getAttribute('disabled');
|
||
if(!disabled) {
|
||
eval(method + "()");
|
||
}
|
||
}
|
||
/**
|
||
* @description 转换数据坐标
|
||
* @param {*} x1 左上角x坐标
|
||
* @param {*} y1 左上角y坐标
|
||
* @param {*} x2 右下角x坐标
|
||
* @param {*} y2 右下角y坐标
|
||
* @param {*} width 宫格宽
|
||
* @param {*} height 宫格高
|
||
*/
|
||
function zoomArea (x1, y1, x2, y2, width, height) {
|
||
// 小框区域的数据
|
||
let rectArea = {
|
||
width: x2 - x1,
|
||
height: y2 - y1,
|
||
centerX: (x1 + x2) / 2, // 圆心坐标
|
||
centerY: (y1 + y2) / 2
|
||
};
|
||
// 放大比例,控件放大倍数上限是20
|
||
let scale = Math.min(width / rectArea.width, height / rectArea.height, 20);
|
||
|
||
// 原始窗口信息
|
||
let sourceWin = {
|
||
width: width,
|
||
height: height,
|
||
centerX: width / 2,
|
||
centerY: height / 2
|
||
};
|
||
|
||
// 放大后的窗口区域
|
||
let bigWinArea = {
|
||
width: width * scale,
|
||
height: height * scale,
|
||
left: sourceWin.centerX - rectArea.centerX * scale,
|
||
top: sourceWin.centerY - rectArea.centerY * scale
|
||
};
|
||
|
||
// 数据矫正
|
||
if (bigWinArea.left > 0) {
|
||
bigWinArea.left = 0;
|
||
}
|
||
if (bigWinArea.left < sourceWin.width - bigWinArea.width) {
|
||
bigWinArea.left = sourceWin.width - bigWinArea.width;
|
||
}
|
||
if (bigWinArea.top > 0) {
|
||
bigWinArea.top = 0;
|
||
}
|
||
if (bigWinArea.top < sourceWin.height - bigWinArea.height) {
|
||
bigWinArea.top = sourceWin.height - bigWinArea.height;
|
||
}
|
||
return bigWinArea;
|
||
}
|
||
/**
|
||
* @description 获取全屏状态
|
||
*/
|
||
function getFull() {
|
||
return window.top.document.mozFullScreen || window.top.document.webkitIsFullScreen || window.top.document.msFullscreenElement;
|
||
}
|
||
/**
|
||
* @description 全屏状态改变的回调事件
|
||
*/
|
||
function fullscreenchange() {
|
||
if (getFull()) {
|
||
return;
|
||
} else {
|
||
exitfullScreen();
|
||
}
|
||
}
|
||
/**
|
||
* @description 设置全屏
|
||
*/
|
||
function setfullScreen() {
|
||
let docElm = window.top.document.documentElement;
|
||
if (docElm.requestFullScreen) {
|
||
docElm.requestFullScreen();
|
||
} else if (docElm.mozRequestFullScreen) {
|
||
docElm.mozRequestFullScreen();
|
||
} else if (docElm.webkitRequestFullScreen) {
|
||
docElm.webkitRequestFullScreen();
|
||
} else if (docElm.msRequestFullscreen) {
|
||
docElm.msRequestFullscreen();
|
||
}
|
||
handleFullscreen(true);
|
||
}
|
||
/**
|
||
* @description 退出全屏
|
||
*/
|
||
function exitfullScreen() {
|
||
let docElm = window.top.document.documentElement;
|
||
if (docElm.exitFullscreen) {
|
||
docElm.exitFullscreen();
|
||
} else if (docElm.mozCancelFullScreen) {
|
||
docElm.mozCancelFullScreen();
|
||
} else if (docElm.webkitCancelFullScreen) {
|
||
docElm.webkitCancelFullScreen();
|
||
} else if (docElm.msExitFullscreen) {
|
||
docElm.msExitFullscreen();
|
||
}
|
||
handleFullscreen(false);
|
||
}
|
||
/**
|
||
* @description 处理全屏开关时的窗口大小
|
||
* @param {boolean} bool 是否要全屏
|
||
*/
|
||
function handleFullscreen(bool) {
|
||
if (bool) {
|
||
let wrap = {
|
||
position: 'absolute',
|
||
left: 0,
|
||
top: 0,
|
||
width: window.screen.width + 'px',
|
||
height: window.screen.height + 'px',
|
||
overflow: 'visible'
|
||
}
|
||
setStyle($video_wrap, wrap);
|
||
} else {
|
||
let wrap = {
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
width:'500px',
|
||
height: '300px',
|
||
}
|
||
setStyle($video_wrap, wrap);
|
||
}
|
||
}
|
||
/**
|
||
* @description 查询录像
|
||
*/
|
||
const onSearchRecord = async () => {
|
||
let allRecords = [];
|
||
let recordNums = 0;
|
||
let playChannel = $('#h5_playback_channel').value - 0;
|
||
let _dom = _doc.querySelector('.h5-menu-list li:nth-child('+(curDeviceIndex+1)+')');
|
||
let _ip = _dom.getAttribute('data-ip');
|
||
let _port = _dom.getAttribute('data-port');
|
||
let _name = _dom.getAttribute('data-user');
|
||
let _pswd = _dom.getAttribute('data-pswd');
|
||
playbackOptions = {
|
||
ip: _ip,
|
||
port: _port,
|
||
name: _name,
|
||
pswd: _pswd
|
||
}
|
||
const getMediaFile = (params) => {
|
||
return new Promise((resolve, reject) => {
|
||
/**
|
||
* RPC.MediaFileFind.instance 创建媒体文件查找实例
|
||
* @returns {Promise}
|
||
*/
|
||
RPC.MediaFileFind.instance().then(json => {
|
||
let queryId = json.result;
|
||
/**
|
||
* RPC.MediaFileFind.findFile 设置查找条件，并判断是否存在文件
|
||
* @param {number} queryId 实例id
|
||
* @param {object} params condition参数
|
||
* @returns {Promise}
|
||
*/
|
||
RPC.MediaFileFind.findFile(queryId, params).then(() => {
|
||
findNextFile(queryId).then(() => {
|
||
resolve(true);
|
||
}).catch((err) => {
|
||
reject(err);
|
||
});
|
||
}).catch((err) => {
|
||
reject(err);
|
||
});
|
||
}).catch((err) => {
|
||
reject(err);
|
||
});
|
||
});
|
||
}
|
||
const findNextFile = (queryId) => {
|
||
return new Promise((resolve, reject) => {
|
||
/**
|
||
* RPC.MediaFileFind.findNextFile 在指定条件基础上查询文件信息
|
||
* @param {number} queryId 实例
|
||
* @param {object} 需要查找的数目
|
||
* @returns {Promise}
|
||
*/
|
||
RPC.MediaFileFind.findNextFile(queryId, { 'count': 100 }).then(data => {
|
||
if (Number.isInteger(data.found)) {
|
||
recordNums = recordNums + data.found;
|
||
allRecords = allRecords.concat([...data.infos]);
|
||
if (data.found === 100) {
|
||
findNextFile(queryId).then(() => {
|
||
resolve(true);
|
||
}).catch((err) => {
|
||
reject(err);
|
||
});
|
||
} else {
|
||
recordArr = [...allRecords];
|
||
updateInfos(recordArr.slice(0, lINENUMBER));
|
||
updatePages();
|
||
stopFind(queryId);
|
||
resolve(true);
|
||
}
|
||
} else {
|
||
stopFind(queryId);
|
||
resolve(true);
|
||
}
|
||
}).catch((err) => {
|
||
reject(err);
|
||
stopFind(queryId);
|
||
});
|
||
|
||
})
|
||
}
|
||
const stopFind = object => {
|
||
return new Promise((resolve, reject) => {
|
||
/**
|
||
* PC.MediaFileFind.close 结束查询
|
||
* @param {number} object 媒体文件查找实例ID
|
||
* @returns {Promise}
|
||
*/
|
||
RPC.MediaFileFind.close(object).then(() => {
|
||
/**
|
||
* PC.MediaFileFind.destroy 销毁媒体文件查找实例
|
||
* @param {number} object 媒体文件查找实例ID
|
||
*/
|
||
RPC.MediaFileFind.destroy(object);
|
||
resolve(true);
|
||
}).catch(() => {
|
||
reject();
|
||
}).finally(() => {
|
||
});
|
||
})
|
||
}
|
||
const updateInfos = (infos) => {
|
||
let table = _doc.querySelector('#h5_table tbody');
|
||
table.innerHTML = '';
|
||
for(let i = 0; i < infos.length; i++) {
|
||
let time = infos[i].StartTime + ' - ' + infos[i].EndTime; //<input type="button" class="h5-button" btn-for="onGoTime" value="GO!">
|
||
let size = Math.round(infos[i].Length / 1024);
|
||
let newRow = table.insertRow(-1);
|
||
newRow.innerHTML = `<td><input type="checkbox" id="h5_check_${i}"></td><td>${i+1}</td><td>${time}</td><td>${size}</td><td><span id="h5_curTime_${i}">--</span><span>/</span><span id="h5_totalTime_${i}">--</span><input type="text" id="h5_goTime_${i}" style="width: 50px;"><input type="button" class="h5-button" id="h5_button_go_${i}" value="GO!"></td>`;
|
||
}
|
||
_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 = curPage;
|
||
$('#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('回放功能需要确保SD卡经过设备认证');
|
||
} else {
|
||
let table = _doc.querySelector('#h5_table tbody');
|
||
table.innerHTML = '';
|
||
$('#h5_curPage').innerText = 1;
|
||
$('#h5_totalPage').innerText = 1;
|
||
alert('无数据');
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* @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
|
||
}
|
||
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 = `<td><input type="checkbox" id="h5_check_${i}"></td><td>${index + i+1}</td><td>${time}</td><td>${size}</td><td><span id="h5_curTime_${i}">--</span><span>/</span><span id="h5_totalTime_${i}">--</span><input type="text" id="h5_goTime_${i}" style="width: 50px;"><input type="button" class="h5-button" id="h5_button_go_${i}" value="GO!"></td>`;
|
||
}
|
||
_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;
|
||
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);
|
||
});
|
||
});
|
||
}
|
||
/**
|
||
* @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();
|
||
}
|
||
|
||
export { //很关键
|
||
ipcFunc
|
||
}
|