新增校園相機
This commit is contained in:
parent
8c3fd0caff
commit
f6bc0a837a
@ -99,7 +99,8 @@
|
||||
<h6 class="m-0 font-weight-bold text-primary">即時影像</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>
|
||||
<!--
|
||||
<button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>-->
|
||||
<br />
|
||||
<br />
|
||||
<div id="myMap"></div>
|
||||
@ -656,6 +657,47 @@
|
||||
|
||||
});
|
||||
}
|
||||
function CAM_RTSP_2(IP) {
|
||||
console.log(IP)
|
||||
IP_1 = IP
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: 'http://140.125.50.178:5000/IP/' + IP,
|
||||
headers: {
|
||||
'Authorization': token
|
||||
},
|
||||
success: function (response) {
|
||||
stop = false
|
||||
RTSP_START_2(response)
|
||||
token_check = "true"
|
||||
//from_token_import_id()
|
||||
},
|
||||
error: function (xhr) {
|
||||
console.log("111")
|
||||
window.alert("相機未連線");
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function CAM_RTSP_3() {
|
||||
console.log(IP_1)
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: 'http://140.125.50.178:5000/IP/' + IP_1,
|
||||
headers: {
|
||||
'Authorization': token
|
||||
},
|
||||
success: function (response) {
|
||||
//webcam_view.showModal()
|
||||
RTSP_START_2(response)
|
||||
|
||||
token_check = "true"
|
||||
//from_token_import_id()
|
||||
},
|
||||
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -670,12 +712,23 @@
|
||||
}
|
||||
|
||||
}
|
||||
function RTSP_START_2(img_base_64) {
|
||||
//console.log(img)
|
||||
img = document.getElementById("img_id")
|
||||
img.src = img_base_64
|
||||
if (stop == false) {
|
||||
setTimeout('CAM_RTSP_3()', 20);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--關閉串流-->
|
||||
<script>
|
||||
function RTSP_Close() {
|
||||
RTSP_view.close()
|
||||
img = document.getElementById("img_id")
|
||||
img.src = ''
|
||||
stop = true
|
||||
}
|
||||
</script>
|
||||
@ -708,6 +761,14 @@
|
||||
}).addTo(map);
|
||||
};
|
||||
|
||||
for (var i = 0; i < Y_location_name_list.length; i++) {
|
||||
var location = [Y_location_lat_list[i], Y_location_lng_list[i]];
|
||||
cam_ip = L.marker(location, {
|
||||
icon: cam_icon,
|
||||
title: "",
|
||||
opacity: 1.0
|
||||
}).addTo(map);
|
||||
};
|
||||
|
||||
// 載入圖資
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
@ -723,16 +784,28 @@
|
||||
lng = e.latlng.lng; // 經度
|
||||
////console.log(lat, lng)
|
||||
|
||||
//自己的
|
||||
for (var i = 0; i < location_name_list.length; i++) {
|
||||
var location = [location_lat_list[i], location_lng_list[i]];
|
||||
if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
|
||||
////console.log()
|
||||
//console.log()
|
||||
get_RTSP_data_3(location_name_list[i])
|
||||
//CAM_RTSP('192.168.100.82')
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//雲科校園的
|
||||
for (var i = 0; i < Y_location_name_list.length; i++) {
|
||||
var location = [Y_location_lat_list[i], Y_location_lng_list[i]];
|
||||
if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
|
||||
//console.log()
|
||||
get_RTSP_data_5(Y_location_name_list[i])
|
||||
//CAM_RTSP('192.168.100.82')
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -760,6 +833,10 @@
|
||||
var location_lat_list = []
|
||||
var location_lng_list = []
|
||||
|
||||
var Y_location_name_list = []
|
||||
var Y_location_lat_list = []
|
||||
var Y_location_lng_list = []
|
||||
|
||||
function get_RTSP_data() {
|
||||
//token_check = document.getElementById("token_check_id").value
|
||||
|
||||
@ -791,11 +868,29 @@
|
||||
contentType: "application/json",
|
||||
success: function (Model) {
|
||||
set_RTSP_data_2(Model)
|
||||
map_show()
|
||||
get_RTSP_data_4()
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function get_RTSP_data_4() {
|
||||
//token_check = document.getElementById("token_check_id").value
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "http://140.125.20.183:7700/api/Yuntech_cam_total_table",
|
||||
data: {},
|
||||
headers: {
|
||||
'Authorization': token
|
||||
},
|
||||
contentType: "application/json",
|
||||
success: function (Model) {
|
||||
console.log(Model)
|
||||
set_RTSP_data_4(Model)
|
||||
map_show()
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var location_name
|
||||
function get_RTSP_data_3(location_name) {
|
||||
@ -817,6 +912,25 @@
|
||||
});
|
||||
}
|
||||
|
||||
function get_RTSP_data_5(location_name) {
|
||||
location_name = location_name
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "http://140.125.20.183:7700/api/Yuntech_cam",
|
||||
data: {},
|
||||
headers: {
|
||||
'Authorization': token
|
||||
},
|
||||
contentType: "application/json",
|
||||
success: function (Model) {
|
||||
console.log(location_name)
|
||||
set_RTSP_data_5(Model, location_name)
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -852,6 +966,20 @@
|
||||
|
||||
}
|
||||
|
||||
function set_RTSP_data_4(Model) {
|
||||
for (var i = 0; i < Model.length; i++) {
|
||||
|
||||
var hasValue = Y_location_name_list.includes(Model[i].location_name);
|
||||
if (hasValue == false) {
|
||||
Y_location_name_list.push(Model[i].location_name)
|
||||
Y_location_lat_list.push(Model[i].latitude)
|
||||
Y_location_lng_list.push(Model[i].longitude)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function set_RTSP_data_3(Model, location_name) {
|
||||
Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP(';
|
||||
var i1 = 0
|
||||
@ -875,7 +1003,26 @@
|
||||
|
||||
}
|
||||
|
||||
function set_RTSP_data_5(Model, location_name) {
|
||||
Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
|
||||
var i1 = 0
|
||||
if (Model.length > 0) {
|
||||
for (var i = 0; i < Model.length; i++) {
|
||||
if (Model[i].location_name == location_name) {
|
||||
i1 = i1 + 1
|
||||
console.log(Model[i].ip)
|
||||
Button += "'" + Model[i].ip + "'" + ')">' + Model[i].ip + '</button>'
|
||||
Button += '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
|
||||
if (i1 == 1) {
|
||||
CAM_RTSP_2(Model[i].ip)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
document.getElementById("choose_cam_id").innerHTML = Button
|
||||
RTSP_view.showModal()
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
@ -34,8 +34,9 @@
|
||||
</style>
|
||||
|
||||
<h1>即時影像</h1>
|
||||
<!--
|
||||
<button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>
|
||||
|
||||
-->
|
||||
|
||||
|
||||
<div>
|
||||
@ -107,6 +108,48 @@
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function CAM_RTSP_2(IP) {
|
||||
console.log(IP)
|
||||
IP_1 = IP
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: 'http://140.125.50.178:5000/IP/' + IP,
|
||||
headers: {
|
||||
'Authorization': token
|
||||
},
|
||||
success: function (response) {
|
||||
stop = false
|
||||
RTSP_START_2(response)
|
||||
token_check = "true"
|
||||
//from_token_import_id()
|
||||
},
|
||||
error: function (xhr) {
|
||||
console.log("111")
|
||||
window.alert("相機未連線");
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function CAM_RTSP_3() {
|
||||
console.log(IP_1)
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: 'http://140.125.50.178:5000/IP/' + IP_1,
|
||||
headers: {
|
||||
'Authorization': token
|
||||
},
|
||||
success: function (response) {
|
||||
//webcam_view.showModal()
|
||||
RTSP_START_2(response)
|
||||
|
||||
token_check = "true"
|
||||
//from_token_import_id()
|
||||
},
|
||||
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -121,12 +164,24 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function RTSP_START_2(img_base_64) {
|
||||
//console.log(img)
|
||||
img = document.getElementById("img_id")
|
||||
img.src = img_base_64
|
||||
if (stop == false) {
|
||||
setTimeout('CAM_RTSP_3()', 20);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--關閉串流-->
|
||||
<script>
|
||||
function RTSP_Close() {
|
||||
RTSP_view.close()
|
||||
img = document.getElementById("img_id")
|
||||
img.src = ''
|
||||
stop = true
|
||||
}
|
||||
</script>
|
||||
@ -136,7 +191,6 @@
|
||||
var map
|
||||
function map_show() {
|
||||
var centerCoordinates = [23.691951, 120.535318]; // Replace with your desired coordinates
|
||||
|
||||
map = L.map("myMap", {
|
||||
center: centerCoordinates,
|
||||
zoom: 17
|
||||
@ -158,6 +212,15 @@
|
||||
opacity: 1.0
|
||||
}).addTo(map);
|
||||
};
|
||||
|
||||
for (var i = 0; i < Y_location_name_list.length; i++) {
|
||||
var location = [Y_location_lat_list[i], Y_location_lng_list[i]];
|
||||
cam_ip = L.marker(location, {
|
||||
icon: cam_icon,
|
||||
title: "",
|
||||
opacity: 1.0
|
||||
}).addTo(map);
|
||||
};
|
||||
|
||||
|
||||
// 載入圖資
|
||||
@ -172,8 +235,8 @@
|
||||
function onMapClick(e) {
|
||||
lat = e.latlng.lat; // 緯度
|
||||
lng = e.latlng.lng; // 經度
|
||||
//console.log(lat, lng)
|
||||
|
||||
//自己的
|
||||
for (var i = 0; i < location_name_list.length; i++) {
|
||||
var location = [location_lat_list[i], location_lng_list[i]];
|
||||
if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
|
||||
@ -184,6 +247,17 @@
|
||||
|
||||
};
|
||||
|
||||
//雲科校園的
|
||||
for (var i = 0; i < Y_location_name_list.length; i++) {
|
||||
var location = [Y_location_lat_list[i], Y_location_lng_list[i]];
|
||||
if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
|
||||
//console.log()
|
||||
get_data_5(Y_location_name_list[i])
|
||||
//CAM_RTSP('192.168.100.82')
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -211,6 +285,10 @@
|
||||
var location_lat_list=[]
|
||||
var location_lng_list=[]
|
||||
|
||||
var Y_location_name_list = []
|
||||
var Y_location_lat_list = []
|
||||
var Y_location_lng_list = []
|
||||
|
||||
function get_data() {
|
||||
//token_check = document.getElementById("token_check_id").value
|
||||
|
||||
@ -242,6 +320,25 @@
|
||||
contentType: "application/json",
|
||||
success: function (Model) {
|
||||
set_data_2(Model)
|
||||
get_data_4()
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function get_data_4() {
|
||||
//token_check = document.getElementById("token_check_id").value
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "http://140.125.20.183:7700/api/Yuntech_cam_total_table",
|
||||
data: {},
|
||||
headers: {
|
||||
'Authorization': token
|
||||
},
|
||||
contentType: "application/json",
|
||||
success: function (Model) {
|
||||
console.log(Model)
|
||||
set_data_4(Model)
|
||||
map_show()
|
||||
}
|
||||
});
|
||||
@ -267,6 +364,25 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function get_data_5(location_name) {
|
||||
location_name = location_name
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "http://140.125.20.183:7700/api/Yuntech_cam",
|
||||
data: {},
|
||||
headers: {
|
||||
'Authorization': token
|
||||
},
|
||||
contentType: "application/json",
|
||||
success: function (Model) {
|
||||
console.log(location_name)
|
||||
set_data_5(Model, location_name)
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -299,10 +415,23 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function set_data_4(Model) {
|
||||
for (var i = 0; i < Model.length; i++) {
|
||||
|
||||
var hasValue = Y_location_name_list.includes(Model[i].location_name);
|
||||
if (hasValue == false) {
|
||||
Y_location_name_list.push(Model[i].location_name)
|
||||
Y_location_lat_list.push(Model[i].latitude)
|
||||
Y_location_lng_list.push(Model[i].longitude)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function set_data_3(Model, location_name) {
|
||||
Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP(';
|
||||
var i1=0
|
||||
@ -325,6 +454,27 @@
|
||||
RTSP_view.showModal()
|
||||
|
||||
}
|
||||
|
||||
function set_data_5(Model, location_name) {
|
||||
Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
|
||||
var i1 = 0
|
||||
if (Model.length > 0) {
|
||||
for (var i = 0; i < Model.length; i++) {
|
||||
if (Model[i].location_name == location_name) {
|
||||
i1 = i1 + 1
|
||||
console.log(Model[i].ip)
|
||||
Button += "'" + Model[i].ip + "'" + ')">' + Model[i].ip + '</button>'
|
||||
Button += '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
|
||||
if (i1 == 1) {
|
||||
CAM_RTSP_2(Model[i].ip )
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
document.getElementById("choose_cam_id").innerHTML = Button
|
||||
RTSP_view.showModal()
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user