2021-06-07 17:43:36 -07:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
2023-11-08 16:40:49 -05:00
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
#content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
#content img {
|
|
|
|
|
width: 640px;
|
|
|
|
|
height: 480px;
|
|
|
|
|
margin: 2rem;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
const ws = new WebSocket(window.location.href.replace("http", "ws") + "ws");
|
|
|
|
|
ws.addEventListener("message", (event) => handleMessage(event.data));
|
2021-06-07 17:43:36 -07:00
|
|
|
|
2023-11-08 16:40:49 -05:00
|
|
|
const unusedElems = [];
|
2021-06-07 17:43:36 -07:00
|
|
|
|
2023-11-08 16:40:49 -05:00
|
|
|
function handleMessage(resp) {
|
|
|
|
|
resp = JSON.parse(resp);
|
2021-06-07 17:43:36 -07:00
|
|
|
|
2023-11-08 16:40:49 -05:00
|
|
|
switch (resp.msg) {
|
|
|
|
|
case "screencast":
|
|
|
|
|
img = createImage(resp.id);
|
|
|
|
|
if (resp.data) {
|
|
|
|
|
setImageData(img, resp.data);
|
2023-11-08 14:37:57 -05:00
|
|
|
}
|
2023-11-08 16:40:49 -05:00
|
|
|
break;
|
2021-06-07 17:43:36 -07:00
|
|
|
|
2023-11-08 16:40:49 -05:00
|
|
|
case "close":
|
|
|
|
|
img = unuseImage(resp.id);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-06-07 17:43:36 -07:00
|
|
|
|
2023-11-08 16:40:49 -05:00
|
|
|
function setImageData(img, data) {
|
|
|
|
|
//img.style.display = "";
|
|
|
|
|
img.src = "data:image/png;base64," + data;
|
|
|
|
|
}
|
2021-06-07 17:43:36 -07:00
|
|
|
|
2023-11-08 16:40:49 -05:00
|
|
|
function createImage(id) {
|
|
|
|
|
let elem = document.getElementById(id);
|
|
|
|
|
if (elem) {
|
|
|
|
|
return elem;
|
|
|
|
|
}
|
2021-06-07 17:43:36 -07:00
|
|
|
|
2023-11-08 16:40:49 -05:00
|
|
|
if (unusedElems.length) {
|
|
|
|
|
elem = unusedElems.shift();
|
|
|
|
|
elem.setAttribute("id", id);
|
|
|
|
|
return elem;
|
|
|
|
|
}
|
2021-06-07 17:43:36 -07:00
|
|
|
|
2023-11-08 16:40:49 -05:00
|
|
|
elem = document.createElement("img");
|
|
|
|
|
elem.setAttribute("id", id);
|
|
|
|
|
document.getElementById("content").appendChild(elem);
|
|
|
|
|
return elem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function unuseImage(id) {
|
|
|
|
|
const elem = document.getElementById(id);
|
|
|
|
|
if (!elem) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
//elem.style.display = "none";
|
|
|
|
|
unusedElems.push(elem);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="content">
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
