basic.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="dark" />
    <title>OpenStreamGrid Browser Demo</title>
    <style>
      :root {
        color-scheme: dark;
        --bg: #070a10;
        --surface: #111925;
        --raised: #172231;
        --border: #27364c;
        --text: #f5f8fc;
        --muted: #8d9bb0;
        --p2p: #36d4ef;
        --origin: #a78bfa;
        --ok: #3bd596;
        --warn: #ffbd59;
        --error: #ff6b7a;
      }
      * { box-sizing: border-box; }
      body {
        min-width: 320px;
        min-height: 100vh;
        margin: 0;
        background:
          radial-gradient(circle at 10% 0, rgba(54, 212, 239, .13), transparent 30rem),
          radial-gradient(circle at 95% 5%, rgba(167, 139, 250, .1), transparent 28rem),
          var(--bg);
        color: var(--text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
      }
      main { width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: 44px 0 56px; }
      header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
      .eyebrow { margin: 0 0 8px; color: var(--p2p); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
      h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: -.05em; }
      .subtitle { max-width: 640px; margin: 10px 0 0; color: var(--muted); line-height: 1.55; }
      .pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 999px; background: rgba(17, 25, 37, .88); color: var(--muted); font-size: .78rem; font-weight: 750; white-space: nowrap; }
      .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
      .pill[data-state="connected"] .dot { background: var(--ok); box-shadow: 0 0 0 5px rgba(59, 213, 150, .1); }
      .pill[data-state="offline"] .dot { background: var(--error); }
      .player { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #000; box-shadow: 0 28px 70px rgba(0, 0, 0, .34); }
      video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
      .player-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: var(--surface); }
      .source[data-source="p2p"] { color: var(--p2p); border-color: rgba(54, 212, 239, .4); }
      .source[data-source="p2p"] .dot { background: var(--p2p); }
      .source[data-source="origin"] { color: var(--origin); border-color: rgba(167, 139, 250, .4); }
      .source[data-source="origin"] .dot { background: var(--origin); }
      .actions { display: flex; gap: 9px; }
      button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--p2p); color: #03151a; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
      button.secondary { border: 1px solid var(--border); background: transparent; color: var(--text); }
      button:disabled { cursor: not-allowed; opacity: .45; }
      .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
      .card { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, rgba(23, 34, 49, .96), rgba(13, 20, 30, .96)); }
      .label { color: var(--muted); font-size: .71rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
      .value { display: block; margin-top: 9px; overflow: hidden; font-size: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
      .log-card { margin-top: 16px; padding: 0; overflow: hidden; }
      .log-header { display: flex; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); }
      .log-header h2 { margin: 0; font-size: .9rem; }
      .log-header span { color: var(--muted); font-size: .75rem; }
      #event-log { min-height: 110px; max-height: 210px; margin: 0; padding: 14px 18px; overflow: auto; color: #b8c4d5; font: .77rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
      .p2p-event { color: var(--p2p); }
      .origin-event { color: var(--origin); }
      .error-event { color: var(--error); }
      @media (max-width: 700px) {
        main { width: min(100% - 20px, 1040px); padding-top: 28px; }
        header { align-items: flex-start; flex-direction: column; }
        .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .player-footer { align-items: flex-start; flex-direction: column; }
        .actions { width: 100%; }
        button { flex: 1; }
      }
    </style>
  </head>
  <body>
    <main>
      <header>
        <div>
          <p class="eyebrow">Browser SDK example</p>
          <h1>Hybrid live delivery</h1>
          <p class="subtitle">OpenStreamGrid tries the peer mesh first and automatically uses the origin when P2P cannot meet playback needs.</p>
        </div>
        <div id="tracker-status" class="pill" data-state="ready" role="status"><span class="dot"></span><span id="tracker-label">Ready to connect</span></div>
      </header>

      <section class="player" aria-label="Live stream player">
        <video id="video" controls muted playsinline></video>
        <div class="player-footer">
          <div id="source" class="pill source" data-source="idle"><span class="dot"></span><span id="source-label">Waiting for playback</span></div>
          <div class="actions"><button id="start" type="button">Start demo</button><button id="stop" class="secondary" type="button" disabled>Stop</button></div>
        </div>
      </section>

      <section class="stats" aria-label="Delivery statistics">
        <article class="card"><span class="label">Available peers</span><strong id="peers" class="value">0</strong></article>
        <article class="card"><span class="label">P2P downloaded</span><strong id="p2p-bytes" class="value">0 B</strong></article>
        <article class="card"><span class="label">Origin / CDN</span><strong id="origin-bytes" class="value">0 B</strong></article>
        <article class="card"><span class="label">P2P traffic share</span><strong id="p2p-share" class="value">0.0%</strong></article>
      </section>

      <section class="card log-card">
        <div class="log-header"><h2>Delivery events</h2><span>Live SDK diagnostics</span></div>
        <pre id="event-log" aria-live="polite">Start the demo to connect to localhost:7070.</pre>
      </section>
    </main>

    <!-- Step 1: load Hls.js; the SDK will replace its segment loader. -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@1.6.16/dist/hls.min.js"></script>
    <script type="module">
      // Step 2: import the SDK bundle generated by `npm --prefix sdk run build`.
      import { OpenStreamGridHlsPlugin } from "../dist/sdk.js";

      // Step 3: use local demo endpoints, with optional URL query overrides.
      const params = new URLSearchParams(location.search);
      const trackerUrl = params.get("tracker") || "http://localhost:7070";
      const broadcastId = params.get("broadcast") || "live";
      const streamUrl = params.get("stream") || "http://localhost:8080/hls/stream.m3u8";
      const originBaseUrl = params.get("origin") || "http://localhost:8080/hls";
      const $ = (id) => document.getElementById(id);
      const elements = { video: $("video"), start: $("start"), stop: $("stop"), tracker: $("tracker-status"), trackerLabel: $("tracker-label"), source: $("source"), sourceLabel: $("source-label"), peers: $("peers"), p2pBytes: $("p2p-bytes"), originBytes: $("origin-bytes"), p2pShare: $("p2p-share"), log: $("event-log") };
      let hls;
      let plugin;
      let statsTimer;

      const bytes = (value) => value < 1024 ? `${value} B` : value < 1024 ** 2 ? `${(value / 1024).toFixed(1)} KB` : `${(value / 1024 ** 2).toFixed(1)} MB`;
      const log = (message, className = "") => {
        const line = document.createElement("div");
        line.className = className;
        line.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
        if (elements.log.textContent.startsWith("Start the demo")) elements.log.replaceChildren();
        elements.log.appendChild(line);
        while (elements.log.children.length > 60) elements.log.firstElementChild.remove();
        elements.log.scrollTop = elements.log.scrollHeight;
      };
      const renderStats = () => {
        if (!plugin) return;
        const p2p = plugin.stats.bytesDownloadedP2P;
        const origin = plugin.stats.bytesDownloadedOrigin;
        elements.peers.textContent = plugin.wsClient.getAllPeers().length;
        elements.p2pBytes.textContent = bytes(p2p);
        elements.originBytes.textContent = bytes(origin);
        elements.p2pShare.textContent = `${(p2p + origin ? p2p / (p2p + origin) * 100 : 0).toFixed(1)}%`;
      };
      const showSource = (source) => {
        elements.source.dataset.source = source;
        elements.sourceLabel.textContent = source === "p2p" ? "Receiving from peer mesh" : "Receiving from origin / CDN";
      };

      // Step 4: create a plugin that reports connection, integrity, and source events.
      const createPlugin = () => new OpenStreamGridHlsPlugin({
        trackerUrl,
        broadcastId,
        originBaseUrl,
        maxCacheBytes: 50 * 1024 * 1024,
        peerTimeoutMs: 3000,
        verifySegments: true,
        onReady: () => {
          elements.tracker.dataset.state = "connected";
          elements.trackerLabel.textContent = "Tracker connected";
          log(`Connected to ${trackerUrl}`, "p2p-event");
        },
        onEvent: (event) => {
          if (event.type === "peer_fetched") {
            showSource("p2p");
            log(`${event.segment} delivered by ${event.peerId}`, "p2p-event");
          } else if (event.type === "origin_fallback") {
            showSource("origin");
            log(`${event.segment}: ${event.message}`, "origin-event");
          } else if (event.type === "integrity_fail" || event.type === "ws_error") {
            log(event.message || event.type, "error-event");
          }
          renderStats();
        },
      });

      // Step 5: attach OpenStreamGrid before loading the HLS source.
      elements.start.addEventListener("click", () => {
        if (!window.Hls?.isSupported()) {
          log("Hls.js is not supported in this browser.", "error-event");
          return;
        }
        elements.tracker.dataset.state = "connecting";
        elements.trackerLabel.textContent = "Connecting to tracker";
        plugin = createPlugin();
        hls = new Hls({ enableWorker: true, lowLatencyMode: true, backBufferLength: 30 });
        plugin.attach(hls);
        hls.loadSource(streamUrl);
        hls.attachMedia(elements.video);
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          void elements.video.play().catch(() => log("Press play in the player controls to begin."));
          elements.start.disabled = true;
          elements.stop.disabled = false;
          log(`Loaded ${streamUrl}`);
        });
        hls.on(Hls.Events.ERROR, (_event, data) => {
          if (data.fatal) log(`Playback error: ${data.details}`, "error-event");
        });
        statsTimer = window.setInterval(renderStats, 1000);
      });

      // Step 6: detach on stop so sockets and in-flight segment requests are released.
      elements.stop.addEventListener("click", () => {
        clearInterval(statsTimer);
        plugin?.detach();
        hls?.destroy();
        plugin = undefined;
        hls = undefined;
        elements.video.removeAttribute("src");
        elements.video.load();
        elements.start.disabled = false;
        elements.stop.disabled = true;
        elements.tracker.dataset.state = "offline";
        elements.trackerLabel.textContent = "Disconnected";
        elements.source.dataset.source = "idle";
        elements.sourceLabel.textContent = "Waiting for playback";
        log("Demo stopped.");
      });
      addEventListener("beforeunload", () => plugin?.detach());
    </script>
  </body>
</html>