From 2cfcb15fdff730140b6a03a874466802704078eb Mon Sep 17 00:00:00 2001
From: aijinhui <aijinhui>
Date: 星期五, 22 十二月 2023 10:01:42 +0800
Subject: [PATCH] 群组
---
ard-work/src/main/resources/templates/test.html | 699 +++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 454 insertions(+), 245 deletions(-)
diff --git a/ard-work/src/main/resources/templates/test.html b/ard-work/src/main/resources/templates/test.html
index a55bf5e..38e86f4 100644
--- a/ard-work/src/main/resources/templates/test.html
+++ b/ard-work/src/main/resources/templates/test.html
@@ -4,155 +4,145 @@
<meta charset="UTF-8">
<title>娴嬭瘯椤�</title>
<script th:src="@{/js/jquery-3.6.4.min.js}"></script>
- <script th:src="@{/js/adapter.min.js}"></script>
- <script th:src="@{/js/webrtcstreamer.js}"></script>
<link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
<script th:src="@{/js/bootstrap.js}"></script>
<style>
.top-buffer {
margin-top: 10px;
}
+
+ .container {
+ border: 2px solid #1b6d85;
+ padding: 20px;
+ }
</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="dropdown">
- 鐩告満id锛�<select id="select">
+ <div class="col-md-12">
+ 鐩告満id锛�<select id="select" style="width: 330px;">
</select>
</div>
</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>
- </div>
- <div class="col-md-4 col-md-offset-3">
- <div class="btn-group" role="group">
- <button id="controlZoomIn" type="button" class="btn btn-primary">璋冪劍-</button>
- <button id="controlZoomOut" type="button" class="btn btn-primary">璋冪劍+</button>
- </div>
- </div>
- </div>
- <div class="row ">
- <div class="col-md-1">
- <button id="left" type="button" class="btn btn-primary">宸�</button>
- </div>
- <div class="col-md-1 col-md-offset-1">
- <button id="right" type="button" class="btn btn-primary">鍙�</button>
- </div>
- <div class="col-md-4 col-md-offset-2">
- <div class="btn-group" role="group">
- <button id="controlFocusNear" type="button" class="btn btn-primary">鑱氱劍-</button>
- <button id="controlFocusFar" type="button" class="btn btn-primary">鑱氱劍+</button>
- </div>
- </div>
- </div>
- <div class="row ">
- <div class="col-md-1 col-md-offset-1">
- <button id="down" type="button" class="btn btn-primary">涓�</button>
- </div>
- <div class="col-md-4 col-md-offset-3">
- <div class="btn-group" role="group">
- <button id="controlIrisOpen" type="button" class="btn btn-primary">鍏夊湀-</button>
- <button id="controlIrisClose" type="button" class="btn btn-primary">鍏夊湀+</button>
- </div>
- </div>
- </div>
<div class="row">
- <div class="col-md-6">
- <div class="row top-buffer">
- <div class="input-group">
- <span class="input-group-addon">鐩殑鍧愭爣鍊硷細</span>
- <input id="targetPostion" class="form-control" placeholder="鐩殑鍧愭爣"/>
- <button id="setTargetPostion" type="button" class="btn btn-default">鎸囧悜鍧愭爣</button>
- </div>
- <div class="input-group">
- <span class="input-group-addon">P鍊硷細</span>
- <input id="p" class="form-control" placeholder="璇疯緭鍏鍊�"/>
- </div>
- <div class="input-group">
- <span class="input-group-addon">T鍊硷細</span>
- <input id="t" class="form-control" placeholder="璇疯緭鍏鍊�"/>
- </div>
- <div class="input-group">
- <span class="input-group-addon">Z鍊硷細</span>
- <input id="z" class="form-control" placeholder="璇疯緭鍏鍊�"/>
- </div>
- </div>
- <div class="row top-buffer">
- <div class="btn-group" role="group">
- <button id="getPTZ" type="button" class="btn btn-default">鑾峰彇ptz</button>
- <button id="setPTZ" type="button" class="btn btn-default">璁剧疆ptz</button>
- <button id="setPreset" type="button" class="btn btn-default">璁鹃缃偣</button>
- <button id="gotoPreset" type="button" class="btn btn-default">璋冮缃偣</button>
- <button id="getZeroPTZ" type="button" class="btn btn-default">璋冪敤闆舵柟浣嶈</button>
- <button id="setZeroPTZ" type="button" class="btn btn-default">璁剧疆闆舵柟浣嶈</button>
- </div>
- </div>
- <div class="row top-buffer">
- <div class="btn-group" role="group">
- <button id="FocusMode" type="button" class="btn btn-default">鎵嬪姩鑱氱劍</button>
- <div id="focusDiv" class="input-group">
- <span class="input-group-addon">鑱氱劍鍊硷細</span>
- <input id="focus" class="form-control" placeholder="鑱氱劍鍊�"/>
- </div>
- <button id="getFocusPos" type="button" class="btn btn-default">鑾峰彇鑱氱劍鍊�</button>
- <button id="setFocusPos" type="button" class="btn btn-default">璁剧疆鑱氱劍鍊�</button>
- </div>
- </div>
- <div class="row top-buffer">
- <div class="btn-group" role="group">
- <button id="WiperPwron" type="button" class="btn btn-default">寮�鍚洦鍒�</button>
- <button id="Defogcfg" type="button" class="btn btn-default">寮�鍚�忛浘</button>
- <button id="Infrarecfg" type="button" class="btn btn-default">寮�鍚孩澶�</button>
- <button id="HeateRpwron" type="button" class="btn btn-default">寮�鍚簯鍙板姞鐑�</button>
- <button id="CameraDeicing" type="button" class="btn btn-default">寮�鍚暅澶村姞鐑�</button>
- </div>
- </div>
- <div class="row top-buffer">
- <div class="btn-group" role="group">
- <button id="voice" type="button" class="btn btn-default">寮�濮嬭闊冲璁�</button>
- <button id="record" type="button" class="btn btn-default">寮�濮嬪綍鍍�</button>
- <button id="realCutPic" type="button" class="btn btn-default">瀹炴椂鎶撳浘</button>
- <button id="saveCutPic" type="button" class="btn btn-default">瀛樺偍鎶撳浘</button>
- </div>
- </div>
- <div class="row top-buffer">
- <div class="col-md-6">
- <img class="thumbnail" id="imgContainer" style="width: 500px; height: 300px;"/>
- </div>
- </div>
- </div>
- <div class="col-md-1"/>
<div class="col-md-5">
<div class="row top-buffer">
- <video id="video" muted autoplay loop controls style="width: 800px; height: 100%; object-fit: fill;"/>
+ <div class="col-md-1 col-md-offset-1">
+ <button id="up" type="button" class="btn btn-primary">涓�</button>
+ </div>
+ <div class="col-md-6 col-md-offset-2">
+ <div class="btn-group" role="group">
+ <button id="controlZoomIn" type="button" class="btn btn-primary">璋冪劍-</button>
+ <button id="controlZoomOut" type="button" class="btn btn-primary">璋冪劍+</button>
+ </div>
+ </div>
</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 class="row ">
+ <div class="col-md-1">
+ <button id="left" type="button" class="btn btn-primary">宸�</button>
+ </div>
+ <div class="col-md-1 col-md-offset-1">
+ <button id="right" type="button" class="btn btn-primary">鍙�</button>
+ </div>
+ <div class="col-md-6 col-md-offset-1">
+ <div class="btn-group" role="group">
+ <button id="controlFocusNear" type="button" class="btn btn-primary">鑱氱劍-</button>
+ <button id="controlFocusFar" type="button" class="btn btn-primary">鑱氱劍+</button>
+ </div>
+ </div>
+ </div>
+ <div class="row ">
+ <div class="col-md-1 col-md-offset-1">
+ <button id="down" type="button" class="btn btn-primary">涓�</button>
+ </div>
+ <div class="col-md-6 col-md-offset-2">
+ <div class="btn-group" role="group">
+ <button id="controlIrisOpen" type="button" class="btn btn-primary">鍏夊湀-</button>
+ <button id="controlIrisClose" type="button" class="btn btn-primary">鍏夊湀+</button>
+ </div>
+ </div>
+ </div>
+ <div class="row ">
+ <div class="col-md-10">
+ <div class="row top-buffer">
+ <div class="input-group">
+ <span class="input-group-addon">鐩殑鍧愭爣鍊硷細</span>
+ <input id="targetPostion" class="form-control" placeholder="鐩殑鍧愭爣"/>
+ <button id="setTargetPostion" type="button" class="btn btn-default">鎸囧悜鍧愭爣</button>
+ </div>
+ <div class="input-group">
+ <span class="input-group-addon">P鍊硷細</span>
+ <input id="p" class="form-control" placeholder="璇疯緭鍏鍊�"/>
+ </div>
+ <div class="input-group">
+ <span class="input-group-addon">T鍊硷細</span>
+ <input id="t" class="form-control" placeholder="璇疯緭鍏鍊�"/>
+ </div>
+ <div class="input-group">
+ <span class="input-group-addon">Z鍊硷細</span>
+ <input id="z" class="form-control" placeholder="璇疯緭鍏鍊�"/>
+ </div>
+ </div>
+ <div class="row top-buffer">
+ <div class="btn-group" role="group">
+ <button id="getPTZ" type="button" class="btn btn-default">鑾峰彇ptz</button>
+ <button id="setPTZ" type="button" class="btn btn-default">璁剧疆ptz</button>
+ <button id="setPreset" type="button" class="btn btn-default">璁鹃缃偣</button>
+ <button id="gotoPreset" type="button" class="btn btn-default">璋冮缃偣</button>
+ <button id="setZeroPTZ" type="button" class="btn btn-default">璁剧疆闆舵柟浣嶈</button>
+ </div>
+ </div>
+ <div class="row top-buffer">
+ <div class="btn-group" role="group">
+ <button id="FocusMode" type="button" class="btn btn-default">鎵嬪姩鑱氱劍</button>
+ <div id="focusDiv" class="input-group">
+ <span class="input-group-addon">鑱氱劍鍊硷細</span>
+ <input id="focus" class="form-control" placeholder="鑱氱劍鍊�"/>
+ </div>
+ <button id="getFocusPos" type="button" class="btn btn-default">鑾峰彇鑱氱劍鍊�</button>
+ <button id="setFocusPos" type="button" class="btn btn-default">璁剧疆鑱氱劍鍊�</button>
+ </div>
+ </div>
+ <div class="row top-buffer">
+ <div class="btn-group" role="group">
+ <button id="WiperPwron" type="button" class="btn btn-default">寮�鍚洦鍒�</button>
+ <button id="Defogcfg" type="button" class="btn btn-default">寮�鍚�忛浘</button>
+ <button id="Infrarecfg" type="button" class="btn btn-default">寮�鍚孩澶�</button>
+ <button id="HeateRpwron" type="button" class="btn btn-default">寮�鍚簯鍙板姞鐑�</button>
+ <button id="CameraDeicing" type="button" class="btn btn-default">寮�鍚暅澶村姞鐑�</button>
+ </div>
+ </div>
+ <div class="row top-buffer">
+ <div class="btn-group" role="group">
+ <button id="voice" type="button" class="btn btn-default">寮�濮嬭闊冲璁�</button>
+ <button id="record" type="button" class="btn btn-default">寮�濮嬪綍鍍�</button>
+ <button id="saveCutPic" type="button" class="btn btn-default">瀛樺偍鎶撳浘</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="row">
+ <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>
+ <div class="row">
+ <img class="thumbnail" id="imgContainer"
+ style="width: 100%; height: 360px; border: 2px solid #3498db;"/>
+ </div>
</div>
</div>
</div>
</div>
<script th:inline="javascript">
- var cameraId, opt,optOpen,optClose, token;
+
+ var cameraId, opt, optOpen, optClose, token;
window.onload = function () {
+ console.log(RTCRtpReceiver.getCapabilities('video').codecs)
$.ajax({
- url: "../hik/list",
+ url: "../cameraSdk/list",
type: "get",
success: function (data) {
console.log(data);
@@ -160,7 +150,8 @@
for (var i = 0; i < arr.length; i++) {
console.log(arr[i].id);
var camera = {
- type: arr[i].gdtype,
+ name: arr[i].name,
+ factory: arr[i].factory,
ipaddr: arr[i].ip,
username: arr[i].username,
password: arr[i].password,
@@ -179,7 +170,6 @@
}
}
})
-
opt = {"username": "admin", "password": "admin123"};
$.ajax({
headers: {
@@ -191,7 +181,6 @@
dataType: "json",
data: JSON.stringify(opt),
success: function (data) {
- console.log(data);
token = data.token;
}
})
@@ -200,125 +189,125 @@
}
//浜戝彴涓婁笅宸﹀彸
$("#up").mousedown(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 2;
var enable = true;
commondMethod(url, code, enable);
})
$("#up").mouseup(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 2;
var enable = false;
commondMethod(url, code, enable);
})
$("#down").mousedown(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 8;
var enable = true;
commondMethod(url, code, enable);
})
$("#down").mouseup(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 8;
var enable = false;
commondMethod(url, code, enable);
})
$("#left").mousedown(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 4;
var enable = true;
commondMethod(url, code, enable);
})
$("#left").mouseup(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 4;
var enable = false;
commondMethod(url, code, enable);
})
$("#right").mousedown(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 6;
var enable = true;
commondMethod(url, code, enable);
})
$("#right").mouseup(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 6;
var enable = false;
commondMethod(url, code, enable);
})
//鍙樺��
$("#controlZoomIn").mousedown(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 10;
var enable = true;
commondMethod(url, code, enable);
})
$("#controlZoomIn").mouseup(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 10;
var enable = false;
commondMethod(url, code, enable);
})
$("#controlZoomOut").mousedown(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 11;
var enable = true;
commondMethod(url, code, enable);
})
$("#controlZoomOut").mouseup(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 11;
var enable = false;
commondMethod(url, code, enable);
})
//鍙樼劍
$("#controlFocusNear").mousedown(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 12;
var enable = true;
commondMethod(url, code, enable);
})
$("#controlFocusNear").mouseup(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 12;
var enable = false;
commondMethod(url, code, enable);
})
$("#controlFocusFar").mousedown(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 13;
var enable = true;
commondMethod(url, code, enable);
})
$("#controlFocusFar").mouseup(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 13;
var enable = false;
commondMethod(url, code, enable);
})
//鍏夊湀
$("#controlIrisOpen").mousedown(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 14;
var enable = true;
commondMethod(url, code, enable);
})
$("#controlIrisOpen").mouseup(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 14;
var enable = false;
commondMethod(url, code, enable);
})
$("#controlIrisClose").mousedown(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 15;
var enable = true;
commondMethod(url, code, enable);
})
$("#controlIrisClose").mouseup(function () {
- var url = "../hik/PTZControlWithSpeed";
+ var url = "../cameraSdk/PTZControlWithSpeed";
var code = 15;
var enable = false;
commondMethod(url, code, enable);
@@ -326,14 +315,14 @@
$("#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',
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/setPreset",
+ url: "../cameraSdk/setPreset",
type: "post",
dataType: "json",
data: JSON.stringify(opt),
@@ -344,14 +333,14 @@
})
$("#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',
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/gotoPreset",
+ url: "../cameraSdk/gotoPreset",
type: "post",
dataType: "json",
data: JSON.stringify(opt),
@@ -362,14 +351,14 @@
})
$("#getPTZ").click(function () {
cameraId = $('#select option:selected').val();
- opt = {"cameraId": cameraId, "channelNum": 1};
+ opt = {"cameraId": cameraId, "chanNo": 1};
$.ajax({
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/getPTZ",
+ url: "../cameraSdk/getPTZ",
type: "post",
dataType: "json",
data: JSON.stringify(opt),
@@ -388,7 +377,7 @@
var z = $('#z').val();
//瀹氫箟涓�涓甫鏈塎ap瀛楁鐨勫疄浣撳璞�
var myEntity = {
- channelNum: 1,
+ chanNo: 1,
cameraId: cameraId,
ptzMap: {
p: p,
@@ -403,7 +392,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/setPTZ",
+ url: "../cameraSdk/setPTZ",
type: "post",
dataType: "json",
data: JSON.stringify(myEntity),
@@ -419,7 +408,7 @@
var targetP = $('#targetPostion').val();
//瀹氫箟涓�涓甫鏈塎ap瀛楁鐨勫疄浣撳璞�
var myEntity = {
- channelNum: 1,
+ chanNo: 1,
cameraId: cameraId,
targetPosition: targetP,
camPosition: camP,
@@ -431,7 +420,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/setTargetPosition",
+ url: "../cameraSdk/setTargetPosition",
type: "post",
dataType: "json",
data: JSON.stringify(myEntity),
@@ -442,14 +431,14 @@
})
$("#setZeroPTZ").click(function () {
cameraId = $('#select option:selected').val();
- opt = {"cameraId": cameraId, "channelNum": 1};
+ opt = {"cameraId": cameraId, "chanNo": 1};
$.ajax({
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/setZeroPTZ",
+ url: "../cameraSdk/setZeroPTZ",
type: "post",
dataType: "json",
data: JSON.stringify(opt),
@@ -460,14 +449,14 @@
})
$("#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',
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/PTZControlWithSpeed",
+ url: "../cameraSdk/PTZControlWithSpeed",
type: "post",
dataType: "json",
data: JSON.stringify(opt),
@@ -479,8 +468,8 @@
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;
@@ -490,7 +479,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/defogcfg",
+ url: "../cameraSdk/defogcfg",
type: "post",
dataType: "json",
data: JSON.stringify(optOpen),
@@ -507,7 +496,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/defogcfg",
+ url: "../cameraSdk/defogcfg",
type: "post",
dataType: "json",
data: JSON.stringify(optClose),
@@ -521,8 +510,8 @@
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;
@@ -532,7 +521,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/infrarecfg",
+ url: "../cameraSdk/infrarecfg",
type: "post",
dataType: "json",
data: JSON.stringify(optOpen),
@@ -550,7 +539,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/infrarecfg",
+ url: "../cameraSdk/infrarecfg",
type: "post",
dataType: "json",
data: JSON.stringify(optClose),
@@ -563,8 +552,8 @@
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;
@@ -574,7 +563,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/focusMode",
+ url: "../cameraSdk/focusMode",
type: "post",
dataType: "json",
data: JSON.stringify(optOpen),
@@ -591,7 +580,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/focusMode",
+ url: "../cameraSdk/focusMode",
type: "post",
dataType: "json",
data: JSON.stringify(optClose),
@@ -601,11 +590,30 @@
})
}
})
+ $("#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: "../cameraSdk/getFocusPos",
+ type: "post",
+ dataType: "json",
+ data: JSON.stringify(opt),
+ success: function (datas) {
+ console.log(datas);
+ $("#focus").val(datas.data);
+ }
+ })
+ })
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;
@@ -615,7 +623,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/heateRpwron",
+ url: "../cameraSdk/heateRpwron",
type: "post",
dataType: "json",
data: JSON.stringify(optOpen),
@@ -632,7 +640,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/heateRpwron",
+ url: "../cameraSdk/heateRpwron",
type: "post",
dataType: "json",
data: JSON.stringify(optClose),
@@ -645,17 +653,18 @@
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;
$.ajax({
headers: {
'Accept': 'application/json',
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
+ 'Authorization': token
},
- url: "../hik/cameraDeicing",
+ url: "../cameraSdk/cameraDeicing",
type: "post",
dataType: "json",
data: JSON.stringify(optOpen),
@@ -672,7 +681,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/cameraDeicing",
+ url: "../cameraSdk/cameraDeicing",
type: "post",
dataType: "json",
data: JSON.stringify(optClose),
@@ -684,14 +693,14 @@
})
$("#realCutPic").click(function () {
cameraId = $('#select option:selected').val();
- opt = {"cameraId": cameraId, "channelNum": 1};
+ opt = {"cameraId": cameraId, "chanNo": 1};
$.ajax({
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/captureJPEGPicture",
+ url: "../cameraSdk/captureJPEGPicture",
type: "post",
dataType: "json",
data: JSON.stringify(opt),
@@ -703,28 +712,31 @@
})
$("#saveCutPic").click(function () {
cameraId = $('#select option:selected').val();
- opt = {"cameraId": cameraId, "channelNum": 1};
+ opt = {"cameraId": cameraId, "chanNo": 1};
$.ajax({
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/picCutCate",
+ url: "../cameraSdk/picCutCate",
type: "post",
dataType: "json",
data: JSON.stringify(opt),
success: function (data) {
console.log(data.data);
- $('#imgContainer').attr('src', data.data);
+ setTimeout(() => {
+ $('#imgContainer').attr('src', data.data);
+ }, 1000)
+
}
})
})
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;
@@ -734,7 +746,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/record",
+ url: "../cameraSdk/record",
type: "post",
dataType: "json",
data: JSON.stringify(optOpen),
@@ -751,7 +763,7 @@
'Content-Type': 'application/json',
'Authorization': token
},
- url: "../hik/record",
+ url: "../cameraSdk/record",
dataType: "json",
data: JSON.stringify(optClose),
type: "post",
@@ -767,7 +779,7 @@
/*浜戝彴鍏叡鏂规硶*/
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": 4, "enable": enable, "code": code};
$.ajax({
headers: {
'Accept': 'application/json',
@@ -784,68 +796,265 @@
})
}
- let webRtcServer = null;
- let videoMap = new Map();
$('video').click(function (e) {
- let ID = e.target.id;//鑾峰彇褰撳墠鐐瑰嚮浜嬩欢鐨勫厓绱�
- console.log(ID);
- if (videoMap.get(ID) != null) {
- closeVideo(ID, videoMap.get(ID));
- } else {
- var cameraId = $('#select option:selected').val();
- let camera = cameraMap.get(cameraId);
- console.log(camera);
- if (camera.type == "ys") {
- realViewYs("127.0.0.1", ID, camera.username, camera.password, camera.ipaddr, camera.port);
- } else if (camera.type == "dh") {
- realViewDh("127.0.0.1", ID, camera.username, camera.password, camera.ipaddr, camera.port);
- } else {
- realViewHik("127.0.0.1", ID, camera.username, camera.password, camera.ipaddr, camera.port);
+ var cameraId = $('#select option:selected').val();
+ $.ajax({
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ 'Authorization': token
+ },
+ url: "../vtdu/media/" + cameraId + "_" + 1,
+ type: "get",
+ dataType: "json",
+ success: function (data) {
+ realView(data.data.webrtcUrl + "/", e.target.id);
}
- }
+ })
});
- //棰勮娴峰悍鐩告満
- function realViewHik(serverip, elem, username, password, ipaddr, port) {
- webRtcServer = new WebRtcStreamer(elem, "http://" + serverip + ":8000");
- let rtspUrl = "rtsp://" + username + ":" + password + "@" + ipaddr + ":" + port + "/ch1/main/av_stream";
- let option = "rtptransport=tcp";
- console.log("rtsp鍦板潃锛�" + rtspUrl);
- webRtcServer.connect(rtspUrl, null, option, null);
- videoMap.set(elem, webRtcServer);
+ let webrtcClient;
+ //whep鎿嶄綔鏂规硶
+ const restartPause = 2000;
+ const unquoteCredential = (v) => (
+ JSON.parse(`"${v}"`)
+ );
+ const linkToIceServers = (links) => (
+ (links !== null) ? links.split(', ').map((link) => {
+ const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);
+ const ret = {
+ urls: [m[1]],
+ };
+
+ if (m[3] !== undefined) {
+ ret.username = unquoteCredential(m[3]);
+ ret.credential = unquoteCredential(m[4]);
+ ret.credentialType = "password";
+ }
+
+ return ret;
+ }) : []
+ );
+ const parseOffer = (offer) => {
+ const ret = {
+ iceUfrag: '',
+ icePwd: '',
+ medias: [],
+ };
+
+ for (const line of offer.split('\r\n')) {
+ if (line.startsWith('m=')) {
+ ret.medias.push(line.slice('m='.length));
+ } else if (ret.iceUfrag === '' && line.startsWith('a=ice-ufrag:')) {
+ ret.iceUfrag = line.slice('a=ice-ufrag:'.length);
+ } else if (ret.icePwd === '' && line.startsWith('a=ice-pwd:')) {
+ ret.icePwd = line.slice('a=ice-pwd:'.length);
+ }
+ }
+
+ return ret;
+ };
+ const generateSdpFragment = (offerData, candidates) => {
+ const candidatesByMedia = {};
+ for (const candidate of candidates) {
+ const mid = candidate.sdpMLineIndex;
+ if (candidatesByMedia[mid] === undefined) {
+ candidatesByMedia[mid] = [];
+ }
+ candidatesByMedia[mid].push(candidate);
+ }
+
+ let frag = 'a=ice-ufrag:' + offerData.iceUfrag + '\r\n'
+ + 'a=ice-pwd:' + offerData.icePwd + '\r\n';
+
+ let mid = 0;
+
+ for (const media of offerData.medias) {
+ if (candidatesByMedia[mid] !== undefined) {
+ frag += 'm=' + media + '\r\n'
+ + 'a=mid:' + mid + '\r\n';
+
+ for (const candidate of candidatesByMedia[mid]) {
+ frag += 'a=' + candidate.candidate + '\r\n';
+ }
+ }
+ mid++;
+ }
+
+ return frag;
}
- //棰勮澶у崕鐩告満
- function realViewDh(serverip, elem, username, password, ipaddr, port) {
- webRtcServer = new WebRtcStreamer(elem, "http://" + serverip + ":8000");
- let rtspUrl = "rtsp://" + username + ":" + password + "@" + ipaddr + ":" + port + "/cam/realmonitor?channel=1&subtype=0";
- let option = "rtptransport=tcp";
- console.log("rtsp鍦板潃锛�" + rtspUrl);
+ class WHEPClient {
+ constructor(whepUrl, videoId) {
+ this.video = videoId;
+ this.wurl = new URL('whep', whepUrl);
+ this.pc = null;
+ this.restartTimeout = null;
+ this.eTag = '';
+ this.queuedCandidates = [];
+ this.start();
+ }
- webRtcServer.connect(rtspUrl, null, option, null);
- videoMap.set(elem, webRtcServer);
+ start() {
+ console.log("requesting ICE servers");
+ fetch(this.wurl, {
+ method: 'OPTIONS',
+ })
+ .then((res) => this.onIceServers(res))
+ .catch((err) => {
+ console.log('error: ' + err);
+ this.scheduleRestart();
+ });
+ }
+
+ onIceServers(res) {
+ this.pc = new RTCPeerConnection({
+ iceServers: linkToIceServers(res.headers.get('Link')),
+ });
+
+ const direction = "sendrecv";
+ this.pc.addTransceiver("video", {direction});
+ this.pc.addTransceiver("audio", {direction});
+
+ this.pc.onicecandidate = (evt) => this.onLocalCandidate(evt);
+ this.pc.oniceconnectionstatechange = () => this.onConnectionState();
+
+ this.pc.ontrack = (evt) => {
+ console.log("new track:", evt.track.kind);
+ document.getElementById(this.video).srcObject = evt.streams[0];
+ };
+
+ this.pc.createOffer()
+ .then((offer) => this.onLocalOffer(offer));
+ }
+
+ onLocalOffer(offer) {
+ this.offerData = parseOffer(offer.sdp);
+ this.pc.setLocalDescription(offer);
+
+ console.log("sending offer");
+ console.log(this.wurl);
+ fetch(this.wurl, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/sdp',
+ },
+ body: offer.sdp,
+ })
+ .then((res) => {
+ if (res.status !== 201) {
+ throw new Error('bad status code');
+ }
+ // this.eTag = res.headers.get('ETag');
+ this.eTag = res.headers.get("ETag") || res.headers.get('E-Tag');
+ return res.text();
+ })
+ .then((sdp) => this.onRemoteAnswer(new RTCSessionDescription({
+ type: 'answer',
+ sdp,
+ })))
+ .catch((err) => {
+ console.log('error: ' + err);
+ this.scheduleRestart();
+ });
+ }
+
+ onConnectionState() {
+ if (this.restartTimeout !== null) {
+ return;
+ }
+
+ console.log("peer connection state:", this.pc.iceConnectionState);
+
+ switch (this.pc.iceConnectionState) {
+ case "disconnected":
+ this.scheduleRestart();
+ }
+ }
+
+ onRemoteAnswer(answer) {
+ if (this.restartTimeout !== null) {
+ return;
+ }
+
+ this.pc.setRemoteDescription(new RTCSessionDescription(answer));
+
+ if (this.queuedCandidates.length !== 0) {
+ this.sendLocalCandidates(this.queuedCandidates);
+ this.queuedCandidates = [];
+ }
+ }
+
+ onLocalCandidate(evt) {
+ if (this.restartTimeout !== null) {
+ return;
+ }
+
+ if (evt.candidate !== null) {
+ if (this.eTag === '') {
+ this.queuedCandidates.push(evt.candidate);
+ } else {
+ this.sendLocalCandidates([evt.candidate])
+ }
+ }
+ }
+
+ sendLocalCandidates(candidates) {
+ fetch(this.wurl, {
+ method: 'PATCH',
+ headers: {
+ 'Content-Type': 'application/trickle-ice-sdpfrag',
+ 'If-Match': this.eTag,
+ },
+
+ body: generateSdpFragment(this.offerData, candidates),
+ })
+ .then((res) => {
+ if (res.status !== 204) {
+ throw new Error('bad status code');
+ }
+ })
+ .catch((err) => {
+ console.log('error: ' + err);
+ this.scheduleRestart();
+ });
+ }
+
+ scheduleRestart() {
+ if (this.restartTimeout !== null) {
+ return;
+ }
+
+ if (this.pc !== null) {
+ this.pc.close();
+ this.pc = null;
+ }
+
+ this.restartTimeout = window.setTimeout(() => {
+ this.restartTimeout = null;
+ this.start();
+ }, restartPause);
+
+ this.eTag = '';
+ this.queuedCandidates = [];
+ }
+
+ stop() {
+ if (this.pc) {
+ try {
+ this.pc.close();
+ } catch (e) {
+ console.log("Failure close peer connection:" + e);
+ }
+ this.pc = null;
+ }
+ }
}
- //棰勮瀹囪鐩告満
- function realViewYs(serverip, elem, username, password, ipaddr, port) {
- webRtcServer = new WebRtcStreamer(elem, "http://" + serverip + ":8000");
- let rtspUrl = "rtsp://" + username + ":" + password + "@" + ipaddr + ":" + port + "/media/video1/multicast";
- console.log("rtsp鍦板潃锛�" + rtspUrl);
- let option = "rtptransport=tcp";
- webRtcServer.connect(rtspUrl, null, option, null);
- videoMap.set(elem, webRtcServer);
- }
-
- function closeVideo(id, webrtc) {
- webrtc.disconnect();
- videoMap.delete(id);
- }
-
- //椤甸潰閫�鍑烘椂閿�姣�
- window.onbeforeunload = function () {
- webRtcServer.disconnect();
+ function realView(whepUrl, videoId) {
+ console.log(whepUrl)
+ webrtcClient = new WHEPClient(whepUrl, videoId);
}
</script>
-
</body>
</html>
\ No newline at end of file
--
Gitblit v1.9.3