<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<title>Watching: {{ username }}</title>
</head>
<body>
<h1>Watching Stream of {{ username }}</h1>
<img id="videoFeed" style="width: 100%; max-width: 800px;" />
<script>
const username = "{{ username }}";
// 1) Force only WebSocket
const socket = io({ transports: ["websocket"] });
// Join the room as a watcher
socket.emit("join_room", { username });
socket.on("connect", () => {
console.log("Connected as watcher for", username);
});
// Listen for binary frames
socket.on("video_frame", (data) => {
// data = { username, frame: <binary> }
if (data.username === username && data.frame) {
// Reconstruct a Blob from the received 'frame' (binary)
const blob = new Blob([data.frame], { type: "image/jpeg" });
document.getElementById("videoFeed").src = URL.createObjectURL(blob);
}
});
socket.on("disconnect", () => {
console.log("Disconnected");
});
</script>
</body>
</html>
