Cómo poner un overlay de Discord en OBS

Abre streamkit.discord.com/overlay, haz clic en Install for OBS, autorízalo en tu app de Discord, elige el widget Voice (voz), selecciona tu servidor y tu canal de voz, y pega la URL generada en una fuente Navegador (Browser) de OBS a 312 × 600. La app de escritorio de Discord tiene que estar abierta en el mismo PC que OBS.

Qué necesitas

• La app de escritorio de Discord, abierta y con la sesión iniciada en el mismo ordenador que OBS. StreamKit se conecta a la app local, no a la pestaña del navegador. Si no la encuentra, la página muestra Can’t Connect to the Discord Client (no se puede conectar con el cliente de Discord).
• OBS Studio (cualquier versión reciente) con su fuente Navegador integrada.
• Un servidor y un canal de voz que veas en tu app de Discord. No hace falta que el servidor sea tuyo.

Paso 1: instala y autoriza StreamKit

1. Con Discord abierto, entra en streamkit.discord.com/overlay desde tu navegador.
2. Haz clic en Install for OBS.
3. Tu app de Discord muestra una solicitud de autorización. Haz clic en Autorizar (Authorize). Mientras StreamKit esté conectado, Discord muestra un aviso en la parte superior de la app. Puedes cerrarlo.
4. La página de StreamKit pasa al configurador, con tres pestañas: Status (estado), Chat y Voice (voz).

A partir de ahí, StreamKit aparece en los Ajustes de usuario (User Settings) de Discord, entre las aplicaciones autorizadas. Elimínalo desde ahí si dejas de usar el overlay.

Paso 2: configura el widget Voice

1. Haz clic en la pestaña Voice.
2. Elige tu servidor en el desplegable Server (Select a Server).
3. Elige el canal en Voice Channel (Select a Voice Channel).
4. Ajusta las opciones de abajo. La vista previa en directo se actualiza sobre la marcha.

Opciones del widget Voice

La persona que habla tiene un anillo verde alrededor de su avatar. Tus elecciones se guardan en la URL como parámetros, así que el enlace que copias ya las incluye todas.

Paso 3: añádelo a OBS como fuente de navegador

1. Abajo en la página de StreamKit, haz clic en el cuadro de la URL para seleccionarla y cópiala. StreamKit también indica el tamaño: 312 px de ancho y 600 px de alto para el widget Voice.
2. En OBS, pulsa + en Fuentes (Sources) y elige Navegador. En OBS 32.2 y posteriores se abre la ventana Añadir fuente (Add Source): elige Navegador y haz clic en Añadir un(a) nuevo(a) Navegador (Add a new Browser). En versiones anteriores elige Crear nueva (Create new). Ponle un nombre (por ejemplo “Discord Voice”) y haz clic en Aceptar.
3. Pega el enlace en URL, pon Ancho (Width) en 312 y Alto (Height) en 600, y haz clic en Aceptar.
4. Arrastra la fuente a su sitio en tu escena. Mantén pulsado Alt mientras arrastras un borde para recortar en lugar de escalar.

Cada widget tiene su propia URL, así que repite estos pasos con cada widget que quieras. Los tres pueden funcionar a la vez.

Widgets Chat y Status

El widget Chat va bien para una comunidad basada en Discord o un canal de texto solo para subs. Si lo que quieres es poner el chat de Twitch en el stream, usa nuestro overlay de chat de Twitch gratis o sigue la guía cómo poner el chat de Twitch en OBS.

Ideas de CSS personalizado para el widget Voice

La fuente de navegador de OBS tiene un cuadro CSS personalizado (Custom CSS) que se aplica a la página. Deja la línea por defecto que hace el fondo transparente y añade tus reglas debajo. Los nombres de clase de StreamKit terminan en sufijos aleatorios que pueden cambiar cuando Discord actualiza la página, así que usa selectores parciales como [class*="Voice_avatar__"] en lugar de copiar nombres de clase completos de tutoriales antiguos.

Brillo más intenso al hablar

[class*="Voice_avatarSpeaking"] {
  border-color: #34d399 !important;
  box-shadow: 0 0 12px #34d399;
}

Atenuar a quien no está hablando

[class*="Voice_avatar__"] {
  opacity: 0.5;
  transition: opacity 0.2s;
}
[class*="Voice_avatarSpeaking"] {
  opacity: 1;
}

Quitar las burbujas oscuras de los nombres

[class*="Voice_name__"] {
  background-color: transparent !important;
}

Fila horizontal de avatares

Activa Hide Names en StreamKit, ensancha la fuente de navegador (por ejemplo 600 × 80) y añade:

[class*="Voice_voiceStates__"] {
  display: flex;
  gap: 8px;
}

Si una regla deja de funcionar tras una actualización de StreamKit, probablemente han cambiado los nombres de clase. Abre la URL del widget en Chrome (con Discord abierto), haz clic derecho en un avatar → Inspeccionar (Inspect) y actualiza el selector para que coincida.

StreamKit frente a la superposición de Discord en el juego

Son dos funciones distintas. La superposición del juego de Discord (Game Overlay; en Ajustes de usuario → Superposición (Overlay) → Activar superposición (Enable Overlay)) dibuja Discord encima de tu juego para que tú veas quién habla y respondas a los mensajes sin hacer alt-tab. Solo funciona en Windows y no está pensada como gráfico para el stream. StreamKit es una página web hecha para programas de emisión: vive en su propia fuente de OBS, así que controlas exactamente dónde aparece en el stream, se ve igual en todas las escenas y sigue visible aunque cambies de la captura de juego a una escena de webcam o de “Just Chatting”.

Muchos streamers usan las dos: la superposición del juego para ellos y el widget Voice de StreamKit para los espectadores. Para el resto de tu escena, consulta los tamaños de overlay para Twitch.

Fuentes: Discord: Using Discord’s OBS Streamkit Overlay · Discord StreamKit Overlay · Discord: Game Overlay 101 · OBS Knowledge Base: Browser Source