From 38f29e38fcc668171dc05c53d40a36b895c86102 Mon Sep 17 00:00:00 2001 From: liusuyi <1951119284@qq.com> Date: 星期四, 10 十月 2024 13:34:28 +0800 Subject: [PATCH] init --- ard-work/src/main/resources/templates/test.html | 242 ++++++++++++++++++++++++++++++++++------------- 1 files changed, 173 insertions(+), 69 deletions(-) diff --git a/ard-work/src/main/resources/templates/test.html b/ard-work/src/main/resources/templates/test.html index 38e86f4..6284aaf 100644 --- a/ard-work/src/main/resources/templates/test.html +++ b/ard-work/src/main/resources/templates/test.html @@ -10,22 +10,23 @@ .top-buffer { margin-top: 10px; } - .container { border: 2px solid #1b6d85; - padding: 20px; + padding: 15px; } </style> <body> <div class="container"> - <div class="row "> - <div class="col-md-12"> - 鐩告満id锛�<select id="select" style="width: 330px;"> - </select> - </div> - </div> <div class="row"> <div class="col-md-5"> + <div class="row top-buffer"> + 璁惧锛�<select id="selectDev" style="width: 330px;"> + </select> + </div> + <div class="row top-buffer"> + 閫氶亾锛�<select id="selectChn" style="width: 330px;"> + </select> + </div> <div class="row top-buffer"> <div class="col-md-1 col-md-offset-1"> <button id="up" type="button" class="btn btn-primary">涓�</button> @@ -125,6 +126,10 @@ <div class="col-md-6"> <div class="row"> <div class="row top-buffer"> + <button id="preview" type="button" class="btn btn-primary">棰勮</button> + <button id="previewStop" type="button" class="btn btn-primary">鍋滄</button> + </div> + <div class="row top-buffer"> <video id="video" muted autoplay loop controls style="width: 100%; height: 360px; object-fit: fill; border: 2px solid #3498db;"/> </div> @@ -137,10 +142,30 @@ </div> </div> <script th:inline="javascript"> - - var cameraId, opt, optOpen, optClose, token; + var cameraId, chanNo,opt, optOpen, optClose, token; window.onload = function () { console.log(RTCRtpReceiver.getCapabilities('video').codecs) + opt = {"username": "admin", "password": "admin123"}; + $.ajax({ + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + url: "../login", + type: "post", + dataType: "json", + data: JSON.stringify(opt), + success: function (data) { + token = data.token; + getDeviceList();// 鑾峰彇璁惧鍒楄〃 + } + }) + // 鍒濆鍖栧唴瀹� + console.log(cameraMap); + } + + //鑾峰彇璁惧 + function getDeviceList() { $.ajax({ url: "../cameraSdk/list", type: "get", @@ -149,6 +174,7 @@ var arr = data.data; for (var i = 0; i < arr.length; i++) { console.log(arr[i].id); + console.log(arr[i].name) var camera = { name: arr[i].name, factory: arr[i].factory, @@ -162,31 +188,86 @@ }; cameraMap.set(arr[i].id, camera); //鍏堝垱寤哄ソselect閲岄潰鐨刼ption鍏冪礌 - var option = document.createElement("option"); + var option = $("<option>"); //缁檕ption鐨則ext璧嬪��,杩欏氨鏄綘鐐瑰紑涓嬫媺妗嗚兘澶熺湅鍒扮殑涓滆タ - $(option).text(arr[i].id); + $(option).val(arr[i].id); + $(option).text(arr[i].name); //鑾峰彇select 涓嬫媺妗嗗璞�,骞跺皢option娣诲姞杩泂elect - $('#select').append(option); + $('#selectDev').append(option); } + $("#selectDev").trigger("change"); } }) - opt = {"username": "admin", "password": "admin123"}; + } + + //閫夋嫨璁惧 + $("#selectDev").change(function () { + // 鍦ㄨ繖閲屽鐞嗛�夋嫨浜嬩欢 + var cameraId = $(this).find("option:selected").val(); + var name = $(this).find("option:selected").text(); + getChannelList(cameraId); + console.log("閫夋嫨浜嗭細" + cameraId + "---" + name); + }); + + //鑾峰彇閫氶亾 + function getChannelList(cameraId) { + console.log(cameraId) + var myEntity = { + deviceId: cameraId, + pageNum: 1, + pageSize: 64 + } + var queryString = $.param(myEntity); $.ajax({ headers: { 'Accept': 'application/json', - 'Content-Type': 'application/json' + 'Content-Type': 'application/json', + 'Authorization': token }, - url: "../login", - type: "post", - dataType: "json", - data: JSON.stringify(opt), + url: "../device/channel/list?" + queryString, + type: "get", success: function (data) { - token = data.token; + console.log(data); + var arr = data.rows; + $('#selectChn').empty(); + for (var i = 0; i < arr.length; i++) { + console.log(arr[i].chanNo); + console.log(arr[i].name); + //鍏堝垱寤哄ソselect閲岄潰鐨刼ption鍏冪礌 + var option = document.createElement("option"); + //缁檕ption鐨則ext璧嬪��,杩欏氨鏄綘鐐瑰紑涓嬫媺妗嗚兘澶熺湅鍒扮殑涓滆タ + $(option).text(arr[i].name); + $(option).val(arr[i].chanNo); + //鑾峰彇select 涓嬫媺妗嗗璞�,骞跺皢option娣诲姞杩泂elect + $('#selectChn').append(option); + } } }) - // 鍒濆鍖栧唴瀹� - console.log(cameraMap); } + + //棰勮 + $('#preview').click(() => { + var cameraId = $('#selectDev option:selected').val(); + var chanNo = $('#selectChn option:selected').val(); + console.log(cameraId + " " + chanNo) + $.ajax({ + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + 'Authorization': token + }, + url: "../vtdu/media/" + cameraId + "_" + chanNo, + type: "get", + dataType: "json", + success: function (data) { + realView(data.data.webrtcUrl + "/", "video"); + } + }) + }); + //鍋滄 + $('#previewStop').click(() => { + webrtcClient.stop(); + }); //浜戝彴涓婁笅宸﹀彸 $("#up").mousedown(function () { var url = "../cameraSdk/PTZControlWithSpeed"; @@ -314,8 +395,9 @@ }) $("#setPreset").click(function () { - cameraId = $('#select option:selected').val(); - opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "presetIndex": 1}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 8, "presetIndex": 1}; $.ajax({ headers: { 'Accept': 'application/json', @@ -332,8 +414,9 @@ }) }) $("#gotoPreset").click(function () { - cameraId = $('#select option:selected').val(); - opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "presetIndex": 1}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 8, "presetIndex": 1}; $.ajax({ headers: { 'Accept': 'application/json', @@ -350,8 +433,9 @@ }) }) $("#getPTZ").click(function () { - cameraId = $('#select option:selected').val(); - opt = {"cameraId": cameraId, "chanNo": 1}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + opt = {"cameraId": cameraId, "chanNo": chanNo}; $.ajax({ headers: { 'Accept': 'application/json', @@ -371,13 +455,14 @@ }) }) $("#setPTZ").click(function () { - cameraId = $('#select option:selected').val(); + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); var p = $('#p').val(); var t = $('#t').val(); var z = $('#z').val(); //瀹氫箟涓�涓甫鏈塎ap瀛楁鐨勫疄浣撳璞� var myEntity = { - chanNo: 1, + chanNo: chanNo, cameraId: cameraId, ptzMap: { p: p, @@ -402,16 +487,18 @@ }) }) $("#setTargetPostion").click(function () { - cameraId = $('#select option:selected').val(); + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); var camera = cameraMap.get(cameraId); var camP = camera.longitude + ',' + camera.latitude + ',' + camera.altitude; var targetP = $('#targetPostion').val(); + var arr = targetP.split(","); + arr = arr.map(item => parseFloat(item)); //瀹氫箟涓�涓甫鏈塎ap瀛楁鐨勫疄浣撳璞� var myEntity = { - chanNo: 1, + chanNo: chanNo, cameraId: cameraId, - targetPosition: targetP, - camPosition: camP, + targetPosition: arr }; console.log(myEntity) $.ajax({ @@ -430,8 +517,9 @@ }) }) $("#setZeroPTZ").click(function () { - cameraId = $('#select option:selected').val(); - opt = {"cameraId": cameraId, "chanNo": 1}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + opt = {"cameraId": cameraId, "chanNo": chanNo}; $.ajax({ headers: { 'Accept': 'application/json', @@ -448,8 +536,9 @@ }) }) $("#WiperPwron").click(function () { - cameraId = $('#select option:selected').val(); - opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "enable": true, "code": 16}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 8, "enable": true, "code": 16}; $.ajax({ headers: { 'Accept': 'application/json', @@ -467,9 +556,10 @@ }) var defogflag = true; $("#Defogcfg").click(function () { - cameraId = $('#select option:selected').val(); - optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; - optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; + optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; if (defogflag) { $(this).text("鍏抽棴閫忛浘"); defogflag = false; @@ -509,9 +599,10 @@ }) var infrareflag = true; $("#Infrarecfg").click(function () { - cameraId = $('#select option:selected').val(); - optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; - optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; + optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; if (infrareflag) { $(this).text("鍏抽棴绾㈠"); infrareflag = false; @@ -551,9 +642,10 @@ }) var focusModeflag = true; $("#FocusMode").click(function () { - cameraId = $('#select option:selected').val(); - optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; - optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; + optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; if (focusModeflag) { $(this).text("鑷姩鑱氱劍"); focusModeflag = false; @@ -591,8 +683,9 @@ } }) $("#getFocusPos").click(function () { - cameraId = $('#select option:selected').val(); - opt = {"cameraId": cameraId, "chanNo": 1}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + opt = {"cameraId": cameraId, "chanNo": chanNo}; $.ajax({ headers: { 'Accept': 'application/json', @@ -611,9 +704,10 @@ }) var heateRpwronflag = true; $("#HeateRpwron").click(function () { - cameraId = $('#select option:selected').val(); - optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; - optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; + optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; if (heateRpwronflag) { $(this).text("鍏抽棴浜戝彴鍔犵儹"); heateRpwronflag = false; @@ -652,9 +746,10 @@ }) var CameraDeicingflag = true; $("#CameraDeicing").click(function () { - cameraId = $('#select option:selected').val(); - optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; - optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; + optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; if (CameraDeicingflag) { $(this).text("鍏抽棴闀滃ご鍔犵儹"); CameraDeicingflag = false; @@ -692,8 +787,9 @@ } }) $("#realCutPic").click(function () { - cameraId = $('#select option:selected').val(); - opt = {"cameraId": cameraId, "chanNo": 1}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + opt = {"cameraId": cameraId, "chanNo": chanNo}; $.ajax({ headers: { 'Accept': 'application/json', @@ -711,8 +807,9 @@ }) }) $("#saveCutPic").click(function () { - cameraId = $('#select option:selected').val(); - opt = {"cameraId": cameraId, "chanNo": 1}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + opt = {"cameraId": cameraId, "chanNo": chanNo}; $.ajax({ headers: { 'Accept': 'application/json', @@ -734,9 +831,10 @@ }) var recordflag = true; $("#record").click(function () { - cameraId = $('#select option:selected').val(); - optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true}; - optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + optOpen = {"cameraId": cameraId, "chanNo": chanNo, "enable": true}; + optClose = {"cameraId": cameraId, "chanNo": chanNo, "enable": false}; if (recordflag) { $(this).text("鍋滄褰曞儚"); recordflag = false; @@ -778,8 +876,9 @@ /*浜戝彴鍏叡鏂规硶*/ function commondMethod(url, code, enable) { - cameraId = $('#select option:selected').val(); - opt = {"cameraId": cameraId, "chanNo": 1, "speed": 4, "enable": enable, "code": code}; + cameraId = $('#selectDev option:selected').val(); + chanNo = $('#selectChn option:selected').val(); + opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 4, "enable": enable, "code": code}; $.ajax({ headers: { 'Accept': 'application/json', @@ -797,14 +896,16 @@ } $('video').click(function (e) { - var cameraId = $('#select option:selected').val(); + var cameraId = $('#selectDev option:selected').val(); + var chanNo = $('#selectChn option:selected').val(); + console.log(cameraId + " " + chanNo) $.ajax({ headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': token }, - url: "../vtdu/media/" + cameraId + "_" + 1, + url: "../vtdu/media/" + cameraId + "_" + chanNo, type: "get", dataType: "json", success: function (data) { @@ -947,8 +1048,10 @@ } // this.eTag = res.headers.get('ETag'); this.eTag = res.headers.get("ETag") || res.headers.get('E-Tag'); + this.wurl = new URL(res.headers.get('location'), this.wurl.origin).toString(); return res.text(); - }) + } + ) .then((sdp) => this.onRemoteAnswer(new RTCSessionDescription({ type: 'answer', sdp, @@ -992,8 +1095,10 @@ if (evt.candidate !== null) { if (this.eTag === '') { + console.log("222222222222222222222") this.queuedCandidates.push(evt.candidate); } else { + console.log("333333333333333333333") this.sendLocalCandidates([evt.candidate]) } } @@ -1052,9 +1157,8 @@ } function realView(whepUrl, videoId) { - console.log(whepUrl) webrtcClient = new WHEPClient(whepUrl, videoId); } </script> </body> -</html> \ No newline at end of file +</html> -- Gitblit v1.9.3