Utility Streamer

Tu herramienta definitiva para la gestión de streams en directo

¡Requisito Indispensable!

Este sistema necesita Streamer.bot para funcionar. Streamer.bot es el "cerebro" que conecta el chat de Twitch/YouTube con este overlay. Sin él, no verás ningún mensaje.

Descargar Streamer.bot aquí

Guía de Instalación y Configuración

  1. Configurar Streamer.bot

    Este paso es obligatorio para cualquier método. Debes activar el servidor WebSocket para que el overlay pueda "escuchar" los mensajes.

    • Abre Streamer.bot y ve a Servers/Clients → WebSocket Server.
    • Configuración requerida: Host: 127.0.0.1, Port: 8080, Endpoint: /
    • Haz clic en Start Server. Debe ponerse en verde.

Elige tu Método de Instalación

Método 1: Fácil y Rápido (Uso Local)

Usa un solo archivo que contiene el chat y el panel. Ideal para una configuración rápida sin necesidad de hosting.

Descargar versión reciente aquí

  1. Añadir a OBS

    • En OBS, añade una nueva fuente de tipo Navegador (Browser).
    • Marca "Archivo local" y selecciona el archivo chat.html. (Nota: para este método, el archivo chat.html debe contener tanto el chat como el panel).
    • Establece el Ancho a 1920 y el Alto a 1080.

  2. Recortar la Vista

    • Este es el paso clave: Para que tu audiencia solo vea el chat, mantén pulsada la tecla Alt y arrastra el borde derecho de la fuente en OBS hacia la izquierda hasta que el panel de control quede completamente oculto.

  3. Abrir el Panel de Control

    • Para controlar el sistema, simplemente abre el mismo archivo chat.html en tu navegador web (Chrome, Firefox, etc.).

Método 2: Profesional con Paneles (Requiere Hosting)

Usa dos archivos separados para una integración más limpia en OBS. Requiere subir los archivos a un servicio como GitHub Pages.

  1. Añadir Overlay de Chat a OBS

    • Añade una fuente de Navegador en OBS.
    • En URL, pega el enlace a tu archivo chat.html alojado online.
    • Establece Ancho: 1920 y Alto: 1080.

  2. Añadir Panel de Control a OBS

    • En OBS, ve al menú Paneles → Paneles de navegador personalizados.
    • Dale un nombre (ej. "Panel del Chat") y en la URL, pega el enlace a tu archivo panel.html alojado online.
    • Haz clic en Aplicar. Ahora puedes acoplar tu panel de control donde quieras dentro de OBS.

🚀 ¡Más herramientas en camino!

Estamos trabajando para añadir nuevas utilidades que mejoren aún más tus directos. Algunas ideas en desarrollo son:

  • Ideas sobran solo falta que funcionen