Video quality sets how sharp the stream's picture is, against how much of the viewer's connection it uses. There are four levels — low, medium, high and ultra — and the same four words work everywhere: the Control Panel default, the viewer's settings menu, an iframe message and the Web SDK.
| Level | What the viewer gets | Use it when |
|---|---|---|
low | A softer picture that uses the least of the connection. Movement stays smooth on a weak link. | Mobile data, busy Wi-Fi, viewers far from the server, or an audience whose connection you do not know. |
medium | A balance of sharpness and data. The default for every new app. | Most audiences. Leave it here unless you have a reason to move. |
high | A clearly sharper picture, using noticeably more data. | Good home or office connections; product and architectural detail that has to read clearly. |
ultra | The sharpest picture the stream will send, at the most data. | Wired connections, demos at a venue with good network, close inspection of fine detail. |
The levels mean the same thing whichever Unreal Pixel Streaming plugin your app uses — the player translates each level into the right encoder setting for that plugin. That is the reason to use the level names rather than numbers.
| Set from | How | Works on the production player today |
|---|---|---|
| Control Panel | App configuration › Developer › Video Quality: the level every session starts at | Yes. Default medium. |
| Streaming interface | The viewer opens the settings bar and picks Quality › Ultra, High, Medium or Low | Yes |
| iframe | { "cmd": "setVideoDetailLevel", "value": "high" } | Yes |
| Web SDK | e3ds_controller.setVideoDetailLevel("high") | Yes |
| Unreal | No quality command from the app yet; relay through your page (see the Unreal tab) | Not directly |
Whichever way a level is set, the most recent request wins. The Control Panel value is where a session starts; anything set afterwards, by the viewer or by your page, replaces it for that session.
Post the level to the frame as a JSON string:
function setQuality(level) { // "low" | "medium" | "high" | "ultra"
document.getElementById("e3ds")
.contentWindow
.postMessage(JSON.stringify({ cmd: "setVideoDetailLevel", value: level }), "*");
}
document.getElementById("myHighButton").addEventListener("click", function () {
setQuality("high");
});
The level is not case-sensitive. A word the player does not know (for example
"hd") changes nothing, and the player writes a warning naming the four
accepted words to the browser console.
Send it once the stream is playing. A message sent while the page is still loading arrives before there is a stream to apply it to; for a starting level, use the Control Panel setting instead.
One call, with the level name:
document.getElementById("myHighButton").addEventListener("click", function () {
var result = e3ds_controller.setVideoDetailLevel("high");
});
For a word it does not know, it changes nothing and returns
{ ok: false, error: "...", accepted: ["low", "medium", "high", "ultra"] },
so a typo shows up instead of silently doing nothing.
The Web SDK demo has Quality: Low / Medium / High / Ultra buttons that make exactly this call. Demo manual.
Viewers can choose for themselves. In the stream's settings bar, the Quality button opens a menu with Ultra, High, Medium and Low. Picking one applies at once, for that viewer's session only.
The menu is part of the settings bar, so it is there whenever the bar is. The settings bar's Quality menu has the picture, and the streaming interface covers turning the bar on and off.
The starting level for everyone is set in the Control Panel: open the
app's configuration, Developer tab, Video Quality.
It is medium unless you change it.
Not available yet
The production player has no command that lets the Unreal app set the video quality directly.
What to do today: if your app is embedded in your own page, send your page a message from Unreal (see Sending and receiving data) and have the page make the iframe or Web SDK call above.
setQualityPoint with a numberThe number is an encoder setting where lower means a better picture — the opposite of what most people expect — and newer Unreal versions use a different scale running the other way. A number that looks right can ask for the worst picture. The level names avoid that, because the player picks the right number for your app.
The four numbers earlier documentation gave are treated exactly as the matching level:
| Legacy call | Same as | Replace with |
|---|---|---|
setQualityPoint(51) | low | setVideoDetailLevel("low") |
setQualityPoint(34) | medium | setVideoDetailLevel("medium") |
setQualityPoint(17) | high | setVideoDetailLevel("high") |
setQualityPoint(1) | ultra | setVideoDetailLevel("ultra") |
Other numbers from 0 to 51 are still accepted and give a picture in between, but
their effect depends on your app's Unreal version. In the iframe message, the same
replacement is { cmd: "setVideoDetailLevel", value: "high" }.
setAdaptiveQualityPoint(min, max) is legacy too and only works with older
Unreal versions. Do not use it.
| What you see | Why | What to do |
|---|---|---|
| Nothing changes, and the console says Unknown video detail level | The value is not one of the four words. | Use low, medium, high or ultra. |
| Nothing changes, no message (iframe) | The message was not a JSON string, went to the wrong frame, or was sent before the stream started. | Use JSON.stringify, target the stream's iframe, and send it after the stream is playing. |
ultra looks no sharper, or the stream starts to stutter | The connection cannot carry more. The encoder gives the best the link allows. | Use a lower level for that viewer; check their connection. |
| A spectator's quality cannot be changed | Spectators watch the host's stream; only the person in control sets quality. | Expected. |
An older page calling setQualityPoint now changes the picture where it did not before | On newer Unreal versions the legacy call used to do nothing. It now works. | That is your code taking effect. Move it to setVideoDetailLevel. |
The other features, each with the same ways to call it.
Last updated