mirror of
https://github.com/0015/ThatProject.git
synced 2026-01-12 09:17:42 +03:00
55 lines
1.4 KiB
HTML
55 lines
1.4 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</b></h2>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<img id="ESP32-2" src="" />
|
|
<h2><b>CAM 2</b></h2>
|
|
</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;
|
|
ws.onopen = () => {
|
|
console.log(`Connected to ${WS_URL}`);
|
|
ws.send("WEB_CLIENT");
|
|
};
|
|
|
|
ws.onmessage = async (message) => {
|
|
const arrayBuffer = message.data;
|
|
if (urlObject) {
|
|
URL.revokeObjectURL(urlObject);
|
|
}
|
|
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);
|
|
|
|
imageFrame = (currentCam == 1) ? img_1 : img_2;
|
|
|
|
|
|
urlObject = URL.createObjectURL(blobObj);
|
|
imageFrame.src = urlObject;
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |