| | |
| | | .top-buffer { |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | .container { |
| | | border: 2px solid #1b6d85; |
| | | padding: 20px; |
| | | padding: 15px; |
| | | } |
| | | </style> |
| | | <body> |
| | | <div class="container"> |
| | | <div class="row "> |
| | | <div class="col-md-12"> |
| | | 相机id:<select id="select" style="width: 330px;"> |
| | | </select> |
| | | </div> |
| | | </div> |
| | | <div class="row"> |
| | | <div class="col-md-5"> |
| | | <div class="row top-buffer"> |
| | | 设备:<select id="selectDev" style="width: 330px;"> |
| | | </select> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | 通道:<select id="selectChn" style="width: 330px;"> |
| | | </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 class="col-md-6"> |
| | | <div class="row"> |
| | | <div class="row top-buffer"> |
| | | <button id="preview" type="button" class="btn btn-primary">预览</button> |
| | | </div> |
| | | <div class="row top-buffer"> |
| | | <video id="video" muted autoplay loop controls |
| | | style="width: 100%; height: 360px; object-fit: fill; border: 2px solid #3498db;"/> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <script th:inline="javascript"> |
| | | |
| | | var cameraId, opt, optOpen, optClose, token; |
| | | var cameraId, chanNo,opt, optOpen, optClose, token; |
| | | window.onload = function () { |
| | | console.log(RTCRtpReceiver.getCapabilities('video').codecs) |
| | | opt = {"username": "admin", "password": "admin123"}; |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | | 'Content-Type': 'application/json' |
| | | }, |
| | | url: "../login", |
| | | type: "post", |
| | | dataType: "json", |
| | | data: JSON.stringify(opt), |
| | | success: function (data) { |
| | | token = data.token; |
| | | getDeviceList();// 获取设备列表 |
| | | } |
| | | }) |
| | | // 初始化内容 |
| | | console.log(cameraMap); |
| | | } |
| | | |
| | | //获取设备 |
| | | function getDeviceList() { |
| | | $.ajax({ |
| | | url: "../cameraSdk/list", |
| | | type: "get", |
| | |
| | | var arr = data.data; |
| | | for (var i = 0; i < arr.length; i++) { |
| | | console.log(arr[i].id); |
| | | console.log(arr[i].name) |
| | | var camera = { |
| | | name: arr[i].name, |
| | | factory: arr[i].factory, |
| | |
| | | }; |
| | | cameraMap.set(arr[i].id, camera); |
| | | //先创建好select里面的option元素 |
| | | var option = document.createElement("option"); |
| | | var option = $("<option>"); |
| | | //给option的text赋值,这就是你点开下拉框能够看到的东西 |
| | | $(option).text(arr[i].id); |
| | | $(option).val(arr[i].id); |
| | | $(option).text(arr[i].name); |
| | | //获取select 下拉框对象,并将option添加进select |
| | | $('#select').append(option); |
| | | $('#selectDev').append(option); |
| | | } |
| | | $("#selectDev").trigger("change"); |
| | | } |
| | | }) |
| | | opt = {"username": "admin", "password": "admin123"}; |
| | | } |
| | | |
| | | //选择设备 |
| | | $("#selectDev").change(function () { |
| | | // 在这里处理选择事件 |
| | | var cameraId = $(this).find("option:selected").val(); |
| | | var name = $(this).find("option:selected").text(); |
| | | getChannelList(cameraId); |
| | | console.log("选择了:" + cameraId + "---" + name); |
| | | }); |
| | | |
| | | //获取通道 |
| | | function getChannelList(cameraId) { |
| | | console.log(cameraId) |
| | | var myEntity = { |
| | | deviceId: cameraId, |
| | | pageNum: 1, |
| | | pageSize: 64 |
| | | } |
| | | var queryString = $.param(myEntity); |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | | 'Content-Type': 'application/json' |
| | | 'Content-Type': 'application/json', |
| | | 'Authorization': token |
| | | }, |
| | | url: "../login", |
| | | type: "post", |
| | | dataType: "json", |
| | | data: JSON.stringify(opt), |
| | | url: "../device/channel/list?" + queryString, |
| | | type: "get", |
| | | success: function (data) { |
| | | token = data.token; |
| | | console.log(data); |
| | | var arr = data.rows; |
| | | $('#selectChn').empty(); |
| | | for (var i = 0; i < arr.length; i++) { |
| | | console.log(arr[i].chanNo); |
| | | console.log(arr[i].name); |
| | | //先创建好select里面的option元素 |
| | | var option = document.createElement("option"); |
| | | //给option的text赋值,这就是你点开下拉框能够看到的东西 |
| | | $(option).text(arr[i].name); |
| | | $(option).val(arr[i].chanNo); |
| | | //获取select 下拉框对象,并将option添加进select |
| | | $('#selectChn').append(option); |
| | | } |
| | | } |
| | | }) |
| | | // 初始化内容 |
| | | console.log(cameraMap); |
| | | } |
| | | |
| | | //预览 |
| | | $('#preview').click(() => { |
| | | var cameraId = $('#selectDev option:selected').val(); |
| | | var chanNo = $('#selectChn option:selected').val(); |
| | | console.log(cameraId + " " + chanNo) |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | | 'Content-Type': 'application/json', |
| | | 'Authorization': token |
| | | }, |
| | | url: "../vtdu/media/" + cameraId + "_" + chanNo, |
| | | type: "get", |
| | | dataType: "json", |
| | | success: function (data) { |
| | | realView(data.data.webrtcUrl + "/", "video"); |
| | | } |
| | | }) |
| | | }); |
| | | |
| | | //云台上下左右 |
| | | $("#up").mousedown(function () { |
| | | var url = "../cameraSdk/PTZControlWithSpeed"; |
| | |
| | | }) |
| | | |
| | | $("#setPreset").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "presetIndex": 1}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 8, "presetIndex": 1}; |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | |
| | | }) |
| | | }) |
| | | $("#gotoPreset").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "presetIndex": 1}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 8, "presetIndex": 1}; |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | |
| | | }) |
| | | }) |
| | | $("#getPTZ").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": 1}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": chanNo}; |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | |
| | | }) |
| | | }) |
| | | $("#setPTZ").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | var p = $('#p').val(); |
| | | var t = $('#t').val(); |
| | | var z = $('#z').val(); |
| | | //定义一个带有Map字段的实体对象 |
| | | var myEntity = { |
| | | chanNo: 1, |
| | | chanNo: chanNo, |
| | | cameraId: cameraId, |
| | | ptzMap: { |
| | | p: p, |
| | |
| | | }) |
| | | }) |
| | | $("#setTargetPostion").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | var camera = cameraMap.get(cameraId); |
| | | var camP = camera.longitude + ',' + camera.latitude + ',' + camera.altitude; |
| | | var targetP = $('#targetPostion').val(); |
| | |
| | | arr = arr.map(item => parseFloat(item)); |
| | | //定义一个带有Map字段的实体对象 |
| | | var myEntity = { |
| | | chanNo: 1, |
| | | chanNo: chanNo, |
| | | cameraId: cameraId, |
| | | targetPosition: arr |
| | | }; |
| | |
| | | }) |
| | | }) |
| | | $("#setZeroPTZ").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": 1}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": chanNo}; |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | |
| | | }) |
| | | }) |
| | | $("#WiperPwron").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "enable": true, "code": 16}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 8, "enable": true, "code": 16}; |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | |
| | | }) |
| | | var defogflag = true; |
| | | $("#Defogcfg").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; |
| | | if (defogflag) { |
| | | $(this).text("关闭透雾"); |
| | | defogflag = false; |
| | |
| | | }) |
| | | var infrareflag = true; |
| | | $("#Infrarecfg").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; |
| | | if (infrareflag) { |
| | | $(this).text("关闭红外"); |
| | | infrareflag = false; |
| | |
| | | }) |
| | | var focusModeflag = true; |
| | | $("#FocusMode").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; |
| | | if (focusModeflag) { |
| | | $(this).text("自动聚焦"); |
| | | focusModeflag = false; |
| | |
| | | } |
| | | }) |
| | | $("#getFocusPos").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": 1}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": chanNo}; |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | |
| | | }) |
| | | var heateRpwronflag = true; |
| | | $("#HeateRpwron").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; |
| | | if (heateRpwronflag) { |
| | | $(this).text("关闭云台加热"); |
| | | heateRpwronflag = false; |
| | |
| | | }) |
| | | var CameraDeicingflag = true; |
| | | $("#CameraDeicing").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; |
| | | if (CameraDeicingflag) { |
| | | $(this).text("关闭镜头加热"); |
| | | CameraDeicingflag = false; |
| | |
| | | } |
| | | }) |
| | | $("#realCutPic").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": 1}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": chanNo}; |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | |
| | | }) |
| | | }) |
| | | $("#saveCutPic").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": 1}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": chanNo}; |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | |
| | | }) |
| | | var recordflag = true; |
| | | $("#record").click(function () { |
| | | cameraId = $('#select option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; |
| | | optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; |
| | | if (recordflag) { |
| | | $(this).text("停止录像"); |
| | | recordflag = false; |
| | |
| | | |
| | | /*云台公共方法*/ |
| | | function commondMethod(url, code, enable) { |
| | | cameraId = $('#select option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": 1, "speed": 4, "enable": enable, "code": code}; |
| | | cameraId = $('#selectDev option:selected').val(); |
| | | chanNo = $('#selectChn option:selected').val(); |
| | | opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 4, "enable": enable, "code": code}; |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | |
| | | } |
| | | |
| | | $('video').click(function (e) { |
| | | var cameraId = $('#select option:selected').val(); |
| | | var cameraId = $('#selectDev option:selected').val(); |
| | | var chanNo = $('#selectChn option:selected').val(); |
| | | console.log(cameraId + " " + chanNo) |
| | | $.ajax({ |
| | | headers: { |
| | | 'Accept': 'application/json', |
| | | 'Content-Type': 'application/json', |
| | | 'Authorization': token |
| | | }, |
| | | url: "../vtdu/media/" + cameraId + "_" + 1, |
| | | url: "../vtdu/media/" + cameraId + "_" + chanNo, |
| | | type: "get", |
| | | dataType: "json", |
| | | success: function (data) { |