Lower thirds no OBS: um browser source, todos os gráficos
O OBS Studio exibe gráficos HTML5 ao vivo de forma nativa — sem plugin, sem placa de captura, sem segunda máquina. Esta é a configuração exata para lower thirds no OBS, placares e tickers com um único browser source transparente, mais os problemas comuns e como resolvê-los.
Por que browser source e não fonte de mídia
Uma fonte de mídia toca um arquivo. Um browser source roda uma página viva, composta sobre a sua cena com transparência total e atualizada em tempo real. Essa diferença é tudo para gráficos ao vivo: a página muda o próprio conteúdo enquanto está no ar, então placar ou nome se atualizam sem tocar no OBS.
Além disso, uma fonte só carrega todos os gráficos. Legenda, placar e ticker são elementos da mesma página transparente, então nunca saem de alinhamento e você não monta uma pilha de doze fontes.
Adicionando a fonte — passo a passo
- Inicie o LowerThird Software. Ele serve o painel e a página de saída a partir da sua máquina.
- No OBS, selecione a cena que já tem sua câmera ou captura de jogo. Clique em + em Fontes e escolha Navegador.
- Dê o nome Gráficos e confirme.
- Em URL, coloque
http://localhost:5275/output. - Largura 1920 e altura 1080 — igual ao seu canvas; não redimensione a fonte na cena.
- Deixe Desligar fonte quando não estiver visível desmarcado e marque Atualizar navegador quando a cena ficar ativa só se quiser que os gráficos zerem a cada troca de cena.
- Confirme e arraste a fonte para o topo da lista, acima da câmera.
Transparência: nada a configurar
Muita gente procura uma opção de transparência. Ela não existe e nem precisa: o browser source do OBS já respeita o canal alfa da página. Se a página não pinta fundo, o OBS compõe apenas os pixels desenhados.
Se você vê um retângulo preto ou branco, é a página pintando fundo, não o OBS. O CSS personalizado da janela resolve páginas de terceiros (body { background: transparent !important; }), mas uma página feita para TV já deve ser transparente.
Tamanho, escala e área segura
Crie sempre a fonte na mesma resolução do canvas — normalmente 1920×1080 — e posicione os gráficos dentro da página em vez de escalar a fonte no OBS. Escalar um browser source reamostra o texto e amacia todas as bordas; é a causa número um de legendas borradas.
Se você transmite em 1280×720, mantenha a fonte em 1920×1080 e deixe o OBS reduzir o canvas inteiro uma vez só no fim. Uma redução limpa é melhor que duas.
Cinco problemas e soluções
- A fonte está em branco. O aplicativo não está rodando ou a porta é outra. Abra a URL num navegador normal — se estiver vazia lá também, o problema não é o OBS.
- Os gráficos não atualizam. A página está em cache ou o socket caiu. Clique com o botão direito → Interagir, ou Atualizar. Uma página com WebSocket deve reconectar sozinha.
- O texto está mole. A fonte está escalada. Redefina a transformação (Ctrl+R com a fonte selecionada) e defina o tamanho nas propriedades.
- Está travando. A aceleração por hardware está desligada no OBS ou há uma animação cara. Prefira animações de transform e opacity, que a GPU resolve, a width, height ou sombras.
- O overlay some ao trocar de cena. A opção Desligar fonte quando não estiver visível está marcada. Desmarque ou adicione a mesma fonte em cada cena como referência, não como cópia.
Trabalhando ao vivo
Deixe o painel num segundo monitor ou num tablet na mesa — é uma página web, então qualquer aparelho com navegador na sua rede pode dirigi-lo. Digite o nome do próximo convidado enquanto o atual ainda está na tela e aperte TAKE quando o plano mudar.
Como os comandos vão por WebSocket, não há atraso de polling nem recarga: você clica e a animação começa no mesmo frame.
Pronto para testar na sua cena? Pegue uma versão de acesso antecipado, adicione um browser source e coloque uma legenda no ar em cerca de cinco minutos.
Pedir acesso antecipado