Black bars around the stream

Black bars are the empty strips that appear above, below or beside the stream when the picture does not fill the window. They are not a fault in the connection. They appear when the picture the Unreal app sends is not the same shape as the viewer's window, and the usual cause is a resolution that has been locked inside the app.

Where black bars come from

A poster on a wall

Think of the viewer's window as a wall, and the video as a poster pinned to it. The stream page is laid out in two layers:

  1. The background — the wall. It fills the whole window, and on Eagle 3D Streaming it is black.
  2. The video — the poster, drawn on top of the background.

If the poster is exactly the size of the wall, the wall is hidden. If the poster is a different shape, it is scaled down until it fits, and part of the wall stays uncovered. That uncovered part is what a viewer sees as a bar. It is black only because the background is black — with a white background the same strips would be white bars.

The picture is…compared with the windowThe viewer sees
the same size and shapee.g. 1920 × 1080 in a 1920 × 1080 windowa full picture, no bars
widere.g. 1920 × 1080 in a 1000 × 900 windowbars above and below
taller (narrower)e.g. 1920 × 1080 in a 1900 × 800 windowbars left and right

How the stream normally avoids them

The browser asks for the window's size

The cure is a picture made for the window: if the window is 1600 × 900, the picture has to be 1600 × 900. In the digital world this size is the resolution — width and height in pixels, such as 1920 × 1080 or 1280 × 720.

With Browser Resolution set to Dynamic (the default), this happens by itself while the stream runs:

  1. The Eagle 3D Streaming page measures the area the video occupies.
  2. It asks the Unreal app: “render at this size”.
  3. The app renders at that size, and the picture fills the window.
  4. When the viewer resizes the window or turns the phone, steps 1–3 run again.

When it stops working: the app has locked its resolution

Why only some viewers see bars

Step 3 only happens if the app listens. An Unreal project can fix its own resolution, and then it keeps rendering that size whatever the browser asks for. Common places where that is done:

  • Project or config settings — a fixed resolution set for the packaged game.
  • Blueprint — for example Set Screen Resolution followed by Apply Settings, or an Execute Console Command node running r.SetRes, at start-up or on a timer.
  • C++ — the same through UGameUserSettings::SetScreenResolution or r.SetRes.

The browser keeps asking for the window's size, the app keeps answering with its own, and the picture is scaled to fit — with bars.

This is why such an app looks fine to the person who built it and not to others. A viewer whose window happens to be exactly the locked size sees no bars. Every viewer with a different window size — a laptop, an ultrawide monitor, a phone, a page with a sidebar — sees them.

Browser ResolutionApp locks its resolution?Result
DynamicNoPicture follows every window. No bars.
DynamicYesBars for every viewer whose window is not the locked size.
Custom (fixed size)—One size for everybody, by choice. Bars wherever the window is a different shape.

How to fix it

Let the browser decide the size
  1. In the Control Panel, set Browser Resolution to Dynamic.
  2. In the Unreal project, remove whatever fixes the resolution: the project or config setting, the Blueprint nodes, or the C++ call. Search the project for SetScreenResolution and r.SetRes.
  3. Package and upload the new build.
  4. Test it: open the stream and drag the window to different shapes. The picture should follow the window each time instead of keeping its shape.

If the bars still appear after this, contact support with the app name and a screenshot.

Related

Last updated