增加RTSP

This commit is contained in:
威勝 張 2024-02-01 21:51:22 +08:00
parent 4a4c9dd601
commit 832e3cc92d
3 changed files with 269 additions and 0 deletions

View File

@ -57,6 +57,11 @@ namespace Parking_spaces.Controllers
{
return View();
}
public IActionResult Engineering_RTSP()
{
return View();
}
public IActionResult Single_violation_detail(string id)
{
ViewBag.parking_spaces_name = id;

View File

@ -0,0 +1,263 @@

@{
ViewData["Title"] = "Engineering_RTSP";
Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
}
<style>
#img_id {
width: 50%;
display: block; /* 使圖像為塊級元素,以便使用 margin:auto; */
margin: auto; /* 將圖像置中 */
}
</style>
<h1>即時影像</h1>
<div>
<table class="table">
<thead>
<tr>
<th>
停車場位置
</th>
<th>
IP位置
</th>
<th>
使用Port
</th>
<th>
攝像頭使用模式
</th>
<th>
</th>
</tr>
</thead>
<tbody id="demo">
</tbody>
</table>
</div>
<!--彈跳視窗-->
<div>
<dialog id="webcam_view" style="width:80%;">
<div>
<button class="btn btn-danger" style="float:right" onclick="RTSP_Close();"> 關閉</button></br>
<img id="img_id" style="width:50%"/>
</div>
</dialog>
</div>
<!--獲取資料-->
<script>
var token = localStorage.getItem('token_park_space');
var token_ckeck //= document.getElementById("token_ckeck_id").value
var position //職位
function get_data() {
//token_check = document.getElementById("token_check_id").value
console.log(token_check)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Parking_spaces_cam",
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
success: function (Model) {
console.log(Model)
set_data(Model)
}
});
}
</script>
<!--放置資料-->
<script>
function set_data(Model) {
table = "<tr>";
console.log(Model.length)
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
if (Model[i].parking_spaces_name != null) {
if (parseInt(Model[i].port) > 400) {
table += "<td>" + Model[i].parking_spaces_name + "</td>"
table += "<td>" + Model[i].ip + "</td>"
table += "<td>" + Model[i].port + "</td>"
if (Model[i].mode == "pass") { mode = "停車場進出" }
if (Model[i].mode == "violation") { mode = "判斷違規左右轉" }
if (Model[i].mode == "car_num_check") { mode = "數量確認" }
table += "<td>" + mode + "</td>"
table += "<td>" + '<button class="btn btn-outline-success " onclick="CAM_RTSP(' + "'" + Model[i].ip + ":" + Model[i].port + "'" + ')">查看影像</button>'
}
table += "</tr>"
table += "<tr>"
}
}
}
document.getElementById("demo").innerHTML = table
}
</script>
<!--串流影像-->
<script>
var IP_1
var stop = false
function CAM_RTSP(IP) {
console.log(IP)
IP_1 = IP
$.ajax({
type: "GET",
url: 'http://140.125.21.65:7705/IP/'+IP,
headers: {
},
success: function (response) {
webcam_view.showModal()
stop = false
RTSP_START(response)
token_check = "true"
//from_token_import_id()
},
});
}
function CAM_RTSP_1() {
console.log(IP_1)
$.ajax({
type: "GET",
url: 'http://140.125.21.65:7705/IP/' + IP_1,
headers: {
},
success: function (response) {
//webcam_view.showModal()
RTSP_START(response)
token_check = "true"
//from_token_import_id()
},
});
}
</script>
<!--開啟視窗並串流-->
<script>
function RTSP_START(img_base_64) {
//console.log(img)
img = document.getElementById("img_id")
img.src = img_base_64
if (stop == false){
setTimeout('CAM_RTSP_1()', 100);
}
}
</script>
<!--關閉串流-->
<script>
function RTSP_Close(){
webcam_view.close()
stop = true
}
</script>
<!--檢查token-->
<script>
function token_check() {
// 检查本地存储中是否存在JWT令牌
var token = localStorage.getItem('token_park_space');
console.log(token)
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token_check',
headers: {
'Authorization': token
},
success: function (response) {
console.log(response)
token_check = "true"
from_token_import_id()
},
error: function (xhr) {
console.log("1")
token_check = "false"
window.location.href = '/';
//get_data()
// 处理错误响应,例如跳转到未授权页面
//window.location.href = 'https://example.com/unauthorized_page';
}
});
}
function from_token_import_id() {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token-' + token,
headers: {
'Authorization': token
},
success: function (response) {
console.log(response)
from_id_import_user_data(response)
}
});
}
function from_id_import_user_data(id) {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/user_id-' + id,
headers: {
'Authorization': token
},
success: function (model) {
model = model.result
position = model.lastname
console.log(position)
if (position == "engineer") {
get_data()
}
else {
window.location.href = '/';
}
}
});
}
</script>
<!--開機自啟-->
<script>
window.onload = token_check;
</script>

View File

@ -78,6 +78,7 @@
<a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_CAM">查看WEBCAM</a>
<a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_LED">字幕機顯示</a>
<a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_Violation"> 違規區域</a>
<a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_RTSP"> 即時影像</a>
</div>
</div>
</li>