|  |  |  | 
|---|
|  |  |  | 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> | 
|---|