Jede Browser-Quelle auf dem Handy ist ein eigener kleiner Browser. Alerts, Chat, Spendenziel und Sub-Counter als vier Quellen bedeuten vier Browser, die gleichzeitig laufen, während dein Handy nebenbei Kamera, Encoder und Mobilfunk stemmt.
So rendert Moblin Browser-Widgets
Moblin ist Open Source, deshalb lässt sich im Quellcode genau nachlesen, was passiert:
- Ein Browser pro Widget: Jedes Browser-Widget bekommt eine eigene WebView, also eine eigene Instanz der Browser-Engine mit eigenem JavaScript und eigenem Rendering.
- Screenshots im Takt: Moblin macht in festen Abständen einen Snapshot der Seite. Standard sind 5 Bilder pro Sekunde („Base FPS“, einstellbar von 1 bis 15). Spielt die Seite ein Video ab, geht Moblin auf 30 Bilder pro Sekunde hoch.
- Über jedes Kamerabild gelegt: Der letzte Snapshot wird skaliert und über jedes einzelne Kamerabild gelegt, bevor der Stream rausgeht.
Das heißt auch: Zwischen zwei Snapshots zeigt dein Stream ein eingefrorenes Bild des Overlays. Animationen wirken bei 5 fps deshalb ruckelig.
Der Entwickler von Moblin schreibt selbst in einem GitHub-Issue: „Browser widgets are very inefficient.“ Eine höhere Bildrate würde das Handy sehr schnell überhitzen lassen. In weiteren Issues berichten Nutzer von Freezes und Abstürzen in Szenen mit Browser-Widgets.
4 Browser-Widgets
1 Vision-Overlay
Die Rechnung ist einfach: Vier Widgets bei 5 fps sind 20 Snapshots pro Sekunde aus vier Browsern. Ein einziges Overlay mit allen Elementen sind 5 Snapshots aus einem Browser.
Die Lösung: alles in eine Browser-Quelle
Statt für jedes Element eine eigene Browser-Quelle anzulegen, baust du ein einziges Overlay, das alles enthält. Genau dafür ist Vision gemacht:
- Chat, Alerts, Timer und Punktestände als Layer: Vision hat eigene Layer für Twitch-, YouTube- und Kick-Chat, für Alerts, Timer, Countdowns, Punktestände, Fortschrittsbalken und mehr. Alles landet in derselben Seite.
- Bestehende Overlays einbetten: Mit dem Einbettungs-Layer holst du eine andere Webseite in dein Vision-Overlay, zum Beispiel ein bestehendes StreamElements-Overlay. Voraussetzung ist, dass die Seite das Einbetten erlaubt.
- Versteckte Elemente laufen nicht mit: Blendest du einen Layer aus, entfernt Vision ihn nach seiner Ausblend-Animation komplett aus der Seite. Ein ausgeblendetes Embed verbraucht dann keine Leistung mehr.
- Vom Handy aus steuern: Punktestände, Texte und Sichtbarkeit änderst du live in der Vision-App oder lässt es deine Mods vom Browser aus machen.
Am Ende steht in Moblin nur noch ein Browser-Widget mit einer URL.
So richtest du es in Moblin ein
- Erstelle in Vision ein Overlay und füge Chat, Alerts und alle anderen Elemente als Layer hinzu. Bestehende Overlays von anderen Anbietern bettest du mit dem Einbettungs-Layer ein.
- Kopiere die Ausgabe-URL des Overlays.
- Lege in Moblin ein Browser-Widget an, füge die URL ein und setze Breite und Höhe auf die Größe des Overlays, also 1920 × 1080 oder für Hochkant-Streams 1080 × 1920.
- Füge das Widget deiner Szene hinzu und lösche die alten Browser-Widgets.
Weitere Tipps gegen Hitze und Lags
- Base FPS niedrig lassen: 5 fps reichen für Chat und Alerts meist aus. Jede Stufe mehr heißt mehr Snapshots pro Sekunde.
- Videos sparsam einsetzen: Sobald ein Video in der Seite läuft, schaltet Moblin auf 30 fps hoch. Nutze Video-Alerts gezielt statt als Dauerschleife.
- Szenen nutzen: Moblin lädt Browser-Widgets nur in der aktiven Szene. Was du gerade nicht brauchst, gehört in eine andere Szene.
- Leichte Overlays bauen: Auch ein einzelnes Overlay kostet Leistung, wenn darin viel gleichzeitig animiert wird. Weniger ist hier mehr.
Noch einen Schritt weiter geht der Vision Streaming Server, der gerade im Early Access ist: Dort laufen die Overlays auf einem Cloud-Server statt auf deinem Handy, und Moblin schickt nur noch das Kamerabild.
Häufige Fragen
Warum ruckeln meine Browser-Widgets in Moblin?
Moblin fotografiert Browser-Widgets standardmäßig nur 5-mal pro Sekunde ab. Zwischen zwei Snapshots bleibt das Overlay stehen. Die „Base FPS“ lassen sich bis 15 erhöhen, das kostet aber mehr Leistung.
Wie viele Browser-Quellen verträgt mein Handy?
Dafür gibt es keinen festen Wert, es hängt vom Gerät und von den Seiten ab. Jede zusätzliche Quelle ist aber ein weiterer Browser. Am sparsamsten ist eine einzige Quelle, die alle Elemente enthält.
Kann ich mein StreamElements-Overlay weiter nutzen?
Ja. Bette es mit dem Einbettungs-Layer in dein Vision-Overlay ein, wenn die Seite das Einbetten erlaubt. Deine StreamElements-Alerts kannst du auch direkt in Vision importieren.
Funktioniert das auch in anderen Streaming-Apps?
Ja. Die Ausgabe-URL eines Vision-Overlays ist eine normale Webseite und funktioniert in jeder App, die Web-Overlays unterstützt.
