Cómo CREAR tu propia STREAM DECK GRATIS con Inteligencia Artificial (Sin Plugins y desde el Móvil)

Cómo Crear tu Propia Stream Deck Gratis con Inteligencia Artificial

Optimizar el flujo de trabajo durante tus transmisiones en vivo o grabaciones de contenido suele requerir herramientas costosas. Sin embargo, hoy vas a aprender a construir tu propia Stream Deck totalmente personalizada y gratuita. Utilizando el poder de la inteligencia artificial y código HTML básico, podrás controlar tus escenas de OBS Studio tanto desde tu ordenador como directamente desde la pantalla de tu teléfono móvil, sin necesidad de instalar plugins invasivos o software de terceros.

Paso 1: Generar el Código Interfaz con Inteligencia Artificial

El núcleo de este proyecto es una interfaz web autocontenida en un archivo HTML. No necesitas tener conocimientos avanzados de programación; puedes delegar todo el trabajo técnico a modelos de inteligencia artificial como Google Gemini o ChatGPT.

◆

Prepara el prompt: Estructura detalladamente las instrucciones indicando cuántos botones necesitas, el tipo de acciones requeridas y el diseño visual que prefieras.

◆

Activa el modo avanzado: Si la plataforma lo permite, utiliza los modelos de mayor capacidad para asegurar un código limpio, funcional y libre de errores en el primer intento.

◆

Descarga o copia el código: La IA generará la estructura HTML, los estilos CSS y los scripts de conexión en menos de un minuto. Guarda este archivo en tu ordenador con el nombre streamdeck.html.

📋 Prompt para crear tu Stream Deck en Google Gemini o ChatGPT:

Truco Pro de Optimización: Al ejecutar por primera vez el archivo haciendo doble clic, la interfaz te mostrará inicialmente un estado de desconexión. No te preocupes, esto se solucionará en el siguiente paso al vincularlo con tu servidor local.

Paso 2: Configurar OBS Studio y la Conexión WebSocket

Para que los clics en tu nueva botonera web ejecuten comandos en tiempo real dentro de tu software de transmisión, utilizaremos el servidor WebSocket integrado nativamente en OBS Studio.

Dirígete al menú superior de OBS Studio, selecciona Herramientas y luego haz clic en Ajustes del servidor WebSocket. Asegúrate de mantener la casilla de activación habilitada. Dentro de esta ventana, haz clic en el botón para mostrar la información de conexión; aquí obtendrás los tres parámetros críticos para enlazar tu software:

Parámetro de Conexión	Ubicación en OBS Studio	Función en la Stream Deck
Dirección IP (Host)	Información de conexión de red	Enruta la señal web hacia tu ordenador local].
Puerto del Servidor	Ajustes de WebSocket [cite: 15]	Establece el canal de comunicación exclusivo].
Contraseña	Campo de autenticación generado	Garantiza la seguridad y evita accesos no autorizados.

Abre el panel de configuración dentro de tu archivo streamdeck.html, introduce estos tres datos exactos y guarda los ajustes. Al pulsar en el botón Conectar, el sistema te mostrará de inmediato una notificación confirmando que el WebSocket se ha enlazado de forma correcta.

Paso 3: Personalizar Botones, Acciones y Escenas

Una vez establecida la comunicación, el mapeo de las funciones de transmisión es sumamente flexible y directo. Puedes añadir botones adicionales según tus necesidades operativas.

Regla de oro para las Escenas: Al editar un botón para asignarle un cambio de plano o pantalla, el nombre de la escena que escribas en la interfaz web debe ser exactamente idéntico al nombre que tiene configurado dentro de tu panel de escenas en OBS Studio.

Además del cambio de escenas tradicional (como pasar del Monitor de juego a la cámara de Inicio), puedes asignar comandos avanzados como el silenciado del micrófono. La interfaz web te permitirá arrastrar y soltar los elementos visuales dinámicamente para reordenar tu panel de control sobre la marcha.

Paso 4: Transformar tu Dispositivo Móvil en la Stream Deck Física

Si intentas copiar el archivo HTML directamente a la memoria de tu móvil, la conexión fallará debido a las restricciones de seguridad de los navegadores móviles para archivos locales. Para solucionarlo y usar tu teléfono de forma remota, necesitas levantar un microservidor web local en tu ordenador.

Habilitando Internet Information Services (IIS) en Windows

◆

Abre el Panel de Control de Windows y navega hasta Programas y características.

◆

Haz clic en Activar o desactivar las características de Windows.

◆

Busca en la lista Internet Information Services y marca la consola de administración junto con las características básicas de servicios web. Acepta para instalar.

◆

Abre el administrador de IIS y coloca tu archivo streamdeck.html en el directorio raíz del sitio por defecto.

Acceso Remoto desde el Navegador del Móvil

Para cargar el panel en tu smartphone, abre su navegador web e introduce la dirección URL del servidor. Deberás sustituir la palabra genérica localhost por la dirección IP local de tu PC que obtuviste en el panel de OBS Studio. Por ejemplo, la estructura de la URL debe lucir así:

http://192.168.1.18/streamdeck.html

Resolución de problemas de red: Si tu teléfono móvil se queda cargando de manera indefinida o no logra conectar con el servidor web, asegúrate de revisar el Firewall de Windows para permitir conexiones entrantes en el puerto asignado. Asimismo, es un requisito indispensable que tanto tu PC de producción como tu dispositivo móvil compartan exactamente la misma red Wi-Fi local.

Con esta configuración lista, podrás pulsar los botones táctiles desde la pantalla de tu móvil para cambiar de escenas o mutear el audio en tiempo real, logrando un entorno de producción profesional completamente adaptado a tus necesidades y a coste cero.

📥 Descargar el archivo HTML de la Stream Deck

Contenido de alta fidelidad técnico-pedagógica optimizado para creadores de contenido en España y Latinoamérica.