From 76817b8c752b12030ab285bcb5b2effebfa9a248 Mon Sep 17 00:00:00 2001
From: ‘liusuyi’ <1951119284@qq.com>
Date: 星期六, 26 八月 2023 17:29:14 +0800
Subject: [PATCH] 流媒体增加webrtc和rtmp协议推拉流
---
ard-work/src/main/resources/templates/test.html | 288 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 176 insertions(+), 112 deletions(-)
diff --git a/ard-work/src/main/resources/templates/test.html b/ard-work/src/main/resources/templates/test.html
index f9c520f..a55bf5e 100644
--- a/ard-work/src/main/resources/templates/test.html
+++ b/ard-work/src/main/resources/templates/test.html
@@ -9,117 +9,147 @@
<link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
<script th:src="@{/js/bootstrap.js}"></script>
<style>
- .top-buffer { margin-top:10px; }
+ .top-buffer {
+ 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="dropdown">
- 鐩告満id锛�
- <select id="select">
- </select>
- </div>
+ <div class="row ">
+ <div class="dropdown">
+ 鐩告満id锛�<select id="select">
+ </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>
- </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 top-buffer">
+ <div class="col-md-1 col-md-offset-1">
+ <button id="up" type="button" class="btn btn-primary">涓�</button>
</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 top-buffer">
- <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="col-md-4 col-md-offset-3">
<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: 400px;padding: 5px 5px;"/>
- </div>
- <div class="col-md-6">
- <video id="video" muted autoplay loop controls style="width: 800px; height: 100%; object-fit: fill" />
+ <button id="controlZoomIn" type="button" class="btn btn-primary">璋冪劍-</button>
+ <button id="controlZoomOut" type="button" class="btn btn-primary">璋冪劍+</button>
</div>
</div>
</div>
-</body>
+ <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>
+ <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, token;
+ var cameraId, opt,optOpen,optClose, token;
window.onload = function () {
$.ajax({
url: "../hik/list",
@@ -130,11 +160,14 @@
for (var i = 0; i < arr.length; i++) {
console.log(arr[i].id);
var camera = {
- type: arr[i].type,
+ type: arr[i].gdtype,
ipaddr: arr[i].ip,
username: arr[i].username,
password: arr[i].password,
- port: 554
+ port: arr[i].rtspPort,
+ longitude: arr[i].longitude,
+ latitude: arr[i].latitude,
+ altitude: arr[i].altitude
};
cameraMap.set(arr[i].id, camera);
//鍏堝垱寤哄ソselect閲岄潰鐨刼ption鍏冪礌
@@ -146,6 +179,7 @@
}
}
})
+
opt = {"username": "admin", "password": "admin123"};
$.ajax({
headers: {
@@ -378,6 +412,34 @@
}
})
})
+ $("#setTargetPostion").click(function () {
+ cameraId = $('#select option:selected').val();
+ var camera = cameraMap.get(cameraId);
+ var camP = camera.longitude + ',' + camera.latitude + ',' + camera.altitude;
+ var targetP = $('#targetPostion').val();
+ //瀹氫箟涓�涓甫鏈塎ap瀛楁鐨勫疄浣撳璞�
+ var myEntity = {
+ channelNum: 1,
+ cameraId: cameraId,
+ targetPosition: targetP,
+ camPosition: camP,
+ };
+ console.log(myEntity)
+ $.ajax({
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ 'Authorization': token
+ },
+ url: "../hik/setTargetPosition",
+ type: "post",
+ dataType: "json",
+ data: JSON.stringify(myEntity),
+ success: function (data) {
+ console.log(data);
+ }
+ })
+ })
$("#setZeroPTZ").click(function () {
cameraId = $('#select option:selected').val();
opt = {"cameraId": cameraId, "channelNum": 1};
@@ -417,8 +479,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, "channelNum": 1, "enable": true};
+ optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false};
if (defogflag) {
$(this).text("鍏抽棴閫忛浘");
defogflag = false;
@@ -459,8 +521,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, "channelNum": 1, "enable": true};
+ optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false};
if (infrareflag) {
$(this).text("鍏抽棴绾㈠");
infrareflag = false;
@@ -501,8 +563,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, "channelNum": 1, "enable": true};
+ optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false};
if (focusModeflag) {
$(this).text("鑷姩鑱氱劍");
focusModeflag = false;
@@ -635,7 +697,7 @@
data: JSON.stringify(opt),
success: function (data) {
console.log(data.data);
- $("#imgContainer").attr("src","data:image/png;base64,"+data.data);
+ $("#imgContainer").attr("src", "data:image/png;base64," + data.data);
}
})
})
@@ -699,6 +761,7 @@
})
}
})
+
var cameraMap = new Map();
/*浜戝彴鍏叡鏂规硶*/
@@ -737,11 +800,10 @@
} else if (camera.type == "dh") {
realViewDh("127.0.0.1", ID, camera.username, camera.password, camera.ipaddr, camera.port);
} else {
- realViewHik("192.168.1.15", ID, camera.username, camera.password, camera.ipaddr, "21500");
+ realViewHik("127.0.0.1", ID, camera.username, camera.password, camera.ipaddr, camera.port);
}
}
});
-
//棰勮娴峰悍鐩告満
function realViewHik(serverip, elem, username, password, ipaddr, port) {
@@ -784,4 +846,6 @@
webRtcServer.disconnect();
}
</script>
+
+</body>
</html>
\ No newline at end of file
--
Gitblit v1.9.3