|  |  |  | 
|---|
|  |  |  | 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: { | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | $("#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> | 
|---|