@epicgames-ps/lib-pixelstreamingfrontend-ue5.5 1.0.2 → 1.1.0

package/dist/types/Util/EventEmitter.d.ts

@@ -313,6 +313,19 @@ export declare class LatencyCalculatedEvent extends Event {
     };
     constructor(data: LatencyCalculatedEvent['data']);
 }
+/**
+ * An event that is emitted when we receive the "onScreenKeyboard" command from UE.
+ */
+export declare class ShowOnScreenKeyboardEvent extends Event {
+    readonly type: 'showOnScreenKeyboard';
+    readonly data: {
+        showOnScreenKeyboard: boolean;
+        x: number;
+        y: number;
+        contents: string;
+    };
+    constructor(data: ShowOnScreenKeyboardEvent['data']);
+}
 /**
  * An event that is emitted when receiving data channel latency test response from server.
  * This event is handled by DataChannelLatencyTestController
@@ -441,7 +454,7 @@ export declare class WebRtcTCPRelayDetectedEvent extends Event {
     readonly type: 'webRtcTCPRelayDetected';
     constructor();
 }
-export type PixelStreamingEvent = AfkWarningActivateEvent | AfkWarningUpdateEvent | AfkWarningDeactivateEvent | AfkTimedOutEvent | VideoEncoderAvgQPEvent | WebRtcSdpEvent | WebRtcSdpOfferEvent | WebRtcSdpAnswerEvent | WebRtcAutoConnectEvent | WebRtcConnectingEvent | WebRtcConnectedEvent | WebRtcFailedEvent | WebRtcDisconnectedEvent | DataChannelOpenEvent | DataChannelCloseEvent | DataChannelErrorEvent | VideoInitializedEvent | StreamLoadingEvent | StreamPreConnectEvent | StreamReconnectEvent | StreamPreDisconnectEvent | PlayStreamErrorEvent | PlayStreamEvent | PlayStreamRejectedEvent | LoadFreezeFrameEvent | HideFreezeFrameEvent | StatsReceivedEvent | StreamerListMessageEvent | StreamerIDChangedMessageEvent | LatencyCalculatedEvent | LatencyTestResultEvent | DataChannelLatencyTestResponseEvent | DataChannelLatencyTestResultEvent | SubscribeFailedEvent | InitialSettingsEvent | SettingsChangedEvent | XrSessionStartedEvent | XrSessionEndedEvent | XrFrameEvent | PlayerCountEvent | WebRtcTCPRelayDetectedEvent;
+export type PixelStreamingEvent = AfkWarningActivateEvent | AfkWarningUpdateEvent | AfkWarningDeactivateEvent | AfkTimedOutEvent | VideoEncoderAvgQPEvent | WebRtcSdpEvent | WebRtcSdpOfferEvent | WebRtcSdpAnswerEvent | WebRtcAutoConnectEvent | WebRtcConnectingEvent | WebRtcConnectedEvent | WebRtcFailedEvent | WebRtcDisconnectedEvent | DataChannelOpenEvent | DataChannelCloseEvent | DataChannelErrorEvent | VideoInitializedEvent | ShowOnScreenKeyboardEvent | StreamLoadingEvent | StreamPreConnectEvent | StreamReconnectEvent | StreamPreDisconnectEvent | PlayStreamErrorEvent | PlayStreamEvent | PlayStreamRejectedEvent | LoadFreezeFrameEvent | HideFreezeFrameEvent | StatsReceivedEvent | StreamerListMessageEvent | StreamerIDChangedMessageEvent | LatencyCalculatedEvent | LatencyTestResultEvent | DataChannelLatencyTestResponseEvent | DataChannelLatencyTestResultEvent | SubscribeFailedEvent | InitialSettingsEvent | SettingsChangedEvent | XrSessionStartedEvent | XrSessionEndedEvent | XrFrameEvent | PlayerCountEvent | WebRtcTCPRelayDetectedEvent;
 export declare class PixelStreamingEventEmitter extends EventTarget {
     /**
      * Dispatch a new event.

package/dist/types/VideoPlayer/VideoPlayer.d.ts

@@ -24,6 +24,7 @@ export declare class VideoPlayer {
      * @param config the applications configuration. We're interested in the startVideoMuted flag
      */
     constructor(videoElementParent: HTMLElement, config: Config);
