Frame rate: what your app draws and what viewers get

The frame rate your viewers get matters as much as resolution. Aim for at least 30 frames per second. This page shows how to check your app's frame rate on the desktop and in Pixel Streaming (streamed locally on your own computer), and why the two numbers can differ.

Why 30 frames per second

A stream at 30 frames per second or more looks smooth and plays reliably in every browser we support. At 15 it may still work on a fast computer, but on some devices and stricter browsers it does not. We have seen iPhone Safari struggle to start or keep a 15 fps stream, possibly because of power-saving mode or similar restrictions on the phone. 30 is the safe minimum.

There are two frame rates

Frame rateWhat it isWhere to see it
App frame rateHow many frames your Unreal app draws per second on the machineOn the desktop, with a frame counter (check 1)
Stream frame rateHow many of those frames are encoded and reach the viewer's browser (WebRTC)In the stream's Info panel, while you stream your app locally (check 2)

In the best case the two are the same. Check both before you upload.

Check 1: the frame rate on the desktop

  1. Package your app and run it on your own computer as a normal desktop app.
  2. Development build: open the console (the ~ key) and type stat fps, or start the app with -ExecCmds="stat fps". The frame rate appears in a corner of the window. stat unit also shows where the time goes (game, draw, GPU).
  3. Shipping build: stat commands are removed from Shipping builds, so use an outside frame counter instead - for example your graphics card's overlay (NVIDIA or AMD) or Intel's free PresentMon.

If the desktop already shows less than 30, the stream cannot be higher: look for a frame rate limit in your project (Project Settings → Engine → General Settings → Framerate: Use Fixed Frame Rate or Smooth Frame Rate, or a t.MaxFPS in your config or Blueprints), and for anything heavy in the scene.

Check 2: the frame rate in local Pixel Streaming

  1. Stream your app locally, as described in Test your app locally.
  2. Open the Info panel from the stream's settings bar (Settings bar → Info) and read Frame rate. This is the frame rate the browser actually receives.
The Info panel listing GPU, streamer location, Unreal version, data received, resolution, frame rate, codec, network round trip, duration, quantization parameter and bitrate
The Info panel. Frame rate is the stream frame rate - compare it with your desktop number.

Why the two numbers can differ

Your app draws app frame rate Pixel Streaming project settings can cap WebRTC adapts to the viewer's network Viewer gets stream frame rate

Keep this in mind: a viewer on a weak connection can see a lower frame rate than you see at your desk.

Keep the frame rate, or keep the resolution

WebRTC has two ways to cope with a weak connection: lower the frame rate, or lower the resolution. If smooth motion matters more for your app than sharpness, set Pixel Streaming to keep the frame rate (its degradation preference). Then WebRTC lowers the resolution instead of dropping frames. How to choose and set it is covered in a separate article.

You seeMost likelyWhat to do
Desktop under 30A frame rate limit in the project, or a heavy sceneCheck the Framerate project settings and t.MaxFPS; see Optimise your app
Desktop 60, local stream far lower and always the same numberA cap in the Pixel Streaming plugin settingsCheck Project Settings → Plugins → Pixel Streaming
Desktop 60, stream lower only on some networksWebRTC adapting to the viewer's connectionNormal; choose whether to keep frame rate or resolution
Both 30 or moreGoodUpload

Related

Last updated