Viewport resolution scale parameter 2

.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

Frontend/Docs/Settings Panel.md

@@ -30,7 +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.|
+| **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. |
 

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<keyof typeof NumericParameters, 'prototype'>;
@@ -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*/,
+                3.0 /*max*/,
+                settings &&
+                Object.prototype.hasOwnProperty.call(settings, NumericParameters.ViewportResolutionScale)
+                    ? settings[NumericParameters.ViewportResolutionScale]
+                    : 1.0 /*value*/,
+                useUrlParams
+            )
+        );
     }
 
     /**

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();

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));