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