← Back to the blog

Embed the player and use the browser SDK

Drop a public iframe into any page, or drive playback from JavaScript with the adaptor SDK — an AntMedia-style shim over livekit-client served straight from your server.

2 min read
Leer en español

The zero-code path: an iframe

Every token you mint returns copyable public URLs and a ready-to-paste iframe. The /play and /embed pages are public — they bypass Bearer auth and mint their own subscribe token per room — so embedding a live stream is genuinely zero-code:

<iframe src="https://media.example.com/embed/live/studio"
        width="640" height="360" frameborder="0"
        allow="autoplay; fullscreen; camera; microphone"
        allowfullscreen></iframe>

Get the URLs from a token response:

curl -s -X POST $BASE/apps/live/tokens -H "Authorization: Bearer $TOKEN" \
  -H 'Content-Type: application/json' \
  -d '{"room":"studio","canPublish":false,"canSubscribe":true}'
# → data.playUrl / data.embedUrl / data.iframe

Any player-overlay plugins enabled on the app (timestamp, watermark, scheduled-live, deface, yolo) render on the embed automatically — the embed is a first-class player, not a stripped-down one.

The code path: the adaptor SDK

For a custom UI, StreamHub serves a browser SDK at /sdk/. It is an AntMedia-style WebRTCAdaptor shim over livekit-client, so if you are migrating from Ant Media the API will feel familiar, but the media underneath is LiveKit.

<script src="https://media.example.com/sdk/streamhub-adaptor.global.js"></script>
<script>
  const adaptor = new WebRTCAdaptor({
    websocket_url: "wss://media.example.com/rtc",
    // callbacks for connection state, tracks, errors...
  });
  // publish or subscribe with the familiar adaptor calls
</script>

Because the SDK is served from your own domain, there is no third-party script and no external CDN dependency — it ships in the same core image as everything else.

Choose your latency at embed time

The embed and the WebRTC SDK give you sub-second playback. If you would rather trade latency for scale, point any HLS player at the room's playlist instead:

https://media.example.com/hls/live/studio/index.m3u8

Which to reach for

  • iframe embed — a live stream on a marketing page or dashboard, no build step.
  • adaptor SDK — a bespoke player, publishing from the browser, or a migration off Ant Media.
  • raw HLS URL — maximum reach in an existing video player you already ship.

All three come off the same room, so you can even offer more than one to different audiences at once.