+    destroy(): void;
     setAudioElement(audioElement: HTMLAudioElement): void;
     /**
      * Sets up the video element with any application config and plays the video element.
@@ -51,7 +52,7 @@ export declare class VideoPlayer {
      * Get the current context of the html video elements parent
      * @returns - the current context of the video elements parent
      */
-    getVideoParentElement(): HTMLElement;
+    getVideoParentElement(): HTMLElement | undefined;
     /**
      * Set the Video Elements src object tracks to enable
      * @param enabled - Enable Tracks on the Src Object

package/dist/types/WebRtcPlayer/WebRtcPlayerController.d.ts

@@ -14,7 +14,7 @@ import { ResponseController } from '../UeInstanceMessage/ResponseController';
 import { SendMessageController } from '../UeInstanceMessage/SendMessageController';
 import { ToStreamerMessagesController } from '../UeInstanceMessage/ToStreamerMessagesController';
 import { DataChannelSender } from '../DataChannel/DataChannelSender';
-import { InputCoordTranslator, UntranslatedCoordUnsigned } from '../Util/InputCoordTranslator';
+import { InputCoordTranslator } from '../Util/InputCoordTranslator';
 import { PixelStreaming } from '../PixelStreaming/PixelStreaming';
 import { DataChannelLatencyTestRequest } from '../DataChannel/DataChannelLatencyTestResults';
 import { IInputController } from '../Inputs/IInputController';
@@ -74,11 +74,10 @@ export declare class WebRtcPlayerController {
      */
     constructor(config: Config, pixelStreaming: PixelStreaming);
     /**
-     * Make a request to UnquantizedAndDenormalizeUnsigned coordinates
-     * @param x x axis coordinate
-     * @param y y axis coordinate
+     * Destroys the video player and makes sure resources are freed. This helps to prevent the issue in chrome
+     * where it refuses to make new video players.
      */
-    requestUnquantizedAndDenormalizeUnsigned(x: number, y: number): UntranslatedCoordUnsigned;
+    destroyVideoPlayer(): void;
     /**
      * Handles when a message is received
      * @param event - Message Event
@@ -93,6 +92,7 @@ export declare class WebRtcPlayerController {
      * @param message
      */
     onCommand(message: ArrayBuffer): void;
+    handleOnScreenKeyboardCommand(command: any): void;
     /**
      * Handles a protocol message received from the streamer
      * @param message the message data from the streamer
@@ -338,6 +338,11 @@ export declare class WebRtcPlayerController {
      * Sends a request to the UE Instance to have ownership of Quality
      */
     sendRequestQualityControlOwnership(): void;
+    /**
+     * Send a `TextBoxEntry` message back to UE.
+     * @param contents The new contents of the UE side text box.
+     */
+    sendTextboxEntry(contents: string): void;
     /**
      * Handles when a Latency Test Result are received from the UE Instance
      * @param message - Latency Test Timings

package/eslint.config.mjs

@@ -1,18 +1,18 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
-import eslint from '@eslint/js';
+
 import tseslint from 'typescript-eslint';
+import baseConfig from '../../eslint.config.mjs'
 
 export default tseslint.config(
+    baseConfig,
     {
         ignores: ["src/__test__/**/*.ts", "**/*.test.ts"],
     },
-    eslint.configs.recommended,
-    tseslint.configs.recommendedTypeCheckedOnly,
     {
         languageOptions: {
             parser: tseslint.parser,
             parserOptions: {
-                project: 'tsconfig.base.json',
+                project: 'tsconfig.json',
             },
         },
         files: ["src/**/*.ts"],

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5",
-    "version": "1.0.2",
+    "version": "1.1.0",
     "description": "Frontend library for Unreal Engine 5.5 Pixel Streaming",
     "main": "dist/cjs/pixelstreamingfrontend.js",
     "module": "dist/esm/pixelstreamingfrontend.js",
