|  |  | 
 |  |  |             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 () { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: "../hik/list", | 
 |  |  | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         opt = {"username": "admin", "password": "admin123"}; | 
 |  |  |         $.ajax({ | 
 |  |  |             headers: { | 
 |  |  | 
 |  |  |     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, "channelNum": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "channelNum": 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, "channelNum": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "channelNum": 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, "channelNum": 1, "enable": true}; | 
 |  |  |         optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false}; | 
 |  |  |         if (focusModeflag) { | 
 |  |  |             $(this).text("自动聚焦"); | 
 |  |  |             focusModeflag = false; | 
 |  |  | 
 |  |  |         webRtcServer.disconnect(); | 
 |  |  |     } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | </body> | 
 |  |  | </html> |