← Volver al blog
Guías #sdk

Integrá el reproductor y usá el SDK de navegador

Pegá un iframe público en cualquier página, o manejá la reproducción desde JavaScript con el SDK adaptor — un shim estilo AntMedia sobre livekit-client servido directo desde tu servidor.

2 min de lectura
Read in English

El camino sin código: un iframe

Cada token que generás devuelve URLs públicas copiables y un iframe listo para pegar. Las páginas /play y /embed son públicas — saltean la auth Bearer y generan su propio token de suscripción por sala — así que integrar un stream en vivo es genuinamente sin código:

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

Obtené las URLs de una respuesta de token:

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

Cualquier plugin de overlay habilitado en la app (timestamp, watermark, scheduled-live, deface, yolo) se renderiza en el embed automáticamente — el embed es un reproductor de primera clase, no una versión recortada.

El camino con código: el SDK adaptor

Para una UI a medida, StreamHub sirve un SDK de navegador en /sdk/. Es un shim WebRTCAdaptor estilo AntMedia sobre livekit-client, así que si venís migrando de Ant Media la API te va a resultar familiar, pero el medio debajo es 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 de estado de conexión, pistas, errores...
  });
  // publicá o suscribí con las llamadas familiares del adaptor
</script>

Como el SDK se sirve desde tu propio dominio, no hay script de terceros ni dependencia de un CDN externo — viaja en la misma imagen core que todo lo demás.

Elegí tu latencia al momento de integrar

El embed y el SDK WebRTC te dan reproducción sub-segundo. Si preferís cambiar latencia por escala, apuntá cualquier reproductor HLS a la playlist de la sala:

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

Cuál usar

  • embed con iframe — un stream en vivo en una página de marketing o un panel, sin paso de build.
  • SDK adaptor — un reproductor a medida, publicar desde el navegador, o una migración desde Ant Media.
  • URL HLS cruda — máximo alcance en un reproductor de video que ya distribuís.

Los tres salen de la misma sala, así que incluso podés ofrecer más de uno a distintas audiencias a la vez.