|  |  | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  | </div> | 
 |  |  | <script th:inline="javascript"> | 
 |  |  |     var cameraId, opt, token; | 
 |  |  | <script th:inline="javascript" th:type="module"> | 
 |  |  |  | 
 |  |  |     var cameraId, opt, optOpen, optClose, token; | 
 |  |  |     window.onload = function () { | 
 |  |  |         console.log(RTCRtpReceiver.getCapabilities('video').codecs) | 
 |  |  |         $.ajax({ | 
 |  |  |             url: "../hik/list", | 
 |  |  |             type: "get", | 
 |  |  | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         opt = {"username": "admin", "password": "admin123"}; | 
 |  |  |         $.ajax({ | 
 |  |  |             headers: { | 
 |  |  | 
 |  |  |  | 
 |  |  |     $("#setPreset").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         opt = {"cameraId": cameraId, "channelNum": 1, "speed": 8, "presetIndex": 1}; | 
 |  |  |         opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "presetIndex": 1}; | 
 |  |  |         $.ajax({ | 
 |  |  |             headers: { | 
 |  |  |                 'Accept': 'application/json', | 
 |  |  | 
 |  |  |     }) | 
 |  |  |     $("#gotoPreset").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         opt = {"cameraId": cameraId, "channelNum": 1, "speed": 8, "presetIndex": 1}; | 
 |  |  |         opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "presetIndex": 1}; | 
 |  |  |         $.ajax({ | 
 |  |  |             headers: { | 
 |  |  |                 'Accept': 'application/json', | 
 |  |  | 
 |  |  |     }) | 
 |  |  |     $("#getPTZ").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         opt = {"cameraId": cameraId, "channelNum": 1}; | 
 |  |  |         opt = {"cameraId": cameraId, "chanNo": 1}; | 
 |  |  |         $.ajax({ | 
 |  |  |             headers: { | 
 |  |  |                 'Accept': 'application/json', | 
 |  |  | 
 |  |  |         var z = $('#z').val(); | 
 |  |  |         //定义一个带有Map字段的实体对象 | 
 |  |  |         var myEntity = { | 
 |  |  |             channelNum: 1, | 
 |  |  |             chanNo: 1, | 
 |  |  |             cameraId: cameraId, | 
 |  |  |             ptzMap: { | 
 |  |  |                 p: p, | 
 |  |  | 
 |  |  |         var targetP = $('#targetPostion').val(); | 
 |  |  |         //定义一个带有Map字段的实体对象 | 
 |  |  |         var myEntity = { | 
 |  |  |             channelNum: 1, | 
 |  |  |             chanNo: 1, | 
 |  |  |             cameraId: cameraId, | 
 |  |  |             targetPosition: targetP, | 
 |  |  |             camPosition: camP, | 
 |  |  | 
 |  |  |     }) | 
 |  |  |     $("#setZeroPTZ").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         opt = {"cameraId": cameraId, "channelNum": 1}; | 
 |  |  |         opt = {"cameraId": cameraId, "chanNo": 1}; | 
 |  |  |         $.ajax({ | 
 |  |  |             headers: { | 
 |  |  |                 'Accept': 'application/json', | 
 |  |  | 
 |  |  |     }) | 
 |  |  |     $("#WiperPwron").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         opt = {"cameraId": cameraId, "channelNum": 1, "speed": 8, "enable": true, "code": 16}; | 
 |  |  |         opt = {"cameraId": cameraId, "chanNo": 1, "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, "channelNum": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false}; | 
 |  |  |         optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; | 
 |  |  |         if (defogflag) { | 
 |  |  |             $(this).text("关闭透雾"); | 
 |  |  |             defogflag = false; | 
 |  |  | 
 |  |  |     var infrareflag = true; | 
 |  |  |     $("#Infrarecfg").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false}; | 
 |  |  |         optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; | 
 |  |  |         if (infrareflag) { | 
 |  |  |             $(this).text("关闭红外"); | 
 |  |  |             infrareflag = false; | 
 |  |  | 
 |  |  |     var focusModeflag = true; | 
 |  |  |     $("#FocusMode").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false}; | 
 |  |  |         optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; | 
 |  |  |         if (focusModeflag) { | 
 |  |  |             $(this).text("自动聚焦"); | 
 |  |  |             focusModeflag = false; | 
 |  |  | 
 |  |  |             }) | 
 |  |  |         } | 
 |  |  |     }) | 
 |  |  |     $("#getFocusPos").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         opt = {"cameraId": cameraId, "chanNo": 1}; | 
 |  |  |         $.ajax({ | 
 |  |  |                 headers: { | 
 |  |  |                     'Accept': 'application/json', | 
 |  |  |                     'Content-Type': 'application/json', | 
 |  |  |                     'Authorization': token | 
 |  |  |                 }, | 
 |  |  |                 url: "../hik/getFocusPos", | 
 |  |  |                 type: "post", | 
 |  |  |                 dataType: "json", | 
 |  |  |                 data: JSON.stringify(opt), | 
 |  |  |                 success: function (datas) { | 
 |  |  |                     console.log(datas); | 
 |  |  |                     $("#focus").val(datas.data.dwFocus); | 
 |  |  |                 } | 
 |  |  |             }) | 
 |  |  |     }) | 
 |  |  |     var heateRpwronflag = true; | 
 |  |  |     $("#HeateRpwron").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false}; | 
 |  |  |         optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; | 
 |  |  |         if (heateRpwronflag) { | 
 |  |  |             $(this).text("关闭云台加热"); | 
 |  |  |             heateRpwronflag = false; | 
 |  |  | 
 |  |  |     var CameraDeicingflag = true; | 
 |  |  |     $("#CameraDeicing").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false}; | 
 |  |  |         optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; | 
 |  |  |         if (CameraDeicingflag) { | 
 |  |  |             $(this).text("关闭镜头加热"); | 
 |  |  |             CameraDeicingflag = false; | 
 |  |  | 
 |  |  |     }) | 
 |  |  |     $("#realCutPic").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         opt = {"cameraId": cameraId, "channelNum": 1}; | 
 |  |  |         opt = {"cameraId": cameraId, "chanNo": 1}; | 
 |  |  |         $.ajax({ | 
 |  |  |             headers: { | 
 |  |  |                 'Accept': 'application/json', | 
 |  |  | 
 |  |  |     }) | 
 |  |  |     $("#saveCutPic").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         opt = {"cameraId": cameraId, "channelNum": 1}; | 
 |  |  |         opt = {"cameraId": cameraId, "chanNo": 1}; | 
 |  |  |         $.ajax({ | 
 |  |  |             headers: { | 
 |  |  |                 'Accept': 'application/json', | 
 |  |  | 
 |  |  |     var recordflag = true; | 
 |  |  |     $("#record").click(function () { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false}; | 
 |  |  |         optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; | 
 |  |  |         if (recordflag) { | 
 |  |  |             $(this).text("停止录像"); | 
 |  |  |             recordflag = false; | 
 |  |  | 
 |  |  |     /*云台公共方法*/ | 
 |  |  |     function commondMethod(url, code, enable) { | 
 |  |  |         cameraId = $('#select option:selected').val(); | 
 |  |  |         opt = {"cameraId": cameraId, "channelNum": 1, "speed": 8, "enable": enable, "code": code}; | 
 |  |  |         opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "enable": enable, "code": code}; | 
 |  |  |         $.ajax({ | 
 |  |  |             headers: { | 
 |  |  |                 'Accept': 'application/json', | 
 |  |  | 
 |  |  |             } 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("127.0.0.1", ID, camera.username, camera.password, camera.ipaddr, camera.port); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     //预览海康相机 | 
 |  |  |     function realViewHik(serverip, elem, username, password, ipaddr, port) { | 
 |  |  |         webRtcServer = new WebRtcStreamer(elem, "http://" + serverip + ":8000"); | 
 |  |  |        // webRtcServer = new WebRtcStreamer(elem, "http://" + serverip + ":8000"); | 
 |  |  |         webRtcServer = new WebRtcStreamer(elem, "http://192.168.1.227:8000"); | 
 |  |  |         let rtspUrl = "rtsp://" + username + ":" + password + "@" + ipaddr + ":" + port + "/ch1/main/av_stream"; | 
 |  |  |         let option = "rtptransport=tcp"; | 
 |  |  |         console.log("rtsp地址:" + rtspUrl); |