Varios canales y overlays separados

1. Combina la captura en una sesión

Añade en SSN los chats de origen que quieras usar y confirma que un mensaje nuevo de cada uno llegue al mismo Dock de chat de la transmisión (Streaming Chat Dock) sin filtros. Conserva ese Dock como tu vista de operador.

Copia los enlaces generados para conservar la sesión, la contraseña, la versión y los ajustes del servidor. Añade cada vista para el público como una fuente de navegador independiente en OBS. Asigna nombres descriptivos a las fuentes de OBS, como Chat de Twitch y Chat de YouTube.

2. Separa el chat continuo por plataforma

Para el chat continuo, haz dos copias de tu URL generada de dock.html . Añade estas opciones a las copias correspondientes:

Por ejemplo, con una conexión predeterminada:

https://socialstream.ninja/dock.html?session=YOUR_SESSION_ID&onlyfrom=twitch&hidemenu

Usa onlyfrom y hidefrom para estas páginas. No des por hecho que una opción como onlytype de otra superposición funcione aquí. Usa youtubeshorts por separado cuando la captura informe de ese tipo. Consulta Tipos de fuentes.

3. Separa los mensajes seleccionados

Para mostrar mensajes seleccionados en lugar de chat continuo, duplica el enlace generado de featured.html y añade &onlyfrom=twitch a una copia y &onlyfrom=youtube a la otra. Mantén abierto el Dock del operador para seleccionar mensajes.

El parámetro actual de Featured Chat onlyfrom acepta un solo tipo de fuente. No copies el ejemplo anterior del Dock con valores separados por comas en ese campo de Featured Chat.

4. Dos canales de la misma plataforma

onlyfrom=twitch selecciona Twitch como plataforma, no un canal concreto de Twitch. Los nombres de canales y los títulos de las transmisiones son metadatos, no nombres de filtros de URL intercambiables. Añade &showchannelname para mostrar los nombres de canales cuando la fuente los proporcione.

Para el filtrado avanzado del Dock, &filtertid=123 acepta el ID numérico de la pestaña de origen; admite varios ID separados por comas. Inspecciona un mensaje de datos capturado real para obtener su tid (consulta Referencia de eventos y Comandos y API). No uses aquí el ID de un canal de una plataforma. Los ID de pestaña pueden cambiar al reabrir las fuentes, y las fuentes sin un ID de pestaña coincidente pueden quedar excluidas. Esta opción es del Dock, no un filtro general de canales de Featured Chat.

Para producciones completamente independientes, usa instancias o perfiles de captura separados con sesiones distintas y abre allí solo las fuentes previstas para cada producción. Asignar a una superposición una sesión distinta sin la captura correspondiente la dejará inactiva. El parámetro de una superposición label identifica una página para el enrutamiento; no es un filtro de canales.

5. Verifica cada vista para el público

1. Envía un mensaje de prueba ficticio de Twitch y otro de YouTube a una sesión aislada mediante Crear mensajes de prueba.
2. Confirma que ambos aparezcan en el Dock del operador y que cada superposición de chat continuo muestre solo la fuente prevista.
3. Destaca cada mensaje y prueba el botón de borrar. Revisa todas las páginas destacadas visibles después de cambiar de plataforma.
4. Repite con un mensaje real de cada una de tus fuentes conectadas, ya que los mensajes sintéticos no pueden establecer los ID reales de las pestañas de origen.

Si una vista está vacía, quita temporalmente su filtro. Si vuelve el chat, revisa el tipo exacto de fuente o el ID de pestaña. Si sigue vacía, usa solución de problemas de sesión y enrutamiento. Cambiar el nombre de una fuente de OBS no actualiza su URL guardada.

6. Chat y alertas en una pestaña del navegador

Usa Combinar superposiciones para colocar URL de superposiciones existentes en capas dentro de una pestaña o una fuente de navegador de OBS. Resulta útil para leer el chat en el teléfono durante una transmisión IRL.

1. Pega la URL generada de Streaming Chat Dock en la capa inferior y la URL de Multi-Stream Alert Box en la superior. Conserva la sesión, la contraseña y las opciones de conexión en ambos enlaces.
2. Deja Fondo transparente de SSN activado. Activa «Permitir toques y desplazamiento en esta capa» para el chat y desactívalo para las alertas, para que no bloqueen la interacción con el chat.
3. Selecciona Vista previa, luego Mostrar código QR y escanéalo con la cámara del teléfono. O selecciona Copiar enlace combinado para pegar el resultado en una fuente de navegador. La vista combinada no tiene controles de configuración.

Puedes añadir hasta ocho URL y usar los botones de flecha para mover una capa detrás o delante de otra. Por defecto, las capas ocupan todo el navegador. Despliega Tamaño y posición en una capa para establecer su ancho, alto y desplazamientos izquierdo y superior en píxeles (por ejemplo, 450) o porcentajes (por ejemplo, 100%). Si dejas el ancho y el alto vacíos, se ocupa todo el navegador; si dejas los desplazamientos vacíos, se empieza en la esquina superior izquierda. Restablecer a pantalla completa borra la posición de esa capa. Cada superposición conserva su propio contenido y ajustes.

Para una columna de chat a la izquierda en una fuente de navegador de OBS de 1920×1080, establece el ancho de la capa de chat en 450, el alto en 1080, la posición izquierda en 0, y la posición superior en 0. Las demás capas pueden seguir a pantalla completa. Para situar Hype encima del chat y desplazar Featured Chat a la derecha, usa la configuración de OBS que aparece abajo. Los tamaños en píxeles se mantienen al redimensionar el navegador; los porcentajes se adaptan a su ancho o alto.

Usa el enlace editable para reabrir la configuración con tus URL y posiciones ya introducidas. Para editar después un enlace combinado, añade ?edit=1 antes de su #.

Tus enlaces y opciones de capa se guardan automáticamente en este navegador, incluidas las configuraciones sin terminar. Vuelve a abrir Combinar superposiciones para seguir editando, o selecciona Borrar configuración guardada para empezar de nuevo. El almacenamiento del navegador puede no estar disponible o ser temporal en la navegación privada.

El enlace combinado y el código QR contienen el diseño completo y las URL. Configúralo en el equipo, escanéalo una vez con el móvil y guarda la vista combinada en favoritos. Al abrirlo, también se guarda la configuración en el navegador del teléfono. Los cambios en el equipo no actualizan automáticamente un enlace anterior: copia o escanea el nuevo enlace tras editar. Esta función no sincroniza los ajustes mediante el ID de sesión.

Mantén los enlaces combinados y los códigos QR tan privados como los enlaces individuales de las superposiciones. La captura de SSN debe seguir ejecutándose y el teléfono debe poder acceder a los servidores que usan las URL originales. Una dirección localhost o 127.0.0.1 apunta al dispositivo que abre el enlace. Las URL muy largas pueden superar la capacidad de un QR; el enlace combinado se puede copiar igualmente.

Configuración de OBS: columna de chat a la izquierda con efectos a pantalla completa

No necesitas CSS para este diseño. Cada capa tiene su propia área de navegador. Configura la fuente de navegador de OBS completa en 1920×1080, y luego usa estos valores en la sección de cada capa Tamaño y posición. Introduce solo los números, sin comas ni «px». Añade las capas en este orden, empezando por la inferior:

Los primeros 80 píxeles se reservan para Hype y debajo queda una columna de chat de 450 píxeles de ancho. Si prefieres que el chat ocupe toda la altura detrás de Hype, establece el alto de Live Chat en 1080 y la posición superior en 0. Otros tamaños de escena necesitan valores de píxeles diferentes.

1. Pega las URL completas de tus superposiciones. Cópialas de las propiedades de tus fuentes de navegador existentes, conservando la sesión, la contraseña, los estilos y los ajustes de conexión. Deja Fondo transparente de SSN marcado. Los recortes, las transformaciones, los filtros y el campo de CSS personalizado de OBS no forman parte de la URL y no se transfieren.
2. Centra Hype dentro de la columna. En la URL de hype.html , establece align=center (sustituye un valor existente de align=left o align=right, y elimina alignright si existe). Si la URL ya tiene ?session=..., añade &align=center. Un estilo compacto opcional para empezar es &combineall&hidetitle&style=compact&scale=0.75; sustituye los valores existentes en lugar de duplicarlos. Aumenta el alto de la capa Hype si el estilo elegido necesita más espacio.
3. Mantén Featured Chat fuera de la columna de chat. Configura Izquierda = 450 y Ancho = 1470 juntos: 450 + 1470 = 1920. Desplazar 450 píxeles a la derecha una capa de 1920 de ancho recortaría su borde derecho. Featured Chat sigue colocando el mensaje cerca de la parte inferior de su propia área. Para centrar los mensajes más cortos dentro de esa área, añade &center a su featured.html URL. Si prefieres mensajes centrados en toda la escena, usa Izquierda = 0, Ancho = 1920 y &center.
4. Mantén NinjaBacker por encima de Featured Chat. Pega la URL de su superposición para espectadores como última capa, con su ajuste de animación de entrada por la derecha existente. El combinador controla su área y el orden de las capas; la superposición de NinjaBacker controla su animación y posición interna. El fondo debe ser transparente y el sitio debe permitir la inserción. Esta capa opcional no formó parte de la prueba del ejemplo con cuatro superposiciones.
5. Vista previa a 1920×1080. Envía un mensaje de prueba de chat con emojis, destaca un mensaje desde el Dock y habilita los datos de Hype en SSN. El chat normal por sí solo no selecciona un mensaje de Featured Chat. Si alguna superposición sigue vacía, confirma que funcione por separado.
6. Copia el nuevo enlace combinado en OBS. Establece el Ancho de esa fuente de navegador en 1920 y el Alto en 1080. El tamaño de la vista previa del combinador no fija las dimensiones en OBS. Ajusta la nueva fuente a tu escena sin recortarla. Después de cada cambio de diseño, vuelve a copiar el nuevo enlace combinado; un enlace anterior de OBS conservará su diseño anterior.

Rendimiento: una fuente de navegador sigue ejecutando cada superposición insertada y sus conexiones. Combinarlas reduce el número de fuentes de OBS, pero no garantiza un menor consumo de CPU o memoria. Cierra la vista previa del navegador al terminar y compara el rendimiento de OBS con las fuentes anteriores desactivadas. Debes comprobar en tu equipo el rendimiento de macOS/OBS con M1 y tu URL concreta de NinjaBacker. Puedes mantener Live Chat separado y combinar solo las demás superposiciones si funciona mejor.

Si una capa está vacía o tapa el chat

• Abre primero cada URL original por separado. Las alertas normalmente permanecen vacías hasta que llega un evento; combinar páginas no captura eventos nuevos.
• La transparencia automática admite dock.html, featured.html, multi-alerts.html, y minecraft.html. Otras páginas necesitan sus propios ajustes de fondo transparente. Algunos sitios externos bloquean por completo la inserción.
• Una capa transparente también puede bloquear los toques. Desactiva Permitir toques y desplazamiento en cualquier capa situada encima del chat que no necesite interacción.
• Los navegadores móviles pueden exigir que interactúes con una página antes de reproducir sonido. Si hace falta, habilita la interacción para esa capa y tócala; las restricciones de reproducción automática del navegador siguen vigentes. Comprueba el audio en el teléfono real antes de depender de él.