<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <!-- Force only WebSocket transport -->
  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
  <title>Streaming: {{ username }}</title>
</head>
<body>
  <h1>Streaming as {{ username }}</h1>
  <video id="webcam" autoplay playsinline muted></video>

<script>
  const username = "{{ username }}";
  // 1) Force only WebSocket
  const socket = io({ transports: ["websocket"] });

  // Join the room as a streamer
  socket.emit("join_room", { username });

  socket.on("connect", () => {
    console.log("Connected as streamer for", username);
    startWebcam();
  });

  socket.on("disconnect", () => {
    console.log("Disconnected");
  });

  async function startWebcam() {
    try {
      const constraints = {
        video: {
          width: { ideal: 640 },
          height: { ideal: 480 },
          frameRate: { ideal: 15 }
        },
        audio: false
      };

      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      const videoElement = document.getElementById("webcam");
      videoElement.srcObject = stream;

      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      const track = stream.getVideoTracks()[0];
      const settings = track.getSettings();
      canvas.width = settings.width || 640;
      canvas.height = settings.height || 480;

      // Send frames (binary) ~5 times per second
      setInterval(() => {
        context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
        // Instead of .toDataURL(), use .toBlob() for binary
        canvas.toBlob((blob) => {
          if (!blob) return;
          socket.emit("stream_frame", {
            username: username,
            frame: blob
          });
        }, "image/jpeg", 0.5); // 'image/jpeg' @ 50% quality
      }, 200);
    } catch (err) {
      console.error("Error accessing webcam:", err);
    }
  }
</script>

</body>
</html>

