Every browser source on your phone is its own small browser. Alerts, chat, a donation goal and a sub counter as four sources means four browsers running at once, while your phone is also handling the camera, the encoder and the cellular connection.
How Moblin renders browser widgets
Moblin is open source, so you can read exactly what happens in the source code:
- One browser per widget: Every browser widget gets its own web view, meaning its own instance of the browser engine with its own JavaScript and rendering.
- Snapshots on a timer: Moblin takes a snapshot of the page at fixed intervals. The default is 5 frames per second ("Base FPS", adjustable from 1 to 15). When the page plays a video, Moblin goes up to 30 frames per second.
- Laid over every camera frame: The latest snapshot is scaled and composited over every single camera frame before the stream goes out.
That also means your stream shows a frozen image of the overlay between two snapshots, which is why animations look choppy at 5 fps.
Moblin's developer puts it plainly in a GitHub issue: "Browser widgets are very inefficient." A higher frame rate would make the phone overheat very quickly. Other issues report freezes and crashes in scenes with browser widgets.
4 browser widgets
1 Vision overlay
The math is simple: four widgets at 5 fps are 20 snapshots per second from four browsers. One overlay with every element is 5 snapshots from one browser.
The fix: everything in one browser source
Instead of adding a separate browser source for each element, build one overlay that contains everything. That's exactly what Vision is built for:
- Chat, alerts, timers and scores as layers: Vision has its own layers for Twitch, YouTube and Kick chat, alerts, timers, countdowns, scores, progress bars and more. Everything ends up on the same page.
- Embed existing overlays: The Embed layer brings another web page into your Vision overlay, for example an existing StreamElements overlay, as long as that page allows embedding.
- Hidden elements don't keep running: When you hide a layer, Vision removes it from the page entirely after its exit animation. A hidden embed then stops using resources.
- Control it from your phone: Change scores, text and visibility live in the Vision app, or let your mods do it from their browser.
In the end, Moblin only needs one browser widget with one URL.
How to set it up in Moblin
- Create an overlay in Vision and add chat, alerts and every other element as layers. Embed existing overlays from other providers with the Embed layer.
- Copy the overlay's output URL.
- In Moblin, create a browser widget, paste the URL and set the width and height to the overlay size: 1920 × 1080, or 1080 × 1920 for vertical streams.
- Add the widget to your scene and delete your old browser widgets.
More tips against heat and lag
- Keep Base FPS low: 5 fps is usually enough for chat and alerts. Every step up means more snapshots per second.
- Use videos sparingly: As soon as a video plays on the page, Moblin switches to 30 fps. Use video alerts on purpose, not as a constant loop.
- Use scenes: Moblin only loads browser widgets in the active scene. Put what you don't need right now in another scene.
- Build light overlays: Even a single overlay costs performance if a lot animates at once. Less is more here.
The Vision Streaming Server, currently in early access, goes one step further: overlays run on a cloud server instead of your phone, and Moblin only sends the camera feed.
Common questions
Why are my browser widgets choppy in Moblin?
By default, Moblin only snapshots browser widgets 5 times per second, so the overlay stands still between two snapshots. You can raise "Base FPS" up to 15, but that costs more performance.
How many browser sources can my phone handle?
There's no fixed number; it depends on the device and the pages. Every extra source is another browser, though. The most efficient setup is a single source that contains every element.
Can I keep using my StreamElements overlay?
Yes. Embed it in your Vision overlay with the Embed layer, as long as the page allows embedding. You can also import your StreamElements alerts into Vision directly.
Does this work in other streaming apps too?
Yes. A Vision overlay's output URL is a regular web page and works in any app that supports web overlays.
