Overlays HTML5: como os gráficos chegam à sua live
Quase todo sistema moderno de gráficos ao vivo desenha hoje num motor de navegador. Esta página explica o que é um overlay HTML5, como a transparência sobrevive até o seu encoder, como os gráficos ficam sincronizados com um painel e onde a técnica acaba.
O que é um overlay HTML5
É uma página web comum cujo fundo nunca é pintado. Cada gráfico — legenda, bug, ticker — é um elemento DOM posicionado num canvas de 1920×1080. Como a página não pinta nada atrás, todos os outros pixels são transparentes.
Seu encoder abre a página num navegador embutido (o OBS usa CEF, o Chromium Embedded Framework) e compõe o resultado sobre a cena respeitando o canal alfa. Para o encoder é só mais uma fonte com transparência, como um PNG que se move.
Como os gráficos mudam no ar
A página abre uma vez e fica aberta. Quando o operador aperta TAKE, um comando viaja por WebSocket até a página, que adiciona uma classe ou atualiza um valor, e o CSS anima o elemento. Nada é recarregado e nenhum arquivo é escrito.
É isso que torna os dados ao vivo possíveis: um placar pode avançar, um relógio correr e um nome mudar enquanto o gráfico está no ar, porque a página é uma aplicação rodando e não um arquivo renderizado.
Regras de desempenho que importam
- Anime só transform e opacity. São compostos na GPU. Animar width, height, top ou left força layout a cada frame.
- Evite box-shadow e filter animados. Repintam áreas grandes e são a causa mais comum de overlay travando.
- Mantenha o DOM pequeno. Algumas dezenas de elementos é normal. Alguns milhares é uma live perdendo frames.
- Não faça polling. Um timer que redesenha a cada 100 ms custa igual mesmo sem mudanças; empurre atualizações pelo socket.
- Combine com o canvas. Construa na resolução do encoder para o browser source nunca ser reescalado, o que amaciaria todas as bordas do texto.
Onde o HTML5 não basta
Um browser source é composto pelo seu encoder, então os gráficos só existem dentro dele. Se você precisa alimentar um switcher de estúdio, um keyer de hardware ou outra instalação, precisa de sinal de vídeo: SDI key e fill, ou NDI com canal alfa. Gráficos por NDI →
Precisão de frame é o outro limite. Um navegador desenha quando desenha; no streaming isso é invisível, mas uma cadeia que conta frames vai querer um servidor de playout de verdade.
Por que construímos assim
A página de saída do LowerThird Software é HTML5 propositalmente chato: fundo transparente, animações CSS, estado por SignalR. Isso significa que seu encoder compõe no hardware que já usa e que um designer que saiba CSS muda o visual sem recompilar. Veja rodando no OBS →
Gráficos HTML5 já prontos Templates, painel e saída transparente numa instalação — sem projeto de templates do zero.
Pedir acesso antecipado