Your platform backend                   AntCDN
─────────────────────────────────────   ──────────────────────────────────
POST /live-streams          ──────────► creates stream + stream key
                                             │
Your broadcaster (OBS / encoder)             │
  RTMP  ──────────────────────────────────►│ ingest
                                             │ transcode
                                             │ segment upload → R2
                                             │
Poll GET /live-streams/{id}  ◄──────────────► state: idle → live
                                             │
                                             ▼
Viewer          ◄── HLS master.m3u8 ── Edge worker (worker.antcdn.net)

{
  "streamId": "ls_01jpp...",
  "edgeId": "lse_01jpp...",
  "name": "Friday Night Stream",
  "state": "idle",
  "quality": "standard",
  "createdAt": "2026-03-15T10:00:00Z",
  "ingest": {
    "rtmpUrl": "rtmp://ingest.antcdn.net/live",
    "streamKey": "sk_live_abc123...",
    "rtmpFullUrl": "rtmp://ingest.antcdn.net/live/sk_live_abc123..."
  },
  "playback": {
    "hlsUrl": "https://worker.antcdn.net/live/lse_01jpp.../master.m3u8",
    "edgeId": "lse_01jpp..."
  }
}

1
// Your API — authenticated route
2
app.get("/api/stream/:id/credentials", requireAuth, async (req, res) => {
3
  const stream = await db.streams.findById(req.params.id);
4

5
  // Ensure the requesting user owns this stream
6
  if (stream.userId !== req.user.id) return res.status(403).end();
7

8
  res.json({
9
    rtmpUrl: stream.rtmpIngestUrl, // rtmp://ingest.antcdn.net/live
10
    streamKey: decrypt(stream.streamKey), // sk_live_...
11
  });
12
});

idle  →  connecting  →  live  →  ended

1
async function pollStreamState(streamId, apiKey, onChange) {
2
  let lastState = null;
3

4
  const interval = setInterval(async () => {
5
    const res = await fetch(
6
      `https://api.antcdn.net/v1/live-streams/${streamId}`,
7
      { headers: { "X-Api-Key": apiKey } },
8
    );
9
    const stream = await res.json();
10

11
    if (stream.state !== lastState) {
12
      lastState = stream.state;
13
      onChange(stream.state);
14
    }
15

16
    if (stream.state === "ended" || stream.state === "error") {
17
      clearInterval(interval);
18
    }
19
  }, 4000);
20

21
  return () => clearInterval(interval); // returns cleanup fn
22
}

https://worker.antcdn.net/live/{edgeId}/master.m3u8

import Hls from "hls.js";
import { useEffect, useRef } from "react";

interface LivePlayerProps {
  edgeId: string;
  state: "idle" | "connecting" | "live" | "ended" | "error";
}

export function LivePlayer({ edgeId, state }: LivePlayerProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const hlsRef = useRef<Hls | null>(null);
  const src = `https://worker.antcdn.net/live/${edgeId}/master.m3u8`;

  useEffect(() => {
    if (state !== "live") return;
    const video = videoRef.current;
    if (!video) return;

    if (Hls.isSupported()) {
      const hls = new Hls({
        // Live stream tuning
        liveSyncDurationCount: 3, // target 3 segments behind live edge
        liveMaxLatencyDurationCount: 10,
        manifestLoadingMaxRetry: 10, // keep retrying if segments aren't ready yet
        fragLoadingMaxRetry: 6,
      });
      hls.loadSource(src);
      hls.attachMedia(video);
      hlsRef.current = hls;
    } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
      // Safari
      video.src = src;
    }

    return () => {
      hlsRef.current?.destroy();
      hlsRef.current = null;
    };
  }, [state, src]);

  if (state === "idle") {
    return <div className="stream-placeholder">Stream not started yet</div>;
  }
  if (state === "connecting") {
    return <div className="stream-placeholder">Stream starting…</div>;
  }
  if (state === "ended") {
    return <div className="stream-placeholder">Stream ended</div>;
  }

  return (
    <video ref={videoRef} controls autoPlay muted style={{ width: "100%" }} />
  );
}

1
hls.on(Hls.Events.ERROR, (event, data) => {
2
  // When the live stream ends, hls.js raises a network error
3
  // trying to load segments that no longer exist
4
  if (data.fatal && data.type === Hls.ErrorTypes.NETWORK_ERROR) {
5
    // Re-check stream state from your API
6
    checkStreamState().then((state) => {
7
      if (state === "ended") setStreamState("ended");
8
      else hls.startLoad(); // try to recover if still live
9
    });
10
  }
11
});

1
// app/api/streams/route.ts — create a new stream
2
export async function POST(req: Request) {
3
  const { name, quality = "standard" } = await req.json();
4
  const user = await getAuthUser(req);
5

6
  const res = await fetch("https://api.antcdn.net/v1/live-streams", {
7
    method: "POST",
8
    headers: {
9
      "X-Api-Key": process.env.ANTCDN_API_KEY!,
10
      "Content-Type": "application/json",
11
    },
12
    body: JSON.stringify({ name, quality }),
13
  });
14

15
  const stream = await res.json();
16

17
  // Store in your DB — encrypt the stream key
18
  await db.streams.create({
19
    userId: user.id,
20
    streamId: stream.streamId,
21
    edgeId: stream.edgeId,
22
    hlsUrl: stream.playback.hlsUrl,
23
    streamKeyEncrypted: encrypt(stream.ingest.streamKey),
24
    rtmpIngestUrl: stream.ingest.rtmpUrl,
25
  });
26

27
  // Return to client — WITHOUT the stream key
28
  return Response.json({
29
    streamId: stream.streamId,
30
    edgeId: stream.edgeId,
31
    hlsUrl: stream.playback.hlsUrl,
32
    state: stream.state,
33
  });
34
}

1
// app/api/streams/[id]/credentials/route.ts — serve key to broadcaster only
2
export async function GET(
3
  req: Request,
4
  { params }: { params: { id: string } },
5
) {
6
  const user = await getAuthUser(req);
7
  const stream = await db.streams.findById(params.id);
8

9
  if (!stream || stream.userId !== user.id) {
10
    return new Response("Forbidden", { status: 403 });
11
  }
12

13
  return Response.json({
14
    rtmpUrl: stream.rtmpIngestUrl,
15
    streamKey: decrypt(stream.streamKeyEncrypted),
16
  });
17
}

1
// app/api/streams/[id]/state/route.ts — proxy state poll to AntCDN
2
export async function GET(
3
  req: Request,
4
  { params }: { params: { id: string } },
5
) {
6
  const stream = await db.streams.findById(params.id);
7
  if (!stream) return new Response("Not found", { status: 404 });
8

9
  const res = await fetch(
10
    `https://api.antcdn.net/v1/live-streams/${stream.streamId}`,
11
    { headers: { "X-Api-Key": process.env.ANTCDN_API_KEY! } },
12
  );
13
  const data = await res.json();
14

15
  return Response.json({ state: data.state, startedAt: data.startedAt });
16
}

1
// Don't immediately hide the player on 'connecting' if it was just 'live'
2
let wasLive = false;
3

4
function handleStateChange(newState) {
5
  if (newState === "live") wasLive = true;
6

7
  if (newState === "connecting" && wasLive) {
8
    // Brief reconnect — show "buffering" instead of hiding player
9
    setUiState("reconnecting");
10
  } else {
11
    setUiState(newState);
12
  }
13

14
  if (newState === "ended") wasLive = false;
15
}