Vários canais e sobreposições separadas

Leia todos os chats em um Dock enquanto escolhe quais plataformas aparecem em cada sobreposição do público.

Separe o chat por plataforma em 4 etapas

Exemplo: uma sobreposição mostra só Twitch e outra só YouTube. Você continua lendo tudo em um Dock.

  1. Adicione todos os seus chats ao Social Stream Ninja. Confira se uma mensagem nova de cada um aparece no seu Dock de chat da transmissão (Streaming Chat Dock). Mantenha esse Dock sem filtros. É a sua visualização.
  2. Copie seu link gerado de dock.html duas vezes. Copiar mantém sessão, senha, versão e configurações do servidor.
  3. Adicione um filtro ao final de cada cópia, como &onlyfrom=twitch&hidemenu (veja a tabela abaixo).
  4. Adicione cada link ao OBS como uma Fonte de navegador. Dê nomes claros, como Chat da Twitch e chat do YouTube.
Mantenha cada sobreposição em sua própria fonte do navegador OBS.
Cada sobreposição tem sua própria fonte de navegador.
  1. Captura Twitch + YouTube
  2. Uma sessão do SSN Seu Dock recebe os dois
  3. Visualizações no OBS Somente Twitch e somente YouTube
Um único fluxo pode alimentar várias visualizações filtradas.

Opções de filtro para sobreposições de chat

Quero mostrar… Adicione ao link do Dock
Só Twitch&onlyfrom=twitch&hidemenu
Só YouTube&onlyfrom=youtube&hidemenu
Twitch e YouTube juntos&onlyfrom=twitch,youtube&hidemenu
Tudo exceto Discord&hidefrom=discord&hidemenu

Um exemplo completo:

https://socialstream.ninja/dock.html?session=YOUR_SESSION_ID&onlyfrom=twitch&hidemenu
Use onlyfrom e hidefrom aqui. Opções de outras sobreposições, como onlytype, podem não funcionar nesta página. YouTube Shorts tem seu próprio tipo: adicione youtubeshorts se sua captura informar esse tipo. Veja Tipos de fontes.
  1. Copie seu link gerado de featured.html duas vezes.
  2. Adicione &onlyfrom=twitch a um e &onlyfrom=youtube ao outro.
  3. Mantenha o Dock aberto para escolher mensagens.
Featured Chat aceita uma plataforma por link. A lista separada por vírgulas (twitch,youtube) só funciona no Dock.

O filtro só decide quais mensagens selecionadas uma página aceita. Não cria filas separadas. Uma seleção rejeitada também não limpa a tela. Ao mudar de segmento, limpe a mensagem em destaque para não deixar a anterior aparecendo.

Dois canais na mesma plataforma

onlyfrom=twitch significa toda a Twitch, não um canal específico. Nomes de canais e títulos de transmissão não podem ser usados como nomes de filtro.

Quero…Faça isto
Mostrar de qual canal veio cada mensagemAdicione &showchannelname (funciona quando a fonte envia o nome do canal).
Fazer duas transmissões totalmente separadasUse instâncias ou perfis de captura separados, cada um com sua sessão e abrindo apenas suas próprias fontes.
Filtrar o Dock por aba do navegador&filtertid=123 (avançado, veja abaixo).
Uma sobreposição com outra sessão e sem captura correspondente ficará vazia. O parâmetro label dá nome à página para roteamento; não é um filtro de canal.
Como filtertid funciona
  • Aceita o ID numérico da aba do navegador de onde veio a mensagem. Separe vários por vírgulas.
  • Encontre o tid em uma mensagem real capturada. Veja a Referência de eventos e Comandos e API.
  • Não é um ID de canal da plataforma.
  • IDs de aba podem mudar quando uma fonte é reaberta. Fontes sem um ID de aba correspondente podem ficar ocultas.
  • Funciona só no Dock, não como filtro de canal do Featured Chat.

Teste cada visualização

  1. Envie uma mensagem simulada da Twitch e outra do YouTube para uma sessão de teste. Use Criar mensagens de teste.
  2. Confira se ambos aparecem no Dock e se cada sobreposição de chat mostra apenas sua plataforma.
  3. Destaque cada mensagem e depois pressione limpar. Confira cada página de destaques após trocar de plataforma.
  4. Repita com uma mensagem real de cada fonte. Mensagens simuladas não têm IDs reais de aba.
ProblemaTente isto
Uma visualização está vaziaRemova o filtro por um momento. Se o chat voltar, confira o tipo exato da fonte ou o ID da aba.
Continua vazio sem o filtroVeja solução de problemas de sessão e roteamento.
Renomear a fonte do OBS não mudou nadaRenomear não muda o link salvo. Edite a própria URL.

Chat e alertas em uma aba do navegador

Combinar sobreposições empilha seus links de sobreposição em uma aba ou fonte de navegador do OBS. É útil para ler o chat no celular durante uma transmissão IRL.

  1. Cole o link do seu Dock de chat da transmissão (Streaming Chat Dock) na camada inferior.
  2. Cole o link do seu Caixa de alertas multistream na camada superior. Mantenha os links completos, com sessão, senha e opções de conexão.
  3. Deixe Fundo transparente do SSN marcado.
  4. Ative Permitir toques e rolagem nesta camada para o chat. Desative nos alertas para não bloquearem o chat.
  5. Pressione Prévia, depois Mostrar código QR e leia com seu celular. Ou pressione Copiar link combinado para colar em uma fonte de navegador.

A visualização combinada não tem controles de configuração. Apenas mostra suas sobreposições.

Opções da camada

