|  |  | 
 |  |  |             margin-top: 10px; | 
 |  |  |         } | 
 |  |  |     </style> | 
 |  |  |     <!-- 导入 ECMAScript 模块 --> | 
 |  |  |     <script th:type="module" th:src="@{/js/WHEPClient.js}"></script> | 
 |  |  |     <!-- 内联脚本块,可以使用模块中的内容 --> | 
 |  |  |     <script th:inline="javascript"> | 
 |  |  |         /*<![CDATA[*/ | 
 |  |  |         // 在这里使用 WHEPClient 模块中的内容 | 
 |  |  |         $("#play").click(function webrtcClient(){ | 
 |  |  |             const  url = "http://127.0.0.1:8889/165"; // add the webRTC URL from your live input here | 
 |  |  |             console.log(url) | 
 |  |  |             const  videoElement = document.getElementById("remote-video"); | 
 |  |  |             const  client = new WHEPClient(url, videoElement); | 
 |  |  |         }) | 
 |  |  |         /*]]>*/ | 
 |  |  |     </script> | 
 |  |  | <body> | 
 |  |  | <div class="container"> | 
 |  |  |     <div class="row "> | 
 |  |  | 
 |  |  |             <div class="row top-buffer"> | 
 |  |  |                 <video id="video" muted autoplay loop controls style="width: 800px; height: 100%; object-fit: fill;"/> | 
 |  |  |             </div> | 
 |  |  |             <div class="row top-buffer"> | 
 |  |  |                 <button id="play" type="button" class="btn btn-default" >播放</button> | 
 |  |  |             <video id="remote-video" controls autoplay muted></video> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  | </div> | 
 |  |  | <script th:inline="javascript"> | 
 |  |  |     var cameraId, opt,optOpen,optClose, 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', | 
 |  |  | 
 |  |  |  | 
 |  |  |     //预览海康相机 | 
 |  |  |     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); | 
 |  |  | 
 |  |  |         webRtcServer.disconnect(); | 
 |  |  |     } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | </body> | 
 |  |  | </html> |