WebLiveHub SDK

Guía Pública de Integración WebLiveHub SDK

Esta página es una demostración pública. Tras iniciar sesión en la consola podrás obtener tu Secret Key real y descargar el paquete completo del SDK.

🚀 Rápido 🧱 Empresarial 🔒 Seguro 📱 Multiplataforma 🎁 Cuota gratuita

Todas las claves e identificadores de esta página son marcadores de posición. Sustituye con los valores reales generados en tu consola.

Inicio Rápido

Copia el ejemplo y reemplaza wl_id y password para usarlo.

  1. Inicia sesión en la consola y obtén tu SDK Secret Key.
  2. Prepara un backend en tu proyecto web (por ejemplo backend.php).
  3. Incluye el embed.js del SDK e inicializa.
  4. Crea el contenedor iframe y carga contenido live o VOD.

💻 Ejemplo de un iframe

Copia el ejemplo y reemplaza wl_id y password.

<?php
require_once __DIR__ . '/vendor/autoload.php';
use WebLiveHub\SDK\WLSDK;
WLSDK::setup([
      'hb_endpoint' => getenv('WL_HOSTED_BACKEND_URL') ?: '<HOSTED_BACKEND_ENDPOINT>',
      'user_id' => '<AUTH_USER_ID>',
      'password' => '<AUTH_PASSWORD>'
]);
?><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Single Iframe Embed</title>
  <?= WLSDK::script(); ?>
  <style>.player-frame { width:800px; height:450px; border:1px solid #ddd; border-radius:6px; display:block; }</style>
</head>
<body>
  <?= WLSDK::iframe([
      'hostLabel' => 'live',
      'streamer'  => '<STREAMER_USER_ID>',
      'attrs'     => [
          'id'    => 'stream-container',
          'class' => 'player-frame',
          'style' => 'background:#000;overflow:hidden;'
      ]
  ]); ?>
</body>
</html>

Ejemplo de múltiples iframes

Ejemplo con carga diferida de múltiples iframes. Reemplaza wl_id y password.

<?php
require_once __DIR__ . '/vendor/autoload.php';
use WebLiveHub\SDK\WLSDK;
WLSDK::setup([
    'hb_endpoint' => getenv('WL_HOSTED_BACKEND_URL') ?: '<HOSTED_BACKEND_ENDPOINT>',
    'user_id' => '<AUTH_USER_ID>',
    'password' => '<AUTH_PASSWORD>'
]);
?><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Multiple Lazy Iframes</title>
  <?= WLSDK::script(); ?>
  <style>.grid-streams { display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); } .stream-box { border:1px solid #ddd; border-radius:6px; padding:10px; background:#fafafa; } .placeholder { width:100%; aspect-ratio:16/9; background:#000; display:flex; align-items:center; justify-content:center; color:#888; font-size:12px; border-radius:4px; }</style>
</head>
<body>
  <div class="grid-streams">
    <div class="stream-box">
      <strong>Stream #1</strong>
      <div class="placeholder" id="ph-1">Pending Load</div>
      <div style="margin-top:6px;">
        <?= WLSDK::lazyIframe([
            'hostLabel' => 'live',
            'streamer'  => '<STREAMER_USER_ID>',
            'attrs'     => [ 'data-target' => 'ph-1' ]
        ]); ?>
      </div>
    </div>
    <div class="stream-box">
      <strong>Stream #2</strong>
      <div class="placeholder" id="ph-2">Pending Load</div>
      <div style="margin-top:6px;">
        <?= WLSDK::lazyIframe([
            'hostLabel' => 'live',
            'streamer'  => '<STREAMER_USER_ID_2>',
            'attrs'     => [ 'data-target' => 'ph-2' ]
        ]); ?>
      </div>
    </div>
  </div>
</body>
</html>

🔐 Consejos de Seguridad

  • No incrustes tu Secret Key real en el frontend.
  • Genera tokens siempre vía tu backend (backend.php).
  • Añade rate limit y logs a procesos que solicitan tokens con frecuencia.
  • Si sospechas filtración, regenera un Secret Key nuevo.

➡️ Siguientes Pasos

¿Listo para comenzar? Inicia sesión para obtener claves reales y configuraciones avanzadas.

Iniciar Sesión