Streaming at Large Resolution

If you are using version 3.18.0 (or higher) of our platform-sdk package, it has the added ability to configure a maximum stream resolution for Unreal Pixel Streaming applications of up to 4k (3840 x 2160).

Ensuring Stream Stability

By increasing the stream resolution, the bandwidth requirements for users streaming the model will significantly increase. Please see our Streaming Frame Rate & Bandwidth document for full details.

We have observed significant instability in the Unreal pixel streaming plugin when streaming at resolutions above 1080p, and found that much of this instability has been addressed by Epic in the 5.0.3 release for Unreal Engine; so if you plan on using higher streaming resolutions, we recommend updating to UE 5.0.3 or later.

Unreal's pixel streaming plugin may reduce the resolution of the stream to compensate in limited bandwidth situations, causing instability in the stream. If you intend to use resolution settings higher than 1080p, we strongly recommend passing

-PixelStreamingWebRTCDegradationPreference="MAINTAIN_RESOLUTION"

as a runtime parameter for your model in the PureWeb Console. This will improve the stability of streaming in Unreal Engine versions below 5.0.3, and improve the visual quality (albeit at the expense of framerate).

There are two other options available, depending on the behaviour you want in your streaming experience:

-PixelStreamingWebRTCDegradationPreference="MAINTAIN_FRAMERATE" 
-PixelStreamingWebRTCDegradationPreference="BALANCED"

Configuring High Resolution Streaming

To set the maximum stream resolution, there are a few steps that need to be followed.

Modify the VideoStream component

In your custom web client code, find the VideoStream tag in the App.tsx file. At the bottom of the tag, add a line to define the resolution:

Resolution={streamResolutionConfiguration(Resolution.qhd)}

Of course, you may want to use a different value than qhd. The full list of available parameters can be found at the bottom of this document.

The full VideoStream tag should now look something like this:

<VideoStream
	<VideoRef={videoRef}
		Emitter={props.InputEmitter}
		Stream={props.VideoStream}
		UseNativeTouchEvents={props.UseNativeTouchEvents}
		UsePointerLock={props.UsePointerLock}
		PointerLockRelease={props.PointerLockRelease}
		Resolution={streamResolutionConfiguration(Resolution.qhd)}
	/>
/>

Add a resolution parameter

Alternatively, you could define the resolution parameter in the client.json file. To do this, add the parameter and desired value like so:

“resolution”: “qhd”

Add necessary imports

Regardless of which option you choose above, you'll also need to add the following imports into your App.tsx file:

import {
	streamResolutionConfiguration
} from '@pureweb/platform-sdk';

import {
	VideoStream
} from '@pureweb/platform-sdk-react';

Passing Properties via URL

You can also pass a resolution parameter into your web client application via URL parameters like so:

https://your-url.com?resolution=qhd

Valid Resolution Parameters

The parameter you provide will define the maximum stream resolution. See the list below for the parameters and their respective resolution values.