HTML5-Overlays: wie Browser-Grafik in deinen Stream kommt
Nahezu jedes moderne Live-Grafiksystem rendert heute in einer Browser-Engine. Diese Seite erklärt, was ein HTML5-Overlay ist, wie die Transparenz bis in deinen Encoder überlebt, wie die Grafik mit einem Bedienpult synchron bleibt und wo die Technik an ihre Grenzen stößt.
Was ein HTML5-Overlay ist
Es ist eine gewöhnliche Webseite, deren Hintergrund nie gemalt wird. Jede Grafik — Insert, Bug, Ticker — ist ein DOM-Element auf einer Fläche von 1920×1080. Weil die Seite nichts dahinter malt, ist jedes andere Pixel transparent.
Dein Encoder öffnet die Seite in einem eingebetteten Browser (OBS nutzt CEF, das Chromium Embedded Framework) und mischt das Ergebnis unter Beachtung des Alphakanals über deine Szene. Aus Sicht des Encoders ist es nur eine weitere Quelle mit Transparenz, wie ein bewegtes PNG.
Wie sich die Grafik auf Sendung ändert
Die Seite wird einmal geöffnet und bleibt offen. Drückt der Operator TAKE, geht ein Befehl über WebSocket an die Seite, die eine Klasse ergänzt oder einen Wert aktualisiert — CSS animiert das Element auf den Schirm. Nichts wird neu geladen, keine Datei geschrieben.
Genau das macht Live-Daten möglich: Ein Spielstand kann weiterzählen, eine Uhr laufen und ein Name sich ändern, während die Grafik noch auf Sendung ist, weil die Seite eine laufende Anwendung ist und keine gerenderte Datei.
Performance-Regeln, die zählen
- Nur transform und opacity animieren. Sie werden auf der GPU gemischt. width, height, top oder left erzwingen in jedem Frame ein Layout.
- Animierte box-shadow und filter meiden. Sie zeichnen große Flächen neu und sind die häufigste Ursache für ruckelnde Overlays.
- DOM klein halten. Ein paar Dutzend Elemente sind normal. Ein paar Tausend sind ein Stream, der Frames verliert.
- Nicht pollen. Ein Timer, der alle 100 ms neu zeichnet, kostet gleich viel, ob sich etwas geändert hat oder nicht; schick Updates über die Socket-Verbindung.
- An die Leinwand anpassen. In der Auflösung des Encoders bauen, damit die Browser-Quelle nie skaliert wird — das würde jede Textkante weich machen.
Wo HTML5 nicht reicht
Eine Browser-Quelle wird von deinem Encoder gemischt; die Grafik existiert also nur in diesem Encoder. Wer einen Bildmischer, einen Hardware-Keyer oder ein zweites Haus speisen muss, braucht ein Videosignal: SDI Key und Fill oder NDI mit Alphakanal. NDI-Grafik →
Framegenauigkeit ist die andere Grenze. Ein Browser zeichnet, wann er zeichnet; beim Streaming ist das unsichtbar, aber eine Kette, die Frames zählt, will einen echten Playout-Server.
Warum wir so bauen
Die Ausgabeseite von LowerThird Software ist bewusst langweiliges HTML5: transparenter Hintergrund, CSS-Animationen, Zustand über SignalR. Das heißt: Dein Encoder mischt auf Hardware, die er ohnehin nutzt, und ein Designer mit CSS-Kenntnissen kann das Aussehen ohne Neubau ändern. In OBS im Betrieb sehen →
Fertige HTML5-Grafik Vorlagen, Pult und transparente Ausgabe in einer Installation — kein Vorlagenprojekt von null.
Early Access anfragen