| | |
| | | <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/> |
| | | <script th:src="@{/js/bootstrap.js}"></script> |
| | | <style> |
| | | .top-buffer { margin-top:10px; } |
| | | .top-buffer { |
| | | margin-top: 10px; |
| | | } |
| | | </style> |
| | | <body> |
| | | <div class="container"> |
| | | <div class="row "> |
| | | <div class="dropdown"> |
| | | 相机id: |
| | | <select id="select"> |
| | | </select> |
| | | </div> |
| | | <div class="row "> |
| | | <div class="dropdown"> |
| | | 相机id:<select id="select"> |
| | | </select> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="col-md-1 col-md-offset-1"> |
| | | <button id="up" type="button" class="btn btn-primary">上</button> |
| | | </div> |
| | | <div class="col-md-4 col-md-offset-3"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="controlZoomIn" type="button" class="btn btn-primary">调焦-</button> |
| | | <button id="controlZoomOut" type="button" class="btn btn-primary">调焦+</button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="col-md-1 col-md-offset-1"> |
| | | <button id="up" type="button" class="btn btn-primary">上</button> |
| | | </div> |
| | | <div class="row "> |
| | | <div class="col-md-1"> |
| | | <button id="left" type="button" class="btn btn-primary">左</button> |
| | | </div> |
| | | <div class="col-md-1 col-md-offset-1"> |
| | | <button id="right" type="button" class="btn btn-primary">右</button> |
| | | </div> |
| | | <div class="col-md-4 col-md-offset-2"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="controlFocusNear" type="button" class="btn btn-primary">聚焦-</button> |
| | | <button id="controlFocusFar" type="button" class="btn btn-primary">聚焦+</button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="row "> |
| | | <div class="col-md-1 col-md-offset-1"> |
| | | <button id="down" type="button" class="btn btn-primary">下</button> |
| | | </div> |
| | | <div class="col-md-4 col-md-offset-3"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="controlIrisOpen" type="button" class="btn btn-primary">光圈-</button> |
| | | <button id="controlIrisClose" type="button" class="btn btn-primary">光圈+</button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="input-group"> |
| | | <span class="input-group-addon">P值:</span> |
| | | <input id="p" class="form-control" placeholder="请输入P值"/> |
| | | </div> |
| | | <div class="input-group"> |
| | | <span class="input-group-addon">T值:</span> |
| | | <input id="t" class="form-control" placeholder="请输入T值"/> |
| | | </div> |
| | | <div class="input-group"> |
| | | <span class="input-group-addon">Z值:</span> |
| | | <input id="z" class="form-control" placeholder="请输入Z值"/> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="col-md-4 col-md-offset-3"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="getPTZ" type="button" class="btn btn-default">获取ptz</button> |
| | | <button id="setPTZ" type="button" class="btn btn-default">设置ptz</button> |
| | | <button id="setPreset" type="button" class="btn btn-default">设预置点</button> |
| | | <button id="gotoPreset" type="button" class="btn btn-default">调预置点</button> |
| | | <button id="getZeroPTZ" type="button" class="btn btn-default">调用零方位角</button> |
| | | <button id="setZeroPTZ" type="button" class="btn btn-default">设置零方位角</button> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="FocusMode" type="button" class="btn btn-default">手动聚焦</button> |
| | | <div id="focusDiv" class="input-group"> |
| | | <span class="input-group-addon">聚焦值:</span> |
| | | <input id="focus" class="form-control" placeholder="聚焦值"/> |
| | | </div> |
| | | <button id="getFocusPos" type="button" class="btn btn-default">获取聚焦值</button> |
| | | <button id="setFocusPos" type="button" class="btn btn-default">设置聚焦值</button> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="WiperPwron" type="button" class="btn btn-default">开启雨刷</button> |
| | | <button id="Defogcfg" type="button" class="btn btn-default">开启透雾</button> |
| | | <button id="Infrarecfg" type="button" class="btn btn-default">开启红外</button> |
| | | <button id="HeateRpwron" type="button" class="btn btn-default">开启云台加热</button> |
| | | <button id="CameraDeicing" type="button" class="btn btn-default">开启镜头加热</button> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="voice" type="button" class="btn btn-default">开始语音对讲</button> |
| | | <button id="record" type="button" class="btn btn-default">开始录像</button> |
| | | <button id="realCutPic" type="button" class="btn btn-default">实时抓图</button> |
| | | <button id="saveCutPic" type="button" class="btn btn-default">存储抓图</button> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="col-md-6"> |
| | | <img class="thumbnail" id="imgContainer" style="width: 500px; height: 400px;padding: 5px 5px;"/> |
| | | </div> |
| | | <div class="col-md-6"> |
| | | <video id="video" muted autoplay loop controls style="width: 800px; height: 100%; object-fit: fill" /> |
| | | <button id="controlZoomIn" type="button" class="btn btn-primary">调焦-</button> |
| | | <button id="controlZoomOut" type="button" class="btn btn-primary">调焦+</button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </body> |
| | | <div class="row "> |
| | | <div class="col-md-1"> |
| | | <button id="left" type="button" class="btn btn-primary">左</button> |
| | | </div> |
| | | <div class="col-md-1 col-md-offset-1"> |
| | | <button id="right" type="button" class="btn btn-primary">右</button> |
| | | </div> |
| | | <div class="col-md-4 col-md-offset-2"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="controlFocusNear" type="button" class="btn btn-primary">聚焦-</button> |
| | | <button id="controlFocusFar" type="button" class="btn btn-primary">聚焦+</button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="row "> |
| | | <div class="col-md-1 col-md-offset-1"> |
| | | <button id="down" type="button" class="btn btn-primary">下</button> |
| | | </div> |
| | | <div class="col-md-4 col-md-offset-3"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="controlIrisOpen" type="button" class="btn btn-primary">光圈-</button> |
| | | <button id="controlIrisClose" type="button" class="btn btn-primary">光圈+</button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="row"> |
| | | <div class="col-md-6"> |
| | | <div class="row top-buffer"> |
| | | <div class="input-group"> |
| | | <span class="input-group-addon">目的坐标值:</span> |
| | | <input id="targetPostion" class="form-control" placeholder="目的坐标"/> |
| | | <button id="setTargetPostion" type="button" class="btn btn-default">指向坐标</button> |
| | | </div> |
| | | <div class="input-group"> |
| | | <span class="input-group-addon">P值:</span> |
| | | <input id="p" class="form-control" placeholder="请输入P值"/> |
| | | </div> |
| | | <div class="input-group"> |
| | | <span class="input-group-addon">T值:</span> |
| | | <input id="t" class="form-control" placeholder="请输入T值"/> |
| | | </div> |
| | | <div class="input-group"> |
| | | <span class="input-group-addon">Z值:</span> |
| | | <input id="z" class="form-control" placeholder="请输入Z值"/> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="getPTZ" type="button" class="btn btn-default">获取ptz</button> |
| | | <button id="setPTZ" type="button" class="btn btn-default">设置ptz</button> |
| | | <button id="setPreset" type="button" class="btn btn-default">设预置点</button> |
| | | <button id="gotoPreset" type="button" class="btn btn-default">调预置点</button> |
| | | <button id="getZeroPTZ" type="button" class="btn btn-default">调用零方位角</button> |
| | | <button id="setZeroPTZ" type="button" class="btn btn-default">设置零方位角</button> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="FocusMode" type="button" class="btn btn-default">手动聚焦</button> |
| | | <div id="focusDiv" class="input-group"> |
| | | <span class="input-group-addon">聚焦值:</span> |
| | | <input id="focus" class="form-control" placeholder="聚焦值"/> |
| | | </div> |
| | | <button id="getFocusPos" type="button" class="btn btn-default">获取聚焦值</button> |
| | | <button id="setFocusPos" type="button" class="btn btn-default">设置聚焦值</button> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="WiperPwron" type="button" class="btn btn-default">开启雨刷</button> |
| | | <button id="Defogcfg" type="button" class="btn btn-default">开启透雾</button> |
| | | <button id="Infrarecfg" type="button" class="btn btn-default">开启红外</button> |
| | | <button id="HeateRpwron" type="button" class="btn btn-default">开启云台加热</button> |
| | | <button id="CameraDeicing" type="button" class="btn btn-default">开启镜头加热</button> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="btn-group" role="group"> |
| | | <button id="voice" type="button" class="btn btn-default">开始语音对讲</button> |
| | | <button id="record" type="button" class="btn btn-default">开始录像</button> |
| | | <button id="realCutPic" type="button" class="btn btn-default">实时抓图</button> |
| | | <button id="saveCutPic" type="button" class="btn btn-default">存储抓图</button> |
| | | </div> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <div class="col-md-6"> |
| | | <img class="thumbnail" id="imgContainer" style="width: 500px; height: 300px;"/> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="col-md-1"/> |
| | | <div class="col-md-5"> |
| | | <div class="row top-buffer"> |
| | | <video id="video" muted autoplay loop controls style="width: 800px; height: 100%; object-fit: fill;"/> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <script th:inline="javascript"> |
| | | var cameraId, opt, token; |
| | | window.onload = function () { |
| | |
| | | ipaddr: arr[i].ip, |
| | | username: arr[i].username, |
| | | password: arr[i].password, |
| | | port: arr[i].rtspPort |
| | | port: arr[i].rtspPort, |
| | | longitude: arr[i].longitude, |
| | | latitude: arr[i].latitude, |
| | | altitude: arr[i].altitude |
| | | }; |
| | | cameraMap.set(arr[i].id, camera); |
| | | //先创建好select里面的option元素 |
| | |
| | | 'Authorization': token |
| | | }, |
| | | url: "../hik/setPTZ", |
| | | type: "post", |
| | | dataType: "json", |
| | | data: JSON.stringify(myEntity), |
| | | success: function (data) { |
| | | console.log(data); |
| | | } |
| | | }) |
| | | }) |
| | | $("#setTargetPostion").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | var camera = cameraMap.get(cameraId); |
| | | var camP = camera.longitude + ',' + camera.latitude + ',' + camera.altitude; |
| | | var targetP = $('#targetPostion').val(); |
| | | //定义一个带有Map字段的实体对象 |
| | | var myEntity = { |
| | | channelNum: 1, |
| | | cameraId: cameraId, |
| | | targetPosition: targetP, |
| | | camPosition: camP, |
| | | }; |
| | | console.log(myEntity) |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | | 'Content-Type': 'application/json', |
| | | 'Authorization': token |
| | | }, |
| | | url: "../hik/setTargetPosition", |
| | | type: "post", |
| | | dataType: "json", |
| | | data: JSON.stringify(myEntity), |
| | |
| | | data: JSON.stringify(opt), |
| | | success: function (data) { |
| | | console.log(data.data); |
| | | $("#imgContainer").attr("src","data:image/png;base64,"+data.data); |
| | | $("#imgContainer").attr("src", "data:image/png;base64," + data.data); |
| | | } |
| | | }) |
| | | }) |
| | |
| | | } else if (camera.type == "dh") { |
| | | realViewDh("127.0.0.1", ID, camera.username, camera.password, camera.ipaddr, camera.port); |
| | | } else { |
| | | realViewHik("192.168.1.15", ID, camera.username, camera.password, camera.ipaddr, camera.port); |
| | | realViewHik("192.168.1.15", ID, camera.username, camera.password, camera.ipaddr, camera.port); |
| | | } |
| | | } |
| | | }); |
| | |
| | | webRtcServer.disconnect(); |
| | | } |
| | | </script> |
| | | </body> |
| | | </html> |