WebLiveHub SDK
v1.0.4

Incorpora streaming en vivo en tu producto

Usa el SDK de PHP de WebLiveHub con un backend alojado para configurar la autenticación, generar incrustaciones de streaming y mantener las credenciales de larga duración en tu servidor.

Empezar Instalación con Composer
🚀 Proxy de backend alojado
El proxy centralizado oculta las claves de larga duración, aplica controles de origen y permite una rotación unificada.
📦 Versión de Composer
Instala y actualiza mediante Composer para evitar la gestión manual de paquetes.
🔒 Gestión de claves en el servidor

Inicio rápido

4 pasos para una integración mínima viable (MVI)

1

Crear un endpoint de integración

Configurar un endpoint de backend alojado

En la Consola, Crear → «Endpoints de integración» genera automáticamente el endpoint y la configuración. Crea un endpoint allí y copia su URL generada en tu código del lado del servidor.

  1. En la navegación de la Consola, abre Crear → «Endpoints de integración».
  2. Haz clic en «Nuevo endpoint de integración»
  3. Introduce un nombre de etiqueta descriptivo (por ejemplo, production-api)
  4. Copia el endpoint de servidor generado
Consejo: El backend alojado proporciona un proxy de API unificado con gestión de claves oculta.
2

Prepara las credenciales de usuario (user_id / password)

Usa la navegación de la Consola Crear → «Usuarios SDK» para crear o seleccionar una cuenta y obtener su user_id y contraseña para WLSDK::setup().

  1. En la navegación de la Consola, abre Crear → «Usuarios SDK».
  2. Crea o selecciona una cuenta y anota su user_id en la vista de detalles.
  3. Establece o confirma la contraseña de la cuenta; guárdala solo de forma interna.
  4. Usa este user_id y contraseña al inicializar WLSDK::setup().
3

Instalar el SDK de PHP

Instala el SDK de PHP de WebLiveHub mediante Composer

composer require weblivehub/sdk
Consejo: Este comando descarga e instala automáticamente las dependencias necesarias
4

Inicializar el cliente SDK, generar el token de transmisión e incrustar

Configura los ajustes básicos y las dependencias del SDK

Usa el SDK configurado para integrar el reproductor y la autenticación dinámica.

Resumen del flujo de integración

Notas sobre los marcadores
  • AUTH_USER_ID：Identificador para autenticarte con el servidor u obtener un token. Puede ser un espectador o un emisor según el hostLabel seleccionado.
  • AUTH_PASSWORD：Contraseña o secreto correspondiente a AUTH_USER_ID. Guárdalo de forma segura en el servidor; nunca lo codifiques directamente en la interfaz ni en código de ejemplo.
  • STREAMER_USER_ID：Identificador del streamer (user_id).
  • HOSTED_BACKEND_ENDPOINT：URL del endpoint del backend alojado (se muestra como marcador en los ejemplos; en la práctica se configura mediante el entorno o los ajustes del servidor).
  1. Crear backend alojado: obtener un endpoint de backend dedicado.
  2. Instalación con Composer: composer require weblivehub/sdk
  3. Configuración de WLSDK::setup():
    • configura hb_endpoint con la URL del backend del paso 1
    • proporciona user_id y password para la autenticación de usuario
  4. Salida de iframe: una transmisión = iframe(); varias o diferidas = lazyIframe().
  5. Listo: el intercambio de token y autenticación se gestiona internamente.

Incrustación de una transmisión en un iframe

Usa WLSDK::iframe() para una sola transmisión; admite atributos personalizados.

<?php
// === Initialize SDK Client ===

// Include WebLiveHub SDK class
require_once __DIR__ . '/vendor/autoload.php';
use WebLiveHub\SDK\WLSDK;

// Initialize SDK configuration (must complete before first call)
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>WebLiveHub Single Stream Example</title>
    <style>
        /* Set stream container styles */
        #stream-container {
            width: 800px;
            height: 450px;
            border: 1px solid #ccc;
            display: block;
        }
    </style>

    <?php
        // Load official JS SDK (contains interfaz logic needed for iframe/lazyIframe)
        echo WLSDK::script();
    ?>
</head>
<body>
<?php
        echo WLSDK::iframe([
            'hostLabel' => 'connect', // Hosted Backend label (connect/live/live-client etc)
            'streamer'  => '<STREAMER_USER_ID>',      // Target streamer's user_id
            'attrs' => [ 'id' => 'stream-container', 'class' => 'wlh-stream', 'style' => 'border-radius:6px;' ]
        ]);
?>
</body>
</html>

Carga diferida de varios iframes

Usa WLSDK::lazyIframe() para mostrar varias transmisiones con carga diferida y diseño adaptable.

<?php
// === Initialize SDK Client ===

// Include WebLiveHub SDK class
include_once __DIR__.'/vendor/autoload.php';
use WebLiveHub\SDK\WLSDK;

