Cómo agregar el chat de Twitch a OBS
Lo que todos pasan por alto es que la dirección normal del canal no sirve. El chat tiene la suya.
Here is how to add Twitch chat to OBS: add a browser source and point it at the pop-out chat address for your channel, then set a width and height that match the space on your layout. The ordinary channel link does not work here; chat has its own address.
El chat se muestra con su propio fondo, así que agrega CSS personalizado para hacerlo transparente y ajustar el tamaño del texto.
La URL normal del canal no funciona como fuente. El chat tiene una dirección aparte, y ese es el paso en el que se equivocan la mayoría de las configuraciones.
An overlay only has something to show when somebody is in the room, which is the part no amount of CSS fixes. Viewers on a Twitch stream acts on that count.
Una fuente de navegador es una página web que se muestra dentro de OBS, lo que significa que todo lo que afecta a una página web afecta a tu overlay.
El chat emergente es la página creada justo para esto: solo el chat, sin reproductor ni elementos de la página. También se usa en un segundo monitor mientras transmites, y por eso existe.
Como es una página, por defecto se carga como un visitante sin sesión iniciada. Eso suele ser lo que quieres en la transmisión: muestra el chat como lo ve cualquier espectador, sin tus controles de moderación y sin el nombre de tu cuenta en la esquina.
También significa que la página sigue mostrándose cuando termina la transmisión y sigue consumiendo recursos. Configurar la fuente de navegador para que se actualice cuando se vuelve activa y se apague cuando no está visible es la diferencia entre un OBS estable y uno que va llenando la memoria poco a poco en una sesión larga.
La parte estética es CSS. El chat emergente tiene un fondo sólido y texto pequeño, y ambas cosas son un problema para un overlay. El CSS personalizado en las propiedades de la fuente de navegador hace transparente el fondo, sube el tamaño de la letra y oculta el cuadro para escribir mensajes. Todos los overlays de chat populares, de pago o gratis, hacen alguna versión de esto.
Agregar la fuente
En OBS, agrega una fuente, elige navegador y ponle el nombre chat.
Pega la dirección del chat emergente de tu canal, cambiando el nombre por el de tu canal.
Define el ancho y el alto según el tamaño del área que va a ocupar. La página se ajusta al tamaño de la fuente, así que una fuente angosta da un chat angosto.
Marca la opción de actualizar el navegador cuando la escena se vuelva activa, que resuelve la mayoría de los casos de un chat que deja de actualizarse.
El CSS que lo hace utilizable
El CSS personalizado va en las propiedades de la fuente de navegador, en el campo destinado a eso.
Lo esencial es un fondo transparente, una letra más grande y ocultar el cuadro de entrada y el encabezado.
Una sombra o un contorno en el texto mantiene los nombres legibles sobre un juego muy luminoso, que es la queja más común de un overlay sencillo.
Parte de uno de los fragmentos de código que se comparten ampliamente en lugar de escribirlo desde cero, y cambia solo los tamaños.
Test the overlay against your brightest scene rather than against the editor background. White text that looks fine over a dark menu disappears entirely over a snow level, and an outline or a semi-transparent panel is what fixes it.
Overlays de chat de terceros
Existen servicios que muestran el chat de Twitch con temas, animaciones y compatibilidad con emotes de otras extensiones.
Te dan una URL para usarla como el mismo tipo de fuente de navegador, así que la parte de OBS de la configuración es idéntica.
Exigen autorizar el acceso a tu cuenta, lo que es una decisión de confianza.
Si uno deja de funcionar, la dirección del chat emergente es la alternativa que nunca necesita autorización.
Keeping the overlay stable over a long stream
A chat source that works for twenty minutes and fails at hour four is the most common complaint, and the causes are mechanical.
Browser sources accumulate memory. Enabling refresh when the scene becomes active gives OBS a reason to rebuild the page periodically rather than leaving it running for eight hours.
Shutting the source down when it is not visible saves resources and is the setting that causes a frozen chat when the overlay lives in a scene you never leave. Pick one behavior deliberately rather than enabling both and wondering.
Hardware acceleration in OBS occasionally renders browser sources blank after a driver update. Toggling it off and on in settings is the fix, and it is worth knowing before a stream rather than during one.
A second machine or a phone running the pop-out chat is the belt-and-braces version for anybody who moderates while streaming, because it keeps the readable copy independent of whatever OBS is doing.
And test the overlay with a full chat, not an empty one. Layout problems only appear when messages are long and arrive quickly.
Fallas comunes
Usar la dirección del canal en lugar de la del chat emergente. Se carga el reproductor en vez del chat, o no se carga nada.
La fuente con un tamaño demasiado pequeño, que hace que el chat se muestre en una columna angosta con los nombres cortados.
Problemas de aceleración por hardware, que se ven como una fuente de navegador en blanco y se arreglan activando o desactivando esa opción en OBS.
Y un chat que se actualiza mientras OBS está en primer plano y se congela cuando no, que es la opción de apagar cuando no está visible haciendo su trabajo en el lugar equivocado.
The same page powers the viewer's chat, and when chat does not appear covers why it goes blank. The overlay is one piece of a broadcast, and setting up the stream itself covers the rest.
Privacidad en la transmisión
El chat emergente se carga sin sesión iniciada, así que tus propios controles de moderación no se muestran. Confírmalo antes de salir en vivo.
Los susurros y las acciones de moderación no se muestran en el chat emergente, que es el comportamiento correcto para un overlay.
Si usas una ventana de chat con sesión iniciada para moderar, mantenla en otra pantalla y no dentro de OBS.
Y recuerda que todo lo que aparece en el chat queda en la grabación. Un overlay de chat convierte el VOD en una copia permanente de lo que se dijo.
And a chat overlay on a silent stream is a reminder of the silence rather than a decoration. Viewers on a Twitch stream acts on the number behind it, and the other Twitch services we carry sit on one page.
Preguntas frecuentes sobre el chat en OBS
¿Qué dirección uso para el chat de Twitch en OBS?
La dirección del chat emergente de tu canal, que es la URL popout de twitch.tv con el nombre de tu canal y chat, no el enlace normal del canal.
¿Cómo hago que el fondo del chat sea transparente?
Con CSS personalizado en las propiedades de la fuente de navegador. Fondo transparente, letra más grande y ocultar el cuadro de entrada son lo básico.
¿Por qué mi fuente del chat deja de actualizarse?
Normalmente es la opción de apagar cuando no está visible, o una página desactualizada. Activar la actualización cuando la escena se vuelve activa arregla la mayoría de los casos.
¿Necesito un servicio de terceros?
No. El chat emergente más CSS cubre el caso normal. Los servicios agregan temas y efectos, y exigen autorizar tu cuenta.
¿Se verán mis controles de moderación en la transmisión?
No. El chat emergente se carga sin sesión iniciada en OBS, así que muestra el chat como lo ve un espectador.
¿Por qué el texto se ve tan pequeño?
La página se ajusta al tamaño de la fuente y la letra por defecto está pensada para un monitor. Súbela con CSS en lugar de cambiar el tamaño de la fuente.
Escribe tu @ o el enlace de tu perfil y te mostramos los paquetes de espectadores para tu cuenta. Nunca pedimos tu contraseña.
Sigue leyendo
- Espectadores en una transmisión de Twitch: un overlay de chat solo tiene algo que mostrar cuando hay alguien en la sala, y espectadores en una transmisión de Twitch actúa sobre esa cifra.
- Cuando el chat no aparece: la misma página alimenta el overlay y el chat del espectador, y cuando el chat no aparece explica por qué se queda en blanco.
- Configurar la transmisión en sí: el overlay es una pieza de la transmisión, y configurar la transmisión en sí cubre el resto.