SPDN SDK — Clappr Demo

<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.13/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script src="https://spdn.tv/sdk/spdn-p2p.js"></script>
<div id="player" style="width:800px;height:450px"></div>
<script>
  const spdn = new SPDN({
    token:    "spdn_app_YOUR_TOKEN_HERE",
    streamId: "your-stream-id"
  });
  spdn.ready.then(() => {
    const player = new Clappr.Player({
      source:  "https://your-cdn.com/live.m3u8",
      parentId: "#player",
      autoPlay: true,
      mute:     true                    // browsers block autoplay with sound
    });

    // Clappr creates its hls.js instance lazily. Wait for it,
    // then hand it to SPDN. Once attached, segments start flowing
    // through the P2P mesh transparently to Clappr.
    function attachWhenReady() {
      const playback = player.core
        && player.core.activeContainer
        && player.core.activeContainer.playback;
      const hls = playback && (playback._hls || playback.hls);
      if (hls) { spdn.attachToHls(hls); return true; }
      return false;
    }
    if (!attachWhenReady()) {
      const t = setInterval(() => { if (attachWhenReady()) clearInterval(t); }, 100);
      setTimeout(() => clearInterval(t), 15000);
    }
  });
</script>