// Initialize SDK configuration
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>Multi Stream Showcase</title>
    <style>body{font-family:system-ui,Arial,sans-serif;margin:24px;background:#fafafa;} .grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));} .card{background:#fff;padding:12px;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 3px rgba(0,0,0,.05);} .card h2{font-size:15px;margin:0 0 8px;} </style>

    <?php
        // Load official JS SDK (contains interfaz logic needed for iframe/lazyIframe)
        echo WLSDK::script();
    ?>
</head>
<body>
    <h1>Multiple Live Rooms</h1>

    <!-- // === Stream token generation & incrustación ===  -->
    <!-- // Generate multiple lazy-loaded stream reproductors  -->
    <div class="grid">

        <div class="card">
            <h2>Streamer #1</h2>
            <div>
            <?php
                    // Lazy load (SDK auto-generates token & incrustacións)
                    echo WLSDK::lazyIframe([
                        'hostLabel' => 'connect',  // Hosted Backend label
                        'streamer' => '<STREAMER_1_USER_ID>'         // Streamer user_id
                    ]);
            ?>
            </div>
        </div>

        <div class="card">
            <h2>Streamer #2</h2>
            <div>
            <?php
                    // Second stream (different streamer; SDK generates corresponding token)
                    echo WLSDK::lazyIframe([
                        'hostLabel' => 'connect',  // Same hosted servidor
                        'streamer' => '<STREAMER_2_USER_ID>'         // Different streamer user_id
                    ]);
            ?>
            </div>
        </div>

    </div>
</body>
</html>

🌐 Integración multilingüe (opcional)

Si tu sitio ofrece varios idiomas de interfaz, puedes pasar el parámetro lang al llamar a WLSDK para mantener el idioma del reproductor coherente con la página. Si no se especifica, WLSDK lee primero el idioma del entorno de ejecución; si no está disponible, usa inglés (en).

  • Códigos de idioma admitidos por el reproductor: en, ja, zh-Hant, zh-Hans y vi. Si el idioma del entorno no está en la lista, se usa automáticamente en.
  • Al llamar a WLSDK::iframe() o WLSDK::lazyIframe(), añade lang => '<LANG_CODE>' a la matriz de parámetros.

Ejemplo: establecer el idioma del reproductor en chino tradicional

El siguiente ejemplo muestra cómo especificar lang => 'zh-Hant' en una llamada de iframe única; en la práctica puedes usar una variable dinámica.

<?php
// Example: specify the reproductor language in the iframe call
echo WLSDK::iframe([
    'hostLabel' => 'connect',
    'streamer'  => '<STREAMER_USER_ID>',
    'lang'      => 'zh-Hant',
    'attrs'     => [
        'id'    => 'stream-container',
        'class' => 'wlh-stream',
        'style' => 'border-radius:6px;'
    ]
]);

🔔 Escucha los eventos del reproductor

El reproductor generado por WLSDK no es solo un iframe estático; puedes registrar controladores de interfaz para ready, ended y page_unloading e integrar lógica de interfaz o registros.

  • Recomendación: vincula eventos en la interfaz con WLSDK_attachIframeEventsById(<element id>, handlers). Genera un id con nombre en PHP y úsalo después en JS.
  • La misma vinculación funciona con reproductores creados mediante WLSDK::iframe() y WLSDK::lazyIframe().
  • ready: el reproductor está cargado y listo (se activa al comenzar el protocolo interno).
  • ended: la reproducción ha terminado (finalizó el directo o el VOD llegó al final).
  • page_unloading: la página incrustada se está cerrando (al cerrar la pestaña, actualizarla o navegar a otra página).

Ejemplo: escuchar los eventos ready / ended / page_unloading

El ejemplo muestra el tratamiento habitual de eventos; también se proporciona un receptor genérico para otros tipos de mensajes.

<?php
// Example: bind events by element id (recommended)
echo WLSDK::iframe([
    'hostLabel' => 'connect',
    'streamer'  => '<STREAMER_USER_ID>',
    'attrs'     => [
        'id'    => 'stream-with-events',
        'class' => 'wlh-stream',
    ],
]);
?>
<script>
(function(){
    WLSDK_attachIframeEventsById('stream-with-events',{
        'ready': function(){ console.log('reproductor ready'); },
        'ended': function(){ console.log('playback ended'); },
        'page_unloading': function(){ console.log('iframe page unloading'); },
    });
})();
</script>

Los controladores se ejecutan como JavaScript normal; evita insertar entradas de usuario sin filtrar en cadenas para reducir el riesgo de XSS.

🏷️ ¿Qué es hostLabel?

Ejemplos de uso incluidos
live = vista del emisor (publicar / controlar).
live-client = vista del espectador (ver / interactuar).
connect = Pruebas o conexión general y una integración rápida (ejemplo predeterminado).
Añade etiquetas personalizadas según sea necesario; el código solo envía la etiqueta y el servidor resuelve la función y el comportamiento.
  • La interfaz solo proporciona la etiqueta; el servidor resuelve automáticamente la función y el nodo.
Valores de HostLabel y sus funciones
Label Role Uso en esta guía
live host Vista del emisor
connect host Pruebas o conexión general
live-client viewer Vista del espectador

⚡ Verification boundaries

  • Valida en tu entorno

    Prueba la incrustación, el host label seleccionado y el flujo del espectador en un entorno que controles antes de planificar el uso en producción.

  • Confirm operating requirements separately

    Esta guía no establece capacidad de producción, soporte ni compromisos comerciales; revísalos con WebLiveHub antes de un despliegue de producción.

🔐 Notas de seguridad

  • Protección de claves de larga duración

    Todas las claves de larga duración permanecen en el servidor; la interfaz solo usa resultados de autorización de corta duración, evitando almacenar secretos sin procesar en el navegador.

  • Control de HTTPS y CORS

    Usa HTTPS en producción y limita allow_origins; evita usar * durante periodos prolongados.

  • Ciclo de vida del token

    El servidor de la plataforma gestiona automáticamente el ciclo de vida y la renovación; las integraciones habituales no requieren un flujo adicional de actualización manual.

Guía de integración de WordPress

Documentación de WebLiveHub Stream (prioridad para bloques)

Esta página se centra en la ruta de integración de PHP SDK Si te integras con WordPress, usa la guía específica:

Guía de integración del plugin de WordPress

Consejo: si tenías marcadores para #wordpress-plugin, actualízalos a wordpress_integration_guide.html.