@@ -32,7 +32,7 @@
         "typescript-eslint": "^8.24.0"
     },
     "dependencies": {
-        "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "^0.2.8",
+        "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "^0.2.9",
         "sdp": "^3.2.0"
     },
     "repository": {

package/src/Config/Config.ts

@@ -7,6 +7,7 @@ import { SettingText } from './SettingText';
 import { SettingOption } from './SettingOption';
 import { PixelStreamingEventEmitter, SettingsChangedEvent } from '../Util/EventEmitter';
 import { SettingBase } from './SettingBase';
+import { BrowserUtils } from '../Util/BrowserUtils';
 
 /**
  * A collection of flags that can be toggled and are core to all Pixel Streaming experiences.
@@ -25,6 +26,7 @@ export class Flags {
     static StartVideoMuted = 'StartVideoMuted' as const;
     static SuppressBrowserKeys = 'SuppressBrowserKeys' as const;
     static UseMic = 'UseMic' as const;
+    static UseModalForTextInput = 'UseModalForTextInput' as const;
     static UseCamera = 'UseCamera' as const;
     static KeyboardInput = 'KeyboardInput' as const;
     static MouseInput = 'MouseInput' as const;
@@ -128,6 +130,8 @@ export interface ConfigParams {
     initialSettings?: Partial<AllSettings>;
     /** If useUrlParams is set true, will read initial values from URL parameters and persist changed settings into URL */
     useUrlParams?: boolean;
+    /** If webSocketProtocols is set the protocols will be passed to the websocket constructor */
+    webSocketProtocols?: string | string[];
 }
 export class Config {
     /* A map of flags that can be toggled - options that can be set in the application - e.g. Use Mic? */
@@ -144,11 +148,14 @@ export class Config {
 
     private _useUrlParams: boolean;
 
+    private _webSocketProtocols?: string | string[];
+
     // ------------ Settings -----------------
 
     constructor(config: ConfigParams = {}) {
-        const { initialSettings, useUrlParams } = config;
+        const { initialSettings, useUrlParams, webSocketProtocols } = config;
         this._useUrlParams = !!useUrlParams;
+        this._webSocketProtocols = webSocketProtocols;
         this.populateDefaultSettings(this._useUrlParams, initialSettings);
     }
 
@@ -160,10 +167,17 @@ export class Config {
         return this._useUrlParams;
     }
 
+    /**
+     * Gets a protocol or list of protocols to pass to the websocket if set.
+     */
+    public get webSocketProtocols() {
+        return this._webSocketProtocols;
+    }
+
     /**
      * Populate the default settings for a Pixel Streaming application
      */
-    private populateDefaultSettings(useUrlParams: boolean, settings: Partial<AllSettings>): void {
+    private populateDefaultSettings(useUrlParams: boolean, settings?: Partial<AllSettings>): void {
         /**
          * Text Parameters
          */
@@ -202,33 +216,8 @@ export class Config {
             )
         );
 
-        const getBrowserSupportedVideoCodecs = function (): Array<string> {
-            const browserSupportedCodecs: Array<string> = [];
-            // Try get the info needed from the RTCRtpReceiver. This is only available on chrome
-            if (!RTCRtpReceiver.getCapabilities) {
-                Logger.Warning(
-                    'RTCRtpReceiver.getCapabilities API is not available in your browser, defaulting to guess that we support H.264.'
-                );
-                browserSupportedCodecs.push(
-                    'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f'
-                );
-                return browserSupportedCodecs;
-            }
-
-            const matcher = /(VP\d|H26\d|AV1).*/;
-            const codecs = RTCRtpReceiver.getCapabilities('video').codecs;
-            codecs.forEach((codec) => {
-                const str = codec.mimeType.split('/')[1] + ' ' + (codec.sdpFmtpLine || '');
-                const match = matcher.exec(str);
-                if (match !== null) {
-                    browserSupportedCodecs.push(str);
-                }
-            });
-            return browserSupportedCodecs;
-        };
-
         const getDefaultVideoCodec = function (): string {
-            const videoCodecs = getBrowserSupportedVideoCodecs();
+            const videoCodecs = BrowserUtils.getSupportedVideoCodecs();
             // If only one option, then select that.
             if (videoCodecs.length == 1) {
                 return videoCodecs[0];
@@ -247,7 +236,7 @@ export class Config {
         };
 
         const matchSpecifiedCodecToClosestSupported = function (specifiedCodec: string): string {
-            const browserSupportedCodecs: Array<string> = getBrowserSupportedVideoCodecs();
+            const browserSupportedCodecs: Array<string> = BrowserUtils.getSupportedVideoCodecs();
 
             // Codec supplied in url param is an exact match for the browser codec.
             // (e.g. H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f)
@@ -278,7 +267,7 @@ export class Config {
                 settings && Object.prototype.hasOwnProperty.call(settings, OptionParameters.PreferredCodec)
                     ? matchSpecifiedCodecToClosestSupported(settings[OptionParameters.PreferredCodec])
                     : getDefaultVideoCodec(),
-                getBrowserSupportedVideoCodecs(),
+                BrowserUtils.getSupportedVideoCodecs(),
                 useUrlParams,
                 matchSpecifiedCodecToClosestSupported
             )
@@ -341,6 +330,19 @@ export class Config {
             )
         );
 
+        this.flags.set(
+            Flags.UseModalForTextInput,
+            new SettingFlag(
+                Flags.UseModalForTextInput,
+                'Use modal for text input',
+                'When entering input into a streamed UE text widget, use an input modal.',
+                settings && Object.prototype.hasOwnProperty.call(settings, Flags.UseModalForTextInput)
+                    ? settings[Flags.UseModalForTextInput]
+                    : true,
+                useUrlParams
+            )
+        );
+
         this.flags.set(
             Flags.UseCamera,
             new SettingFlag(

package/src/Config/SettingBase.ts

@@ -18,7 +18,7 @@ export class SettingBase {
         label: string,
         description: string,
         defaultSettingValue: unknown,
-         
+
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }

package/src/Config/SettingFlag.ts

@@ -16,7 +16,7 @@ export class SettingFlag<CustomIds extends string = FlagsIds> extends SettingBas
         description: string,
         defaultFlagValue: boolean,
         useUrlParams: boolean,
-         
+
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }

package/src/Config/SettingNumber.ts

@@ -21,7 +21,7 @@ export class SettingNumber<CustomIds extends string = NumericParametersIds> exte
         max: number | null,
         defaultNumber: number,
         useUrlParams: boolean,
-         
+
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }

package/src/Config/SettingOption.ts

@@ -22,12 +22,12 @@ export class SettingOption<CustomIds extends string = OptionParametersIds> exten
         defaultTextValue: string,
         options: Array<string>,
         useUrlParams: boolean,
-         
+
         defaultUrlParamResolver: (urlParamValue: string) => string = function (value: string) {
             /* Return the string as-is by default */
             return value;
         },
-         
+
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }

package/src/Config/SettingText.ts

@@ -17,7 +17,7 @@ export class SettingText<CustomIds extends string = TextParametersIds> extends S
         description: string,
         defaultTextValue: string,
         useUrlParams: boolean,
-         
+
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }

package/src/Inputs/GamepadController.ts

@@ -21,7 +21,7 @@ declare global {
 /**
  * Gamepad layout codes enum
  */
- 
+
 export enum GamepadLayout {
     RightClusterBottomButton = 0,
     RightClusterRightButton = 1,
@@ -46,7 +46,6 @@ export enum GamepadLayout {
     RightStickHorizontal = 2,
     RightStickVertical = 3
 }
- 
 
 /**
  * Handles gamepad events from the document to send to the streamer.

package/src/Inputs/IInputController.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 /**
  * The base interface for all input controllers.
  * Since controllers mostly just register events and handle them the external interface is limited

package/src/Inputs/KeyboardController.ts

@@ -19,7 +19,6 @@ export class KeyboardController implements IInputController {
     onKeyDownListener: (event: KeyboardEvent) => void;
     onKeyUpListener: (event: KeyboardEvent) => void;
     onKeyPressListener: (event: KeyboardEvent) => void;
-    onCompositionEndListener: (event: CompositionEvent) => void;
 
     constructor(streamMessageController: StreamMessageController, config: Config, activeKeys: ActiveKeys) {
         this.streamMessageController = streamMessageController;
@@ -29,11 +28,9 @@ export class KeyboardController implements IInputController {
         this.onKeyDownListener = this.handleOnKeyDown.bind(this);
         this.onKeyUpListener = this.handleOnKeyUp.bind(this);
         this.onKeyPressListener = this.handleOnKeyPress.bind(this);
-        this.onCompositionEndListener = this.handleOnCompositionEnd.bind(this);
     }
 
     register() {
-        document.addEventListener('compositionend', this.onCompositionEndListener);
         document.addEventListener('keydown', this.onKeyDownListener);
         document.addEventListener('keyup', this.onKeyUpListener);
         //This has been deprecated as at Jun 13 2021
@@ -41,7 +38,6 @@ export class KeyboardController implements IInputController {
     }
 
     unregister() {
-        document.removeEventListener('compositionend', this.onCompositionEndListener);
         document.removeEventListener('keydown', this.onKeyDownListener);
         document.removeEventListener('keyup', this.onKeyUpListener);
         document.removeEventListener('keypress', this.onKeyPressListener);
@@ -100,33 +96,6 @@ export class KeyboardController implements IInputController {
         toStreamerHandlers.get('KeyPress')?.([keyCode]);
     }
 
-    private handleOnCompositionEnd(compositionEvent: CompositionEvent) {
-        if (compositionEvent.data && compositionEvent.data.length) {
-            compositionEvent.data.split('').forEach((char) => {
-                // This keydown, keypress, keyup flow is required to mimic the way characters are
-                // normally triggered
-                this.handleOnKeyDown(
-                    new KeyboardEvent('keydown', {
-                        keyCode: char.toUpperCase().charCodeAt(0),
-                        charCode: char.charCodeAt(0)
-                    })
-                );
-                this.handleOnKeyPress(
-                    new KeyboardEvent('keypress', {
-                        keyCode: char.toUpperCase().charCodeAt(0),
-                        charCode: char.charCodeAt(0)
-                    })
-                );
-                this.handleOnKeyUp(
-                    new KeyboardEvent('keyup', {
-                        keyCode: char.toUpperCase().charCodeAt(0),
-                        charCode: char.charCodeAt(0)
-                    })
-                );
-            });
-        }
-    }
-
     /**
      * Gets the Keycode of the Key pressed
      * @param keyboardEvent - Key board Event

package/src/Inputs/MouseController.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 import { MouseButtonsMask, MouseButton } from './MouseButtons';
 import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
 import { InputCoordTranslator } from '../Util/InputCoordTranslator';
@@ -57,22 +58,22 @@ export class MouseController implements IInputController {
     }
 
     registerMouseEnterAndLeaveEvents() {
-        const videoElementParent = this.videoPlayer.getVideoParentElement() as HTMLDivElement;
-        videoElementParent.addEventListener('mouseenter', this.onEnterListener);
-        videoElementParent.addEventListener('mouseleave', this.onLeaveListener);
+        const videoElementParent = this.videoPlayer.getVideoParentElement();
+        videoElementParent?.addEventListener('mouseenter', this.onEnterListener);
+        videoElementParent?.addEventListener('mouseleave', this.onLeaveListener);
     }
 
     unregisterMouseEnterAndLeaveEvents() {
-        const videoElementParent = this.videoPlayer.getVideoParentElement() as HTMLDivElement;
-        videoElementParent.removeEventListener('mouseenter', this.onEnterListener);
-        videoElementParent.removeEventListener('mouseleave', this.onLeaveListener);
+        const videoElementParent = this.videoPlayer.getVideoParentElement();
+        videoElementParent?.removeEventListener('mouseenter', this.onEnterListener);
+        videoElementParent?.removeEventListener('mouseleave', this.onLeaveListener);
     }
 
     private onMouseEnter(event: MouseEvent) {
         if (!this.videoPlayer.isVideoReady()) {
             return;
         }
-        this.streamMessageController.toStreamerHandlers.get('MouseEnter')();
+        this.streamMessageController.toStreamerHandlers.get('MouseEnter')?.();
         this.pressMouseButtons(event.buttons, event.x, event.y);
     }
 
@@ -80,7 +81,7 @@ export class MouseController implements IInputController {
         if (!this.videoPlayer.isVideoReady()) {
             return;
         }
-        this.streamMessageController.toStreamerHandlers.get('MouseLeave')();
+        this.streamMessageController.toStreamerHandlers.get('MouseLeave')?.();
         this.releaseMouseButtons(event.buttons, event.x, event.y);
     }
 

package/src/Inputs/MouseControllerHovering.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
 import { InputCoordTranslator } from '../Util/InputCoordTranslator';
 import { VideoPlayer } from '../VideoPlayer/VideoPlayer';

package/src/Inputs/MouseControllerLocked.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
 import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
 import { InputCoordTranslator, TranslatedCoordUnsigned } from '../Util/InputCoordTranslator';

package/src/PixelStreaming/PixelStreaming.ts

@@ -7,7 +7,6 @@ import { WebRtcPlayerController } from '../WebRtcPlayer/WebRtcPlayerController';
 import { Flags, NumericParameters } from '../Config/Config';
 import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
 import { InitialSettings } from '../DataChannel/InitialSettings';
-import { OnScreenKeyboard } from '../UI/OnScreenKeyboard';
 import {
     PixelStreamingEventEmitter,
     InitialSettingsEvent,
@@ -78,8 +77,6 @@ export class PixelStreaming {
 
     private allowConsoleCommands = false;
 
-    private onScreenKeyboardHelper: OnScreenKeyboard;
-
     private _videoStartTime: number;
     private _inputController: boolean;
 
@@ -104,13 +101,6 @@ export class PixelStreaming {
         // setup WebRTC
         this.setWebRtcPlayerController(new WebRtcPlayerController(this.config, this));
 
-        // Onscreen keyboard
-        this.onScreenKeyboardHelper = new OnScreenKeyboard(this.videoElementParent);
-        this.onScreenKeyboardHelper.unquantizeAndDenormalizeUnsigned = (x: number, y: number) =>
-            this._webRtcController.requestUnquantizedAndDenormalizeUnsigned(x, y);
-        this._activateOnScreenKeyboard = (command: any) =>
-            this.onScreenKeyboardHelper.showOnScreenKeyboard(command);
-
         this._webXrController = new WebXRController(this._webRtcController);
 
         this._setupWebRtcTCPRelayDetection = this._setupWebRtcTCPRelayDetection.bind(this);
@@ -277,15 +267,6 @@ export class PixelStreaming {
         this.config._registerOnChangeEvents(this._eventEmitter);
     }
 
-    /**
-     * Activate the on screen keyboard when receiving the command from the streamer
-     * @param command - the keyboard command
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _activateOnScreenKeyboard(command: any): void {
-        throw new Error('Method not implemented.');
-    }
-
     /**
      * Set the input control ownership
      * @param inputControlOwnership - does the user have input control ownership
@@ -819,6 +800,19 @@ export class PixelStreaming {
         return true;
     }
 
+    /**
+     * Sets the text contents of the currently focused UE text box widget.
+     * @param contents The new contents of the UE text box.
+     * @returns True if the message could be sent.
+     */
+    public sendTextboxEntry(contents: string): boolean {
+        if (!this._webRtcController.videoPlayer.isVideoReady()) {
+            return false;
+        }
+        this._webRtcController.sendTextboxEntry(contents);
+        return true;
+    }
+
     /**
      * Add a UE -> browser response event listener
      * @param name - The name of the response handler

package/src/UeInstanceMessage/StreamMessageController.ts

@@ -81,6 +81,10 @@ export class StreamMessageController {
             id: 51,
             structure: ['string']
         });
+        this.toStreamerMessages.set('TextboxEntry', {
+            id: 52,
+            structure: ['string']
+        });
         // Keyboard Input Message. Range = 60..69.
         this.toStreamerMessages.set('KeyDown', {
             id: 60,

package/src/Util/BrowserUtils.ts

@@ -0,0 +1,36 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
+
+export class BrowserUtils {
+    static getSupportedVideoCodecs(): Array<string> {
+        const browserSupportedCodecs: Array<string> = [];
+        // Try get the info needed from the RTCRtpReceiver. This is only available on chrome
+        if (!RTCRtpReceiver.getCapabilities) {
+            Logger.Warning(
+                'RTCRtpReceiver.getCapabilities API is not available in your browser, defaulting to guess that we support H.264.'
+            );
+            browserSupportedCodecs.push(
+                'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f'
+            );
+            return browserSupportedCodecs;
+        }
+
+        const matcher = /(VP\d|H26\d|AV1).*/;
+        const capabilities = RTCRtpReceiver.getCapabilities('video');
+        if (!capabilities) {
+            browserSupportedCodecs.push(
+                'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f'
+            );
+            return browserSupportedCodecs;
+        }
+        capabilities.codecs.forEach((codec) => {
+            const str = codec.mimeType.split('/')[1] + ' ' + (codec.sdpFmtpLine || '');
+            const match = matcher.exec(str);
+            if (match !== null) {
+                browserSupportedCodecs.push(str);
+            }
+        });
+        return browserSupportedCodecs;
+    }
+}

package/src/Util/EventEmitter.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 import { FlagsIds, NumericParametersIds, OptionParametersIds, TextParametersIds } from '../Config/Config';
 import { LatencyTestResults } from '../DataChannel/LatencyTestResults';
 import { AggregatedStats } from '../PeerConnectionController/AggregatedStats';
@@ -427,6 +428,23 @@ export class LatencyCalculatedEvent extends Event {
     }
 }
 
+/**
+ * An event that is emitted when we receive the "onScreenKeyboard" command from UE.
+ */
+export class ShowOnScreenKeyboardEvent extends Event {
+    override readonly type: 'showOnScreenKeyboard';
+    readonly data: {
+        showOnScreenKeyboard: boolean;
+        x: number;
+        y: number;
+        contents: string;
+    };
+    constructor(data: ShowOnScreenKeyboardEvent['data']) {
+        super('showOnScreenKeyboard');
+        this.data = data;
+    }
+}
+
 /**
  * An event that is emitted when receiving data channel latency test response from server.
  * This event is handled by DataChannelLatencyTestController
@@ -616,6 +634,7 @@ export type PixelStreamingEvent =
     | DataChannelCloseEvent
     | DataChannelErrorEvent
     | VideoInitializedEvent
+    | ShowOnScreenKeyboardEvent
     | StreamLoadingEvent
     | StreamPreConnectEvent
     | StreamReconnectEvent

package/src/Util/IURLSearchParams.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 /**
  * A case insensitive, partial implementation of URLSearchParams
  */

package/src/Util/RTCUtils.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 export class RTCUtils {
     static isVideoTransceiver(transceiver: RTCRtpTransceiver | undefined): boolean {
         return this.canTransceiverReceiveVideo(transceiver) || this.canTransceiverSendVideo(transceiver);

package/src/VideoPlayer/VideoPlayer.ts

@@ -70,6 +70,18 @@ export class VideoPlayer {
         window.addEventListener('orientationchange', () => this.onOrientationChange());
     }
 
+    public destroy() {
+        this.videoElement.src = '';
+        this.videoElement.srcObject = null;
+        this.videoElement.remove();
+
+        if (this.audioElement) {
+            this.audioElement.src = '';
+            this.audioElement.srcObject = null;
+            this.audioElement.remove();
+        }
+    }
+
     public setAudioElement(audioElement: HTMLAudioElement): void {
         this.audioElement = audioElement;
     }
@@ -117,8 +129,8 @@ export class VideoPlayer {
      * Get the current context of the html video elements parent
      * @returns - the current context of the video elements parent
      */
-    getVideoParentElement(): HTMLElement {
-        return this.videoElement.parentElement;
+    getVideoParentElement(): HTMLElement | undefined {
+        return this.videoElement.parentElement ?? undefined;
     }
 
     /**