From 13cefae84c8b5538e80f87894d15ebb0019aefa2 Mon Sep 17 00:00:00 2001 From: Christian Stamati Date: Tue, 25 Nov 2025 22:51:36 +0100 Subject: [PATCH 1/3] Add ViewportResolutionScale configuration parameter --- Frontend/library/src/Config/Config.ts | 17 +++++++++++++++++ Frontend/library/src/VideoPlayer/VideoPlayer.ts | 10 +++++++--- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/Frontend/library/src/Config/Config.ts b/Frontend/library/src/Config/Config.ts index 165359ee..abb07761 100644 --- a/Frontend/library/src/Config/Config.ts +++ b/Frontend/library/src/Config/Config.ts @@ -65,6 +65,7 @@ export class NumericParameters { static MaxReconnectAttempts = 'MaxReconnectAttempts' as const; static StreamerAutoJoinInterval = 'StreamerAutoJoinInterval' as const; static KeepaliveDelay = 'KeepaliveDelay' as const; + static ViewportResolutionScale = 'ViewportResScale' as const; } export type NumericParametersKeys = Exclude; @@ -821,6 +822,22 @@ export class Config { useUrlParams ) ); + + this.numericParameters.set( + NumericParameters.ViewportResolutionScale, + new SettingNumber( + NumericParameters.ViewportResolutionScale, + 'Viewport Resolution Scale', + 'Scale factor for viewport resolution when MatchViewportResolution is enabled. 1.0 = 100%, 0.5 = 50%, 2.0 = 200%.', + 0.1 /*min*/, + 10.0 /*max*/, + settings && + Object.prototype.hasOwnProperty.call(settings, NumericParameters.ViewportResolutionScale) + ? settings[NumericParameters.ViewportResolutionScale] + : 1.0 /*value*/, + useUrlParams + ) + ); } /** diff --git a/Frontend/library/src/VideoPlayer/VideoPlayer.ts b/Frontend/library/src/VideoPlayer/VideoPlayer.ts index 70e64b85..40d2b66c 100644 --- a/Frontend/library/src/VideoPlayer/VideoPlayer.ts +++ b/Frontend/library/src/VideoPlayer/VideoPlayer.ts @@ -1,6 +1,6 @@ // Copyright Epic Games, Inc. All Rights Reserved. -import { Config, Flags } from '../Config/Config'; +import { Config, Flags, NumericParameters } from '../Config/Config'; import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.7'; /** @@ -222,9 +222,13 @@ export class VideoPlayer { return; } + const viewportResolutionScale = this.config.getNumericSettingValue( + NumericParameters.ViewportResolutionScale + ); + this.onMatchViewportResolutionCallback( - videoElementParent.clientWidth, - videoElementParent.clientHeight + videoElementParent.clientWidth * viewportResolutionScale, + videoElementParent.clientHeight * viewportResolutionScale ); this.lastTimeResized = new Date().getTime(); From a485192c9961083fcafa939cca0431dc605b14b5 Mon Sep 17 00:00:00 2001 From: Christian Stamati Date: Tue, 25 Nov 2025 23:10:42 +0100 Subject: [PATCH 2/3] Add Docs for Viewport Resolution Scale in Frontend/Docs/Settings Panel.md --- Frontend/Docs/Settings Panel.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Frontend/Docs/Settings Panel.md b/Frontend/Docs/Settings Panel.md index 3e41bb40..6509c8a2 100644 --- a/Frontend/Docs/Settings Panel.md +++ b/Frontend/Docs/Settings Panel.md @@ -31,6 +31,7 @@ This page will be updated with new features and commands as they become availabl | **Setting** | **Description** | | --- | --- | | **Match viewport resolution** | Resizes the Unreal Engine application resolution to match the browser's video element size.| +| **Viewport Resolution Scale** | Scale factor for viewport resolution when Match Viewport Resolution is enabled. Range: 0.1-10.0, Default: 1.0. Values above 1.0 (e.g., 1.5, 2.0) can improve visual quality on small screens by requesting higher resolution streams. | | **Control scheme** | If the scheme is `locked mouse` the browser will use `pointerlock` to capture your mouse, whereas if the scheme is `hovering mouse` you will retain your OS/browser cursor. | | **Color scheme** | Allows you to switch between light mode and dark mode. | From a568f6a6190719933f45c1347e31933c517b082b Mon Sep 17 00:00:00 2001 From: Christian Stamati Date: Sat, 17 Jan 2026 21:38:18 +0100 Subject: [PATCH 3/3] Address PR feedback: improve ViewportResolutionScale configuration --- .changeset/cold-toys-arrive.md | 6 ++++++ Frontend/Docs/Settings Panel.md | 4 ++-- Frontend/library/src/Config/Config.ts | 2 +- Frontend/ui-library/src/Config/ConfigUI.ts | 6 ++++++ 4 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 .changeset/cold-toys-arrive.md diff --git a/.changeset/cold-toys-arrive.md b/.changeset/cold-toys-arrive.md new file mode 100644 index 00000000..f2cc31da --- /dev/null +++ b/.changeset/cold-toys-arrive.md @@ -0,0 +1,6 @@ +--- +'@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.7': minor +'@epicgames-ps/lib-pixelstreamingfrontend-ue5.7': minor +--- + +Added Viewport Resolution Scale parameter to request higher resolution streams on small screens diff --git a/Frontend/Docs/Settings Panel.md b/Frontend/Docs/Settings Panel.md index 654b2e94..45ea48f8 100644 --- a/Frontend/Docs/Settings Panel.md +++ b/Frontend/Docs/Settings Panel.md @@ -30,8 +30,8 @@ This page will be updated with new features and commands as they become availabl ### UI | **Setting** | **Description** | | --- | --- | -| **Match viewport resolution** | Resizes the Unreal Engine application resolution to match the browser's video element size.| -| **Viewport Resolution Scale** | Scale factor for viewport resolution when Match Viewport Resolution is enabled. Range: 0.1-10.0, Default: 1.0. Values above 1.0 (e.g., 1.5, 2.0) can improve visual quality on small screens by requesting higher resolution streams. | +| **Match viewport resolution** | Resizes the Unreal Engine application resolution to match the browser's video element size. (Note: We recommend using `-windowed` on the UE side to allow scaling beyond monitor size.)| +| **Viewport Resolution Scale** | Scale factor for viewport resolution when Match Viewport Resolution is enabled. Range: 0.1-3.0, Default: 1.0 (no scaling). Values above 1.0 (e.g., 1.5, 2.0) can improve visual quality on small screens by requesting higher resolution streams. | | **Control scheme** | If the scheme is `locked mouse` the browser will use `pointerlock` to capture your mouse, whereas if the scheme is `hovering mouse` you will retain your OS/browser cursor. | | **Color scheme** | Allows you to switch between light mode and dark mode. | diff --git a/Frontend/library/src/Config/Config.ts b/Frontend/library/src/Config/Config.ts index abb07761..7b52689a 100644 --- a/Frontend/library/src/Config/Config.ts +++ b/Frontend/library/src/Config/Config.ts @@ -830,7 +830,7 @@ export class Config { 'Viewport Resolution Scale', 'Scale factor for viewport resolution when MatchViewportResolution is enabled. 1.0 = 100%, 0.5 = 50%, 2.0 = 200%.', 0.1 /*min*/, - 10.0 /*max*/, + 3.0 /*max*/, settings && Object.prototype.hasOwnProperty.call(settings, NumericParameters.ViewportResolutionScale) ? settings[NumericParameters.ViewportResolutionScale] diff --git a/Frontend/ui-library/src/Config/ConfigUI.ts b/Frontend/ui-library/src/Config/ConfigUI.ts index 375932be..ffcc1162 100644 --- a/Frontend/ui-library/src/Config/ConfigUI.ts +++ b/Frontend/ui-library/src/Config/ConfigUI.ts @@ -203,6 +203,12 @@ export class ConfigUI { if (isSettingEnabled(settingsConfig, Flags.MatchViewportResolution)) this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.MatchViewportResolution)); + if (isSettingEnabled(settingsConfig, NumericParameters.ViewportResolutionScale)) + this.addSettingNumeric( + viewSettingsSection, + this.numericParametersUi.get(NumericParameters.ViewportResolutionScale) + ); + if (isSettingEnabled(settingsConfig, Flags.HoveringMouseMode)) this.addSettingFlag(viewSettingsSection, this.flagsUi.get(Flags.HoveringMouseMode));