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 | 235 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 169 insertions(+), 66 deletions(-)
diff --git a/ard-work/src/main/resources/templates/test.html b/ard-work/src/main/resources/templates/test.html
index 53fbf60..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,7 +487,8 @@
})
})
$("#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();
@@ -410,7 +496,7 @@
arr = arr.map(item => parseFloat(item));
//瀹氫箟涓�涓甫鏈塎ap瀛楁鐨勫疄浣撳璞�
var myEntity = {
- chanNo: 1,
+ chanNo: chanNo,
cameraId: cameraId,
targetPosition: arr
};
@@ -431,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',
@@ -449,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',
@@ -468,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;
@@ -510,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;
@@ -552,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;
@@ -592,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',
@@ -612,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;
@@ -653,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;
@@ -693,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',
@@ -712,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',
@@ -735,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;
@@ -779,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',
@@ -798,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) {
@@ -948,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,
@@ -993,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])
}
}
@@ -1053,7 +1157,6 @@
}
function realView(whepUrl, videoId) {
- console.log(whepUrl)
webrtcClient = new WHEPClient(whepUrl, videoId);
}
</script>
--
Gitblit v1.9.3