Overlay de Streaming

Derby provee un overlay basado en navegador en tiempo real para software de transmisión en vivo como OBS Studio y vMix. El Panel de Control de Arenas te permite administrar arenas, asignar peleas, controlar cámaras y enviar datos del overlay a tu transmisión — todo desde una sola pantalla.

Configuración Rápida

Comienza a transmitir en menos de un minuto:

Abre el Panel de Control de Arenas

En Derby, navega al Panel de Control de Arenas desde el menú principal.

Haz clic en Configuración Rápida

Si no hay arenas configuradas, haz clic en el botón Configuración Rápida. Esto crea una arena predeterminada con una cámara USB — sin configuración adicional.

Agrega Fuente de Navegador en OBS

En OBS, agrega una nueva fuente de tipo Navegador. Establece la URL a http://localhost:5080/overlay. Establece ancho a 1920 y alto a 1080 (o la resolución de tu transmisión).

Asigna una pelea

Ingresa un número de pelea en el Panel de Control de Arenas y haz clic en Asignar. El overlay se actualiza al instante.

Panel de Control de Arenas

El Panel de Control de Arenas es el tablero del operador para administrar sesiones de transmisión en vivo. Provee:

  • Lista de arenas — Ve todas las arenas configuradas y su estado actual (Inactiva, Activa, Completada)
  • Asignación de peleas — Asigna un número de pelea a una arena para iniciar la transmisión
  • Temporizador de pelea — Cronómetro por arena que se reinicia automáticamente al limpiar la pelea
  • Selector de diseño — Elige el diseño del overlay desde un menú desplegable (Estándar, Compacto, etc.)
  • Cambio de cámara — Cambia entre las cámaras asignadas a una arena
  • Alternar overlay — Muestra u oculta el overlay
  • URL del overlay — Copia la URL del overlay al portapapeles para pegarla en OBS/vMix

Configuración de Arenas

Haz clic en el botón de configuración en el Panel de Control de Arenas para abrir el diálogo de Configuración de Arenas. Desde aquí puedes:

  • Agregar, renombrar y eliminar arenas
  • Configurar cámaras por arena (nombre, URL, tipo: USB o HTTP)
  • Reordenar arenas

Cada arena tiene un número único. El sistema previene números de arena duplicados.

Cómo Funciona

Derby ejecuta un servidor WebSocket local que envía datos en tiempo real a una fuente de navegador. El overlay se actualiza instantáneamente cuando cambian las peleas, avanza el temporizador o se registran resultados.

Contenido del Overlay

El overlay muestra:

  • Pelea actual — Equipos, pesos, delta
  • Temporizador de pelea — Temporizador en vivo sincronizado con el Panel de Control de Arenas
  • Barra de clasificaciones — Equipos líderes por puntuación
  • Indicador de ronda — Número de ronda actual

Configuración para OBS Studio

Agrega Fuente de Navegador

En OBS, agrega una nueva fuente de tipo Navegador.

Configura la URL

Establece la URL a http://localhost:5080/overlay. Establece ancho a 1920 y alto a 1080 (o la resolución de tu transmisión).

Posiciona el overlay

Redimensiona y posiciona el overlay en tu escena. El fondo es transparente.

Personalización

El overlay soporta parámetros de URL para personalización:

  • ?theme=dark — Tema oscuro (predeterminado)
  • ?theme=light — Tema claro
  • ?showRankings=false — Ocultar barra de clasificaciones
  • ?showTimer=false — Ocultar temporizador

También puedes cambiar el diseño del overlay directamente desde el menú desplegable del Panel de Control de Arenas sin recargar la fuente de navegador.

Configuración para vMix

  1. Agrega un input de Navegador Web
  2. Establece la URL a http://localhost:5080/overlay
  3. Habilita transparencia en la configuración del navegador
  4. Agrega a tu escena como una capa de overlay

Flujo de Trabajo por Arena

Cada arena sigue este ciclo de estados:

  1. Inactiva — La arena está lista. Asigna un número de pelea para comenzar.
  2. Activa — La pelea está en vivo. El temporizador corre. El overlay muestra la información.
  3. Completada — La pelea terminó. Marca como finalizada o limpia la pelea.
  4. Inactiva — Limpiar la pelea regresa la arena a inactiva. El temporizador se reinicia a cero. Lista para la siguiente pelea.

Solución de Problemas

El overlay no conecta

  • Asegúrate de que el servidor de overlay esté ejecutándose (revisa el estado en el Panel de Control de Arenas)
  • Verifica que el puerto 5080 no esté bloqueado por el firewall
  • Intenta refrescar la fuente de navegador

El overlay no se actualiza

  • Verifica que se haya asignado una pelea en el Panel de Control de Arenas
  • Revisa la conexión WebSocket en la consola del navegador
  • Reinicia el servidor de overlay

No aparecen arenas

  • Usa Configuración Rápida para crear una arena predeterminada, o abre la Configuración de Arenas para agregar arenas manualmente
  • Asegúrate de que las arenas estén habilitadas

Relacionado