Quero…Faça isto
Adicionar mais sobreposiçõesAté oito links.
Colocar uma camada na frente ou atrásUse os botões de seta.
Redimensionar ou mover uma camadaAbrir Tamanho e posição. Defina largura, altura, esquerda e topo em pixels (450) ou porcentagens (100%).
Voltar uma camada para tela cheiaRedefinir para tela cheia. Largura e altura vazias preenchem o navegador; esquerda e topo vazios começam no canto superior esquerdo.
Criar uma coluna de chat à esquerda (1920×1080)Camada de chat: largura 450, altura 1080, esquerda 0, topo 0. As outras camadas continuam em tela cheia.
Editar um link combinado depoisUse o link editável ou adicione ?edit=1 antes de #.
Começar de novoLimpar configuração salva.

Tamanhos em pixels ficam fixos ao redimensionar o navegador. Porcentagens acompanham o tamanho. Cada sobreposição mantém seu conteúdo e suas configurações.

Salvamento, celulares e privacidade
  • Links e opções de camada são salvos automaticamente neste navegador, mesmo incompletos. A navegação privada pode não mantê-los.
  • O link combinado e o código QR contêm o layout completo. Configure no computador, leia uma vez e salve nos favoritos do celular. Abrir também salva a configuração no navegador do celular.
  • Alterações no computador não atualizam um link antigo. Copie ou leia o novo link após editar. Nada é sincronizado pelo ID da sessão.
  • Mantenha links combinados e códigos QR tão privados quanto seus links de sobreposição.
  • A captura do SSN deve continuar ativa e o celular precisa acessar os mesmos servidores dos links originais. localhost ou 127.0.0.1 significa o próprio celular.
  • Links muito longos podem não caber em um código QR. Você ainda pode copiar o link.

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

Não é necessário CSS. Cada camada tem sua própria área. Configure a fonte de navegador do OBS para 1920×1080. Adicione primeiro as camadas inferiores e digite apenas números (sem vírgulas nem “px”) em Tamanho e posição.

CamadaLarguraAlturaEsquerdaTopo
1. Chat ao vivo / Dock4501000080
2. Contador de hype4508000
3. Mural de emojis / emotes1920108000
4. Chat em destaque147010804500
5. NinjaBacker (opcional)1920108000

Os 80 pixels superiores contêm Hype, com a coluna de chat abaixo. Quer o chat com altura total atrás do Hype? Defina a altura do Live Chat como 1080 e a posição superior para 0. Outros tamanhos de cena precisam de outros números.

  1. Cole os links completos das suas sobreposições. Copie das fontes de navegador existentes para manter sessão, senha, estilos e configurações de conexão. Deixe Fundo transparente do SSN marcado. Recortes, transformações, filtros e CSS personalizado do OBS não estão no link e não serão transferidos.
  2. Centralize o Hype na coluna. No link de hype.html , use &align=center. Substitua qualquer align=left ou align=right, e remova alignright. Para um visual compacto, experimente &combineall&hidetitle&style=compact&scale=0.75 (substitua os valores existentes). Aumente a altura da camada Hype se o estilo precisar de mais espaço.
  3. Mantenha Featured Chat ao lado da coluna de chat. Defina Esquerda = 450 e Largura = 1470 juntos (450 + 1470 = 1920). Mover uma camada de 1920 pixels de largura para a direita cortaria a borda. Adicione &center como featured.html para centralizar mensagens curtas nessa área. Para centralizar na cena toda, use Esquerda 0, Largura 1920 e &center.
  4. Coloque o NinjaBacker por último (opcional). Cole o link da sobreposição para espectadores como camada superior, com a animação de entrada pela direita. O combinador define a área e a ordem; o NinjaBacker define sua animação. O fundo deve ser transparente e o site precisa permitir incorporação. Essa camada não fez parte do exemplo testado.
  5. Visualize em 1920×1080. Envie uma mensagem com emojis, destaque uma mensagem pelo Dock e ative os dados Hype no SSN. O chat normal não escolhe uma mensagem em destaque sozinho.
  6. Copie o novo link combinado para o OBS. Configure essa fonte de navegador com largura 1920 e altura 1080. O tamanho da prévia não define isso. Ajuste à cena sem cortar. Após cada mudança de layout, copie o link novamente; o antigo mantém o layout anterior.
Saída combinada testada: Hype centralizado sobre uma coluna estreita de chat à esquerda, emojis por toda a cena e uma mensagem em destaque na parte inferior, à direita do chat.
Teste real no Chromium com quatro sobreposições SSN e um fluxo de teste. A imagem é transparente; o fundo escuro foi adicionado aqui para facilitar a leitura. Clique para ver em tamanho real. Suas fontes e cores vêm das configurações das suas sobreposições.
Desempenho: uma única fonte de navegador ainda executa todas as sobreposições dentro dela. Menos fontes no OBS não garante menor uso de CPU ou memória. Feche a prévia ao terminar e compare o OBS com as fontes antigas desligadas. O desempenho em Mac M1 e seu link do NinjaBacker não foram testados. Você pode manter Live Chat separado e combinar só o restante.

Se uma camada estiver vazia ou cobrir o chat

ProblemaTente isto
Uma camada está vaziaPrimeiro abra o link original sozinho. Alertas ficam vazios até chegar um evento. Combinar não captura nada novo.
Uma camada tem fundo opacoA transparência automática funciona para dock.html, featured.html, multi-alerts.html, e minecraft.html. Outras páginas precisam da própria configuração de transparência. Alguns sites externos bloqueiam a incorporação.
Não é possível tocar ou rolar o chatUma camada transparente ainda pode bloquear toques. Desative Permitir toques e rolagem nas camadas acima do chat que não precisam disso.
Sem som no celularCelulares podem precisar de um toque antes de reproduzir som. Ative toques nessa camada e toque nela. Teste no celular real antes de depender disso.