mirror of
https://github.com/0015/ThatProject.git
synced 2026-01-12 09:17:42 +03:00
129 lines
4.7 KiB
HTML
129 lines
4.7 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="/styles.css">
|
|
<title>Web browser Client</title>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>MULTIPLE ESP32CAM DASHBOARD</h1>
|
|
<div class="cards">
|
|
<div class="card">
|
|
<img id="ESP32-1" src="" />
|
|
<h2><b>CAM 1 Live <span class="dot" id="cam_1_red_dot" style="visibility: hidden;"></span></b></h2>
|
|
<button class="button" id="cam_1_enabler" onclick="buttonFunc('cam_1_enabler')">Play</button>
|
|
<button class="button" id="cam_1_save" onclick="saveFunc('cam_1_enabler')" style="background-color: #008cba;">Save to Image</button>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<img id="ESP32-2" src="" />
|
|
<h2><b>CAM 2 Live <span class="dot" id="cam_2_red_dot" style="visibility: hidden;"></span></b></h2>
|
|
<button class="button" id="cam_2_enabler" onclick="buttonFunc('cam_2_enabler')">Play</button>
|
|
<button class="button" id="cam_2_save" onclick="saveFunc('cam_2_enabler')" style="background-color: #008cba;">Save to Image</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const img_1 = document.getElementById("ESP32-1");
|
|
const img_2 = document.getElementById("ESP32-2");
|
|
var imageFrame;
|
|
|
|
const WS_URL = 'ws:///<YOUR_LOCAL_IP_ADDRESS_HERE>:8888';
|
|
const ws = new WebSocket(WS_URL);
|
|
let urlObject_1, urlObject_2;
|
|
|
|
window["cam_1_enabler"] = false;
|
|
window["cam_2_enabler"] = false;
|
|
|
|
function saveFunc(source){
|
|
var blobUrl = source === "cam_1_enabler" ? img_1.src : img_2.src;
|
|
if(blobUrl.indexOf("blob") == -1){
|
|
return;
|
|
}
|
|
var fileName = getFomattedTime(source === "cam_1_enabler" ? "ESP32CAM1" : "ESP32CAM2") + ".jpeg";
|
|
forceDownload(blobUrl, fileName);
|
|
}
|
|
|
|
function getFomattedTime(camInfo){
|
|
var today = new Date();
|
|
var y = today.getFullYear();
|
|
var m = today.getMonth() + 1;
|
|
var d = today.getDate();
|
|
var h = today.getHours();
|
|
var mi = today.getMinutes();
|
|
var s = today.getSeconds();
|
|
return camInfo + "-" + y + "-" + m + "-" + d + "-" + h + "-" + mi + "-" + s;
|
|
}
|
|
|
|
function forceDownload(url, fileName){
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", url, true);
|
|
xhr.responseType = "blob";
|
|
xhr.onload = function (){
|
|
var urlCreator = window.URL || window.webkitURL;
|
|
var imageUrl = urlCreator.createObjectURL(this.response);
|
|
var tag = document.createElement("a");
|
|
tag.href = imageUrl;
|
|
tag.download = fileName;
|
|
document.body.appendChild(tag);
|
|
tag.click();
|
|
document.body.removeChild(tag);
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
function buttonFunc(source){
|
|
var x = document.getElementById(source);
|
|
if(x.innerHTML === "Play"){
|
|
x.innerHTML = "Pause";
|
|
window[source] = true;
|
|
}else{
|
|
x.innerHTML = "Play";
|
|
window[source] = false;
|
|
}
|
|
}
|
|
|
|
function hideRedDot(){
|
|
document.getElementById("cam_1_red_dot").style.visibility = "hidden";
|
|
document.getElementById("cam_2_red_dot").style.visibility = "hidden";
|
|
}
|
|
|
|
setInterval(hideRedDot, 1000);
|
|
|
|
ws.onopen = () => {
|
|
console.log(`Connected to ${WS_URL}`);
|
|
ws.send("WEB_CLIENT");
|
|
};
|
|
|
|
ws.onmessage = async (message) => {
|
|
const arrayBuffer = message.data;
|
|
|
|
var blobObj = new Blob([arrayBuffer]);
|
|
const buf = await blobObj.arrayBuffer();
|
|
var uint8 = new Uint8Array(buf.slice(12, 13));
|
|
var currentCam = uint8[0];
|
|
console.log("current Cam: ", currentCam);
|
|
|
|
if(currentCam == 1){
|
|
imageFrame = img_1;
|
|
document.getElementById("cam_1_red_dot").style.visibility = "visible";
|
|
if(!window["cam_1_enabler"]) return;
|
|
if (urlObject_1) {
|
|
URL.revokeObjectURL(urlObject_1);
|
|
}
|
|
urlObject_1 = URL.createObjectURL(blobObj);
|
|
imageFrame.src = urlObject_1;
|
|
}else{
|
|
imageFrame = img_2;
|
|
document.getElementById("cam_2_red_dot").style.visibility = "visible";
|
|
if (!window["cam_2_enabler"]) return;
|
|
if (urlObject_2) {
|
|
URL.revokeObjectURL(urlObject_2);
|
|
}
|
|
urlObject_2 = URL.createObjectURL(blobObj);
|
|
imageFrame.src = urlObject_2;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |