Vários canais e sobreposições separadas

1. Reúna a captura em uma sessão

Adicione os chats de origem pretendidos no SSN e confirme que uma mensagem nova de cada um chega ao mesmo Dock de chat da transmissão (Streaming Chat Dock) sem filtro. Mantenha esse Dock como sua visualização de operador.

Copie os links gerados para preservar sessão, senha, versão e configurações de servidor. Adicione cada visualização do público como uma fonte de navegador separada no OBS. Dê nomes descritivos às fontes do OBS, como Chat da Twitch e chat do YouTube.

2. Separe o chat contínuo por plataforma

Para chat contínuo, faça duas cópias da URL gerada de dock.html . Acrescente estas opções às cópias correspondentes:

Por exemplo, com uma conexão padrão:

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

Use onlyfrom e hidefrom para estas páginas. Não suponha que uma opção como onlytype de outra sobreposição funcione aqui. Use youtubeshorts separadamente quando a captura informar esse tipo. Consulte Tipos de fontes.

3. Separe as mensagens selecionadas

Para chat selecionado em vez de contínuo, duplique o link gerado de featured.html e adicione &onlyfrom=twitch a uma cópia e &onlyfrom=youtube à outra. Mantenha o Dock do operador aberto para selecionar mensagens.

O parâmetro atual do chat em destaque onlyfrom aceita um tipo de fonte. O exemplo do Dock separado por vírgulas acima não deve ser copiado para esse campo no chat em destaque.

4. Dois canais na mesma plataforma

onlyfrom=twitch seleciona a Twitch como plataforma, não um canal específico da Twitch. Nomes de canais e títulos de transmissão são metadados, não nomes intercambiáveis de filtros de URL. Adicione &showchannelname para mostrar nomes de canais quando fornecidos pela fonte.

Para filtragem avançada do Dock, &filtertid=123 aceita o ID numérico da aba de origem; IDs separados por vírgulas são compatíveis. Inspecione um payload capturado real para obter seu tid (veja Referência de eventos e Comandos e API). Não use aqui um ID de canal da plataforma. IDs de abas podem mudar quando as fontes reabrem, e fontes sem um ID de aba correspondente podem ser excluídas. Esta é uma opção do Dock, não um filtro geral de canal do chat em destaque.

Para produções totalmente independentes, use instâncias/perfis de captura separados com sessões distintas e abra somente as fontes pretendidas de cada produção. Dar uma sessão diferente a uma sobreposição sem captura correspondente a deixará inativa. O parâmetro label identifica uma página para roteamento; não é um filtro de canal.

5. Verifique cada visualização do público

1. Envie uma mensagem fictícia de teste da Twitch e outra do YouTube para uma sessão isolada usando Criar mensagens de teste.
2. Confirme que ambas aparecem no Dock do operador e que cada sobreposição de chat contínuo mostra apenas a fonte pretendida.
3. Destaque cada mensagem e teste o botão de limpar. Verifique todas as páginas de destaque visíveis após trocar de plataforma.
4. Repita com uma mensagem real de cada fonte conectada, pois mensagens sintéticas não podem estabelecer IDs reais das abas de origem.

Se uma visualização estiver vazia, remova temporariamente o filtro. Se o chat retornar, verifique o tipo exato da fonte ou ID da aba. Se continuar vazio, use solução de problemas de sessão e roteamento. Alterar o nome de uma fonte no OBS não atualiza a URL salva.

6. Chat e alertas em uma aba do navegador

Use Combinar sobreposições para sobrepor URLs existentes em uma aba ou uma fonte de navegador do OBS. Isso é útil para ler o chat no celular durante uma transmissão IRL.

1. Cole a URL gerada de Streaming Chat Dock na camada inferior e a URL da caixa de alertas multitransmissão na camada superior. Mantenha sessão, senha e opções de conexão nos dois links.
2. Deixe Fundo transparente do SSN marcado. Ative “Permitir toques e rolagem nesta camada” para o chat e desative para os alertas, para que eles não bloqueiem a interação com o chat.
3. Selecione Prévia, depois Mostrar código QR e escaneie com a câmera do celular. Ou selecione Copiar link combinado para colar o resultado em uma fonte de navegador. A visualização combinada não tem controles de configuração.

Você pode adicionar até oito URLs e usar os botões de seta para mover uma camada para trás ou para a frente de outra. As camadas preenchem o navegador por padrão. Expanda Tamanho e posição em uma camada para definir largura, altura, deslocamento à esquerda e deslocamento superior em pixels (por exemplo, 450) ou porcentagens (por exemplo, 100%). Largura e altura em branco preenchem o navegador; deslocamentos em branco começam no canto superior esquerdo. Redefinir para tela cheia limpa o posicionamento da camada. Cada sobreposição mantém seu próprio conteúdo e configurações.

Para uma coluna de chat à esquerda em uma fonte de navegador do OBS de 1920×1080, defina a largura da camada de chat para 450, altura para 1080, posição esquerda para 0, e a posição superior para 0. As outras camadas podem permanecer em tela cheia. Para Hype acima do chat e chat em destaque deslocado para a direita, use a configuração de layout do OBS abaixo. Os tamanhos em pixels permanecem fixos quando o navegador muda de tamanho; as porcentagens acompanham a largura ou altura do navegador.

Use o link editável para reabrir a configuração com suas URLs e posições preenchidas. Para editar um link combinado depois, adicione ?edit=1 antes de seu #.

Seus links e opções de camada são salvos automaticamente neste navegador, incluindo configurações inacabadas. Reabra Combinar sobreposições para continuar editando ou selecione Limpar configuração salva para recomeçar. O armazenamento do navegador pode estar indisponível ou ser temporário na navegação privada.

O link combinado e o código QR contêm o layout completo e as URLs. Configure no desktop, escaneie uma vez no celular e salve a visualização combinada nos favoritos. Abri-la também salva a configuração no navegador do celular. Alterações no desktop não atualizam automaticamente um link antigo: copie ou escaneie o novo link após editar. Este recurso não sincroniza configurações pelo ID de sessão.

Mantenha links combinados e códigos QR tão privados quanto os links individuais de sobreposição. A captura do SSN precisa continuar em execução, e o celular deve conseguir acessar os servidores usados pelas URLs originais. Um endereço localhost ou 127.0.0.1 aponta para o dispositivo que abre o link. URLs muito longas podem exceder a capacidade do QR; o link combinado ainda pode ser copiado.

Exemplo no OBS: coluna de chat à esquerda com efeitos em tela cheia

Você não precisa de CSS para este layout. Cada camada é sua própria área de navegador. Defina a fonte de navegador geral do OBS como 1920×1080, depois use estes valores na seção de cada camada Tamanho e posição. Digite somente os números, sem vírgulas nem “px”. Adicione as camadas nesta ordem, começando pela inferior:

Os primeiros 80 pixels são reservados para Hype, deixando abaixo uma coluna de chat de 450 pixels de largura. Para que o chat ocupe toda a altura atrás do Hype, defina a altura do chat ao vivo como 1080 e a posição superior para 0. Outros tamanhos de cena precisam de valores diferentes em pixels.

1. Cole suas URLs completas de sobreposição. Copie das propriedades das fontes de navegador existentes, mantendo sessão, senha, estilos e configurações de conexão. Deixe Fundo transparente do SSN marcado. Recortes, transformações, filtros e o campo CSS personalizado do OBS não fazem parte da URL e não são transferidos.
2. Centralize o Hype na coluna. Na sua URL hype.html , defina align=center (substitua um valor existente de align=left ou align=right, e remova alignright se houver). Com uma URL que já tem ?session=..., acrescente &align=center. Um estilo compacto inicial opcional é &combineall&hidetitle&style=compact&scale=0.75; substitua valores existentes em vez de duplicá-los. Aumente a altura da camada de Hype se o estilo escolhido precisar de mais espaço.
3. Mantenha o chat em destaque fora da coluna de chat. Defina Esquerda = 450 e Largura = 1470 juntos: 450 + 1470 = 1920. Deslocar uma camada de 1920 de largura 450 para a direita cortaria sua borda direita. O chat em destaque ainda posiciona a mensagem perto da parte inferior de sua própria área. Para centralizar mensagens mais curtas nessa área, adicione &center à sua featured.html URL. Para centralizar mensagens na cena inteira, use Esquerda = 0, Largura = 1920 e &center.
4. Mantenha o NinjaBacker acima do chat em destaque. Cole a URL de sobreposição do público como última camada, com a configuração existente de animação de entrada pela direita. O combinador controla sua área e ordem de camada; a sobreposição NinjaBacker controla a animação e o posicionamento interno. O fundo deve ser transparente e o site deve permitir incorporação. Essa camada opcional não fez parte do teste de exemplo com quatro sobreposições.
5. Visualize em 1920×1080. Envie uma mensagem de teste com emojis, destaque uma mensagem pelo Dock e ative os dados de Hype no SSN. Chat normal, por si só, não seleciona uma mensagem em destaque. Confirme que cada sobreposição funciona separadamente se continuar vazia.
6. Copie o novo link combinado para o OBS. Defina a largura da própria fonte de navegador como 1920 e a altura como 1080. O tamanho da prévia do combinador não define as dimensões do OBS. Ajuste a nova fonte à cena sem recortar. Após cada edição do layout, copie novamente o link combinado; um link antigo no OBS manterá o layout antigo.

Desempenho: uma fonte de navegador ainda executa cada sobreposição incorporada e suas conexões. Combinar reduz o número de fontes no OBS, mas não garante menor uso de CPU ou memória. Feche a prévia do navegador ao terminar e compare o desempenho do OBS com as fontes antigas desativadas. O desempenho no macOS M1/OBS e a URL específica do NinjaBacker ainda precisam ser verificados na sua configuração. Você pode manter o chat ao vivo separado e combinar só as outras sobreposições se funcionar melhor.

Se uma camada estiver vazia ou cobrir o chat

• Primeiro, abra cada URL original separadamente. Alertas normalmente ficam vazios até chegar um evento; combinar páginas não captura novos eventos.
• A transparência automática oferece suporte a dock.html, featured.html, multi-alerts.html, e minecraft.html. Outras páginas precisam de suas próprias configurações de fundo transparente. Alguns sites externos bloqueiam completamente a incorporação.
• Uma camada transparente ainda pode bloquear toques. Desative Permitir toques e rolagem em qualquer camada acima do chat que não precise de interação.
• Navegadores móveis podem exigir interação com a página antes de reproduzir som. Se necessário, ative a interação dessa camada e toque nela; as restrições de reprodução automática do navegador ainda se aplicam. Verifique o áudio no celular real antes de depender dele.