<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Surfsky screencast</title></head>
<body>
<p id="status" role="status">Connecting…</p>
<canvas id="screen" aria-label="Live browser view" style="max-width:100%;height:auto"></canvas>
<script>
const canvas = document.getElementById("screen");
const context = canvas.getContext("2d");
const status = document.getElementById("status");
const ws = new WebSocket("SCREENCAST_URL_FROM_START_RESPONSE");
ws.onopen = () => { status.textContent = "Connected"; };
ws.onclose = () => { status.textContent = "Disconnected"; };
ws.onerror = () => { status.textContent = "Connection failed"; };
ws.onmessage = (event) => {
const frame = JSON.parse(event.data);
if (frame.type === "stopped") { status.textContent = "Stream ended"; return; }
if (frame.type !== "frame") return;
const img = new Image();
img.onload = () => {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
context.drawImage(img, 0, 0);
};
img.src = "data:image/jpeg;base64," + frame.data;
};
window.addEventListener("pagehide", () => ws.close());
</script>
</body>
</html>
