Lower third in OBS: una sorgente browser, tutta la grafica
OBS Studio mostra grafica HTML5 dal vivo in modo nativo — senza plugin, senza scheda di acquisizione, senza una seconda macchina. Ecco la configurazione esatta per lower third in OBS, punteggi e ticker con un’unica sorgente browser trasparente, più i problemi tipici e come risolverli.
Perché una sorgente browser e non una multimediale
Una sorgente multimediale riproduce un file. Una sorgente browser esegue una pagina web viva, composta sopra la scena con trasparenza completa e aggiornata in tempo reale. Per la grafica dal vivo la differenza è tutto: la pagina può cambiare i propri contenuti mentre è in onda, quindi un punteggio o un nome si aggiornano senza toccare OBS.
Inoltre una sola sorgente porta tutta la grafica. Sottopancia, punteggio e ticker sono elementi della stessa pagina trasparente: non si disallineano mai e non ti ritrovi con una pila di dodici sorgenti.
Aggiungere la sorgente, passo per passo
- Avvia LowerThird Software: serve il pannello e la pagina di uscita dalla tua macchina.
- In OBS seleziona la scena che contiene già la webcam o la cattura di gioco. Clicca su + in Sorgenti e scegli Browser.
- Chiamala Grafica e conferma.
- Imposta l’URL su
http://localhost:5275/output. - Larghezza 1920 e altezza 1080 — uguali alla tela; non ridimensionare la sorgente nella scena.
- Lascia deselezionato Spegni la sorgente quando non è visibile e attiva Aggiorna il browser quando la scena diventa attiva solo se vuoi azzerare la grafica a ogni cambio scena.
- Conferma e trascina la sorgente in cima all’elenco, sopra la telecamera.
Trasparenza: niente da configurare
Molti cercano un’impostazione per la trasparenza. Non esiste e non serve: la sorgente browser di OBS rispetta già il canale alfa della pagina. Se la pagina non dipinge lo sfondo, OBS compone solo i pixel disegnati.
Se vedi un rettangolo nero o bianco, è la pagina a dipingere lo sfondo, non OBS. Il CSS personalizzato nella finestra della sorgente può salvare una pagina di terzi (body { background: transparent !important; }), ma una pagina pensata per la messa in onda dovrebbe essere già trasparente.
Dimensioni, scala e area sicura
Crea sempre la sorgente alla stessa risoluzione della tela — di solito 1920×1080 — e posiziona la grafica dentro la pagina invece di scalare la sorgente in OBS. Scalare una sorgente browser ricampiona il testo e ammorbidisce ogni bordo: è la causa numero uno dei titoli sfocati.
Se trasmetti a 1280×720, tieni la sorgente a 1920×1080 e lascia che OBS riduca l’intera tela una sola volta alla fine. Una riduzione pulita vale più di due passaggi di scala.
Cinque problemi e le loro soluzioni
- La sorgente è vuota. L’applicazione non è avviata o la porta è diversa. Apri prima l’URL in un browser normale: se è vuota anche lì, il problema non è OBS.
- La grafica non si aggiorna. La pagina è in cache o la socket è caduta. Tasto destro sulla sorgente → Interagisci, oppure Aggiorna. Una pagina basata su WebSocket dovrebbe riconnettersi da sola.
- I titoli sembrano morbidi. La sorgente viene scalata. Reimposta la trasformazione (Ctrl+R con la sorgente selezionata) e imposta le dimensioni nelle proprietà.
- Tutto scatta. L’accelerazione hardware in OBS è disattivata, oppure c’è un’animazione costosa. Preferisci transform e opacity, gestite dalla GPU, a width, height o ombre.
- L’overlay sparisce al cambio scena. È attivo Spegni la sorgente quando non è visibile. Disattivalo, oppure aggiungi la stessa sorgente a ogni scena come riferimento e non come copia.
Lavorare mentre sei in diretta
Tieni il pannello su un secondo monitor o su un tablet sul tavolo: è una pagina web, quindi qualsiasi dispositivo con browser sulla tua rete può guidarlo. Scrivi il nome del prossimo ospite mentre quello attuale è ancora a schermo, poi premi TAKE al cambio inquadratura.
Poiché i comandi viaggiano su WebSocket non c’è ritardo di polling né ricaricamento: clicchi e l’animazione parte nello stesso fotogramma.
Pronto a provarlo nella tua scena? Prendi una build in accesso anticipato, aggiungi una sorgente browser e manda in onda un sottopancia in circa cinque minuti.
Richiedi l’accesso anticipato