279 lines
12 KiB
HTML
279 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<meta http-equiv="Pragma" content="no-cache" />
|
||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
||
<meta http-equiv="Expires" content="0" />
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<style>
|
||
.h5-fieldset-wrap,.h5-middle{
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="h5-left">
|
||
<div class="h5-play-wrap">
|
||
</div>
|
||
<fieldset class="h5-fieldset-wrap">
|
||
<legend>登录</legend>
|
||
<div class="h5-form-item">
|
||
<label>设备ip</label>
|
||
<input type="text" id="h5_ip" >
|
||
</div>
|
||
<div class="h5-form-item fn-padl10">
|
||
<label>端口</label>
|
||
<input type="text" id="h5_port" value="80">
|
||
</div>
|
||
<div class="h5-form-item">
|
||
<label>用户名</label>
|
||
<input type="text" id="h5_user">
|
||
</div>
|
||
<div class="h5-form-item fn-padl10">
|
||
<label>密码</label>
|
||
<input type="text" id="h5_password">
|
||
</div>
|
||
<div class="h5-form-item" style="margin-left: 228px;">
|
||
<label>窗口分割</label>
|
||
<select class="h5-select" sel-for="onChangeWdnNum">
|
||
<option value="1" selected="">1x1</option>
|
||
<option value="2">2x2</option>
|
||
<option value="3">3x3</option>
|
||
<option value="4">4x4</option>
|
||
</select>
|
||
</div>
|
||
<div class="h5-form-item fn-clear" style="height: 30px;">
|
||
<input type="button" value="登录" class="h5-button" btn-for="onLogin">
|
||
<input type="button" value="注销" class="h5-button fn-marl10" btn-for="onLogout">
|
||
<label class="fn-padl10">登录状态：</label>
|
||
<span style="color: red;" id="h5_loginState">未登录</span>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="h5-fieldset-wrap">
|
||
<legend>预览</legend>
|
||
<div class="h5-form-item">
|
||
<label>通道列表</label>
|
||
</div>
|
||
<ul class="h5-ul" id="h5_channel_list">
|
||
</ul>
|
||
<div class="h5-form-item fn-padl10">
|
||
<label>码流类型</label>
|
||
<select id="h5_stream" sel-for="onChangeStream"></select>
|
||
</div>
|
||
<div class="h5-form-item fn-mart10">
|
||
<label>音量</label>
|
||
<input type="range" id="h5_volume" min="0" max="1" step="0.1" value="0.5">
|
||
<span id="h5_volume_value"></span>
|
||
<span>（范围：0~1）</span>
|
||
</div>
|
||
<div class="h5-form-item fn-clear" style="display: none;">
|
||
<input type="button" class="h5-button" value="开始预览" btn-for="onPreview">
|
||
<input type="button" class="h5-button fn-marl10" value="停止预览" btn-for="onStopPreview">
|
||
</div>
|
||
<div class="h5-form-item fn-clear">
|
||
<input type="button" class="h5-button" value="打开声音" btn-for="onTurnOnSound">
|
||
<input type="button" class="h5-button fn-marl10" value="关闭声音" btn-for="onTurnSoundOff">
|
||
<input type="button" class="h5-button fn-marl10" value="开始对讲" btn-for="onStartTalk">
|
||
<input type="button" class="h5-button fn-marl10" value="停止对讲" btn-for="onStopTalk">
|
||
</div>
|
||
<div class="h5-form-item fn-clear">
|
||
<input type="button" class="h5-button" value="抓图" btn-for="onSnap">
|
||
<input type="button" class="h5-button fn-marl10" value="开始录像" btn-for="onStartRecord">
|
||
<input type="button" class="h5-button fn-marl10" value="停止录像" btn-for="onStopRecord">
|
||
<input type="button" class="h5-button fn-marl10" value="全屏" btn-for="onSetFull">
|
||
</div>
|
||
<div class="h5-form-item fn-clear">
|
||
<input type="button" class="h5-button" style="width: 100px;" value="开启电子放大" btn-for="onStartEnlarge">
|
||
<input type="button" class="h5-button fn-marl10" style="width: 100px;" value="关闭电子放大"
|
||
btn-for="onStopEnlarge">
|
||
</div>
|
||
<div class="h5-form-item fn-clear">
|
||
<input type="button" class="h5-button" style="width: 100px;" value="开启区域放大"
|
||
btn-for="onStartGridEnlarge">
|
||
<input type="button" class="h5-button fn-marl10" style="width: 100px;" value="关闭区域放大"
|
||
btn-for="onCloseGridEnlarge">
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
<div class="h5-middle">
|
||
<fieldset class="h5-fieldset-wrap">
|
||
<legend>云台控制</legend>
|
||
<div class="h5-step-wrap">
|
||
<span>步长(1-8):</span>
|
||
<select id="h5_ptz_step" style="width: 130px;">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5" selected="">5</option>
|
||
<option value="6">6</option>
|
||
<option value="7">7</option>
|
||
<option value="8">8</option>
|
||
</select>
|
||
</div>
|
||
<div class="h5-ptz-wrap" title="云台按钮操作界面">
|
||
<input type="button" class="h5-button" value="左上" onmousedown="onHandlePTZ('LeftUp', false)"
|
||
onmouseup="onHandlePTZ('LeftUp', true)">
|
||
<input type="button" class="h5-button" value="上" onmousedown="onHandlePTZ('Up', false)"
|
||
onmouseup="onHandlePTZ('Up', true)">
|
||
<input type="button" class="h5-button" value="右上" onmousedown="onHandlePTZ('RightUp', false)"
|
||
onmouseup="onHandlePTZ('RightUp', true)">
|
||
<input type="button" class="h5-button" value="左" onmousedown="onHandlePTZ('Left', false)"
|
||
onmouseup="onHandlePTZ('Left', true)">
|
||
<input type="button" class="h5-button" value="自动" onmousedown="onHandlePTZ('Auto', false)"
|
||
onmouseup="onHandlePTZ('Auto', true)">
|
||
<input type="button" class="h5-button" value="右" onmousedown="onHandlePTZ('Right', false)"
|
||
onmouseup="onHandlePTZ('Right', true)">
|
||
<input type="button" class="h5-button" value="左下" onmousedown="onHandlePTZ('LeftDown', false)"
|
||
onmouseup="onHandlePTZ('LeftDown', true)">
|
||
<input type="button" class="h5-button" value="下" onmousedown="onHandlePTZ('Down', false)"
|
||
onmouseup="onHandlePTZ('Down', true)">
|
||
<input type="button" class="h5-button" value="右下" onmousedown="onHandlePTZ('RightDown', false)"
|
||
onmouseup="onHandlePTZ('RightDown', true)">
|
||
</div>
|
||
<div class="h5-zoomfocus-wrap" title="变倍聚焦操作界面">
|
||
<input type="button" class="h5-button" value="变倍-" onmousedown="onHandlePTZ('ZoomWide', false)"
|
||
onmouseup="onHandlePTZ('ZoomWide', true)">
|
||
<input type="button" class="h5-button" value="变倍+" onmousedown="onHandlePTZ('ZoomTele', false)"
|
||
onmouseup="onHandlePTZ('ZoomTele', true)">
|
||
<input type="button" class="h5-button" value="聚焦-" onmousedown="onHandlePTZ('FocusFar', false)"
|
||
onmouseup="onHandlePTZ('FocusFar', true)">
|
||
<input type="button" class="h5-button" value="聚焦+" onmousedown="onHandlePTZ('FocusNear', false)"
|
||
onmouseup="onHandlePTZ('FocusNear', true)">
|
||
<input type="button" class="h5-button" value="光圈-" onmousedown="onHandlePTZ('IrisSmall', false)"
|
||
onmouseup="onHandlePTZ('IrisSmall', true)">
|
||
<input type="button" class="h5-button" value="光圈+" onmousedown="onHandlePTZ('IrisLarge', false)"
|
||
onmouseup="onHandlePTZ('IrisLarge', true)">
|
||
</div>
|
||
<div class="h5-preset-wrap" title="预置点操作界面">
|
||
<div class="h5-item-form" style="margin-bottom: 10px;">
|
||
<label>预置点：</label>
|
||
<input type="text" id="h5_preset">
|
||
</div>
|
||
<input type="button" class="h5-button" value="查看" onclick="onHandlePTZ('GotoPreset', false)">
|
||
<input type="button" class="h5-button" value="增加" onclick="onHandlePTZ('SetPreset', false)">
|
||
<input type="button" class="h5-button" value="删除" onclick="onHandlePTZ('ClearPreset', false)">
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="h5-fieldset-wrap" style="width: 600px;">
|
||
<legend>录像回放</legend>
|
||
<div class="h5-form-item">
|
||
<label>开始时间</label>
|
||
<input type="datetime-local" step="1" style="width: 170px;" id="h5_startTime">
|
||
</div>
|
||
<div class="h5-form-item" style="margin-left: 20px;">
|
||
<label>结束时间</label>
|
||
<input type="datetime-local" step="1" style="width: 170px;" id="h5_endTime">
|
||
</div>
|
||
<div class="h5-form-item">
|
||
<label>通道列表</label>
|
||
<select class="h5-select" id="h5_playback_channel"></select>
|
||
<input type="button" class="h5-button fn-marl10" value="搜索" btn-for="onSearchRecord">
|
||
</div>
|
||
<table class="h5-table" id="h5_table">
|
||
<thead>
|
||
<tr>
|
||
<td style="width: 50px;"><input type="checkbox" btn-for="onCheckAll" id="h5_checkAll"></td>
|
||
<td style="width: 50px;">索引</td>
|
||
<td style="width: 260px;">时间</td>
|
||
<td style="width: 85px;">文件大小(KB)</td>
|
||
<td style="width: 165px;">时间戳</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
</tbody>
|
||
</table>
|
||
<div class="h5-form-item fn-mart10">
|
||
<input type="button" btn-for="onDownload" class="h5-button" value="下载">
|
||
<span style="width: 40px">下载进度：<span id="h5_down_process" style="width: 50px"></span></span>
|
||
<input type="button" btn-for="stopDownLoad" class="h5-button" value="取消下载">
|
||
<a id="h5_first" class="h5-link" style="margin-left: 128px;" href="javascript:;">首页</a>
|
||
<a id="h5_pre" class="h5-link" href="javascript:;">上页</a>
|
||
<span>
|
||
<span id="h5_curPage">2</span>/<span id="h5_totalPage">5</span>
|
||
</span>
|
||
<a id="h5_next" class="h5-link" href="javascript:;">下页</a>
|
||
<a id="h5_last" class="h5-link" href="javascript:;">末页</a>
|
||
<input type="text" style="width: 30px;" id="h5_goNumber">
|
||
<input type="button" value="GO!" id="h5_goPage" style="width: 40px">
|
||
</div>
|
||
<div class="h5-form-item fn-mart10">
|
||
<input type="button" value="开始回放(双击列表行)" disabled class="h5-button" style="width: 145px;"
|
||
btn-for="onPausePlayback">
|
||
<input type="button" value="暂停" class="h5-button" btn-for="onPausePlayback">
|
||
<input type="button" value="继续" class="h5-button" btn-for="onContinuePlayback">
|
||
<input type="button" value="结束回放" class="h5-button" btn-for="onClosePlayback">
|
||
</div>
|
||
<div class="h5-form-item fn-mart10" style="display: none;">
|
||
<span>当前播放秒数</span>
|
||
<span id="h5_curTime">--</span>
|
||
<span>/</span>
|
||
<span id="h5_totalTime">--</span>
|
||
<input type="text" id="h5_goTime" style="width: 50px;">
|
||
<input type="button" class="h5-button" btn-for="onGoTime" value="GO!">
|
||
</div>
|
||
<div class="h5-form-item fn-mart10">
|
||
<label>裁剪起始时间</label>
|
||
<input type="datetime-local" step="1" style="width: 200px;" id="h5_cutStartTime">
|
||
<span> - </span>
|
||
<input type="datetime-local" step="1" style="width: 200px;" id="h5_cutEndTime">
|
||
</div>
|
||
<div class="h5-form-item fn-mart10">
|
||
<input type="button" class="h5-button" style="width:200px" btn-for="onStartCut" value="开始裁剪(先勾选一个录像)" />
|
||
<span>裁剪进度：<span id="h5_cut_process"></span></span>
|
||
</div>
|
||
<div class="h5-form-item fn-mart10">
|
||
<input type="button" btn-for="stopDownLoad" class="h5-button" value="取消裁剪">
|
||
</div>
|
||
</fieldset>
|
||
|
||
</div>
|
||
<script src="module/PlayerControl.js"></script>
|
||
<script src="realTime.js"></script>
|
||
<script>
|
||
// 设置监控设备播放
|
||
function setPlayerA(device,drvData){
|
||
console.log(device,'wwww',drvData);
|
||
// 监控编号赋值
|
||
channel = device.CameraChannel - 1
|
||
if($loginState.innerText==="已登录"){
|
||
onPreview(drvData,false)
|
||
}else{
|
||
onLogin(device.CameraChannel,drvData)
|
||
}
|
||
}
|
||
|
||
// function setPlayer(ip, playerTime, playerEndTime, startTime, endTime) {
|
||
// // 默认登录参数为通道号
|
||
// // onLogin(0,3599,1711990805)
|
||
// onLogin(ip, playerTime, playerEndTime)
|
||
|
||
// //设置开始时间结束时间
|
||
// // $('#h5_startTime').value = '2024-04-02T00:00:00';
|
||
// $('#h5_startTime').value = startTime
|
||
// // $('#h5_endTime').value = '2024-04-02T23:59:59';
|
||
// $('#h5_endTime').value = endTime
|
||
// }
|
||
// window.setPlayerA = setPlayer
|
||
// // 设置播放器
|
||
// // setPlayer(0,3599,1711990805,'2024-04-02T00:00:00','2024-04-02T01:30:00')
|
||
// function playerFun(val, time, playerEndTime) {
|
||
// // 播放第一个视频
|
||
// let player = document.querySelectorAll('#h5_table tbody tr')[val];
|
||
// let dom1 = player.childNodes[1];
|
||
// let value1 = dom1.innerText - 1;
|
||
// let url1 = recordArr[value1].FilePath;
|
||
// onStopPreview();
|
||
// onPreview(true, url1, value1, null, playerEndTime);
|
||
// setTimeout(() => {
|
||
// goTime(time)
|
||
// }, 1500)
|
||
// }
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |