Overlay HTML5: come la grafica del browser arriva alla tua diretta
Quasi tutti i sistemi di grafica dal vivo moderni oggi disegnano in un motore browser. Questa pagina spiega cos’è un overlay HTML5, come la trasparenza sopravvive fino al tuo encoder, come la grafica resta sincronizzata con un pannello e dove la tecnica si ferma.
Cos’è un overlay HTML5
È una normale pagina web il cui sfondo non viene mai dipinto. Ogni grafica — sottopancia, bug, ticker — è un elemento del DOM posizionato su una tela di 1920×1080. Poiché la pagina non dipinge nulla dietro, ogni altro pixel è trasparente.
Il tuo encoder apre quella pagina in un browser incorporato (OBS usa CEF, il Chromium Embedded Framework) e compone il risultato sulla scena rispettando il canale alfa. Dal punto di vista dell’encoder è solo un’altra sorgente con trasparenza, come un PNG che si muove.
Come cambia la grafica in onda
La pagina si apre una volta e resta aperta. Quando l’operatore preme TAKE, un comando viaggia su WebSocket fino alla pagina, che aggiunge una classe o aggiorna un valore, e il CSS anima l’elemento. Non si ricarica nulla e non si scrive alcun file.
È questo a rendere possibili i dati dal vivo: un punteggio può avanzare, un cronometro correre e un nome cambiare mentre la grafica è ancora in onda, perché la pagina è un’applicazione in esecuzione e non un file renderizzato.
Le regole di prestazione che contano
- Anima solo transform e opacity. Sono composte sulla GPU. Animare width, height, top o left forza il layout a ogni fotogramma.
- Evita box-shadow e filter animati. Ridisegnano aree grandi e sono la causa più comune di un overlay che scatta.
- Tieni piccolo il DOM. Qualche decina di elementi è normale. Qualche migliaio è una diretta che perde fotogrammi.
- Niente polling. Un timer che ridisegna ogni 100 ms costa uguale che sia cambiato qualcosa o no; spingi gli aggiornamenti sulla socket.
- Allineati alla tela. Costruisci alla risoluzione dell’encoder così la sorgente non viene mai riscalata, cosa che ammorbidirebbe ogni bordo del testo.
Dove l’HTML5 non basta
Una sorgente browser è composta dal tuo encoder, quindi la grafica esiste solo dentro quell’encoder. Se devi alimentare un mixer di regia, un keyer hardware o una seconda sede, serve un segnale video: SDI key e fill, oppure NDI con canale alfa. Grafica NDI →
La precisione al fotogramma è l’altro limite. Un browser disegna quando disegna; nello streaming è invisibile, ma una catena che conta i fotogrammi vorrà un vero server di playout.
Perché costruiamo così
La pagina di uscita di LowerThird Software è HTML5 volutamente noioso: sfondo trasparente, animazioni CSS, stato via SignalR. Significa che il tuo encoder compone su hardware che già usa e che un designer che conosce il CSS può cambiare l’aspetto senza ricompilare. Vederlo in funzione in OBS →
Grafica HTML5 già pronta Template, pannello e uscita trasparente in un’installazione — nessun progetto di template da zero.
Richiedi l’accesso anticipato