@epicgames-ps/lib-pixelstreamingfrontend-ue5.5 0.1.4 → 0.3.0

package/src/UI/OnScreenKeyboard.ts

@@ -1,6 +1,6 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
-import { UnquantizedDenormalizedUnsignedCoord } from '../Util/CoordinateConverter';
+import { UntranslatedCoordUnsigned } from '../Util/InputCoordTranslator';
 
 /**
  * Class for handling on screen keyboard usage
@@ -35,7 +35,7 @@ export class OnScreenKeyboard {
      * @returns unquantizeAndDenormalizeUnsigned object
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    unquantizeAndDenormalizeUnsigned(x: number, y: number): UnquantizedDenormalizedUnsignedCoord {
+    unquantizeAndDenormalizeUnsigned(x: number, y: number): UntranslatedCoordUnsigned {
         return null;
     }
 
@@ -48,6 +48,14 @@ export class OnScreenKeyboard {
             this.hiddenInput = document.createElement('input');
             this.hiddenInput.id = 'hiddenInput';
             this.hiddenInput.maxLength = 0;
+
+            // Set inline style so that users not using the UI library
+            // will  still have this element display correctly
+            this.hiddenInput.style.position = 'absolute';
+            this.hiddenInput.style.left = '-10%';
+            this.hiddenInput.style.width = '0px';
+            this.hiddenInput.style.opacity = '0';
+
             videoElementParent.appendChild(this.hiddenInput);
         }
 
@@ -58,7 +66,7 @@ export class OnScreenKeyboard {
             videoElementParent.appendChild(this.editTextButton);
 
             // Hide the 'edit text' button.
-            this.editTextButton.classList.add('hiddenState');
+            this.editTextButton.style.display = 'none';
 
             this.editTextButton.addEventListener('touchend', (event: Event) => {
                 // Show the on-screen keyboard.
@@ -75,17 +83,14 @@ export class OnScreenKeyboard {
     showOnScreenKeyboard(command: any) {
         if (command.showOnScreenKeyboard) {
             // Show the 'edit text' button.
-            this.editTextButton.classList.remove('hiddenState');
+            this.editTextButton.style.display = 'default';
             // Place the 'edit text' button near the UE input widget.
-            const pos = this.unquantizeAndDenormalizeUnsigned(
-                command.x,
-                command.y
-            );
+            const pos = this.unquantizeAndDenormalizeUnsigned(command.x, command.y);
             this.editTextButton.style.top = pos.y.toString() + 'px';
             this.editTextButton.style.left = (pos.x - 40).toString() + 'px';
         } else {
             // Hide the 'edit text' button.
-            this.editTextButton.classList.add('hiddenState');
+            this.editTextButton.style.display = 'none';
             // Hide the on-screen keyboard.
             this.hiddenInput.blur();
         }

package/src/UeInstanceMessage/ResponseController.ts

@@ -10,10 +10,7 @@ export class ResponseController {
      * @param name - The name of the response
      * @param listener - The method to be activated when the response is selected
      */
-    addResponseEventListener(
-        name: string,
-        listener: (response: string) => void
-    ) {
+    addResponseEventListener(name: string, listener: (response: string) => void) {
         this.responseEventListeners.set(name, listener);
     }
 
@@ -30,18 +27,12 @@ export class ResponseController {
      * @param message - Data received from the data channel with the command in question
      */
     onResponse(message: ArrayBuffer) {
-        Logger.Log(
-            Logger.GetStackTrace(),
-            'DataChannelReceiveMessageType.Response',
-            6
-        );
+        Logger.Info('DataChannelReceiveMessageType.Response');
         const responses = new TextDecoder('utf-16').decode(message.slice(1));
 
-        Logger.Log(Logger.GetStackTrace(), responses, 6);
-        this.responseEventListeners.forEach(
-            (listener: (response: string) => void) => {
-                listener(responses);
-            }
-        );
+        Logger.Info(responses);
+        this.responseEventListeners.forEach((listener: (response: string) => void) => {
+            listener(responses);
+        });
     }
 }

package/src/UeInstanceMessage/SendMessageController.ts

@@ -31,32 +31,31 @@ export class SendMessageController {
             messageData = [];
         }
 
-        const toStreamerMessages =
-            this.toStreamerMessagesMapProvider.toStreamerMessages;
+        const toStreamerMessages = this.toStreamerMessagesMapProvider.toStreamerMessages;
         const messageFormat = toStreamerMessages.get(messageType);
         if (messageFormat === undefined) {
             Logger.Error(
-                Logger.GetStackTrace(),
                 `Attempted to send a message to the streamer with message type: ${messageType}, but the frontend hasn't been configured to send such a message. Check you've added the message type in your cpp`
             );
             return;
         }
 
-        if(messageFormat.structure && messageData && messageFormat.structure.length !== messageData.length) {
+        if (messageFormat.structure && messageData && messageFormat.structure.length !== messageData.length) {
             Logger.Error(
-                Logger.GetStackTrace(),
-                `Provided message data doesn't match expected layout. Expected [ ${messageFormat.structure.map((element: string) => {
-                    switch (element) {
-                        case 'uint8':
-                        case 'uint16':
-                        case 'int16':
-                        case 'float':
-                        case 'double':
-                            return 'number';
-                        case 'string':
-                            return 'string';
-                    }
-                }).toString() } ] but received [ ${messageData.map((element: number | string) => typeof element).toString()} ]`
+                `Provided message data doesn't match expected layout. Expected [ ${messageFormat.structure
+                    .map((element: string) => {
+                        switch (element) {
+                            case 'uint8':
+                            case 'uint16':
+                            case 'int16':
+                            case 'float':
+                            case 'double':
+                                return 'number';
+                            case 'string':
+                                return 'string';
+                        }
+                    })
+                    .toString()} ] but received [ ${messageData.map((element: number | string) => typeof element).toString()} ]`
             );
             return;
         }
@@ -141,7 +140,6 @@ export class SendMessageController {
 
         if (!this.dataChannelSender.canSend()) {
             Logger.Info(
-                Logger.GetStackTrace(),
                 `Data channel cannot send yet, skipping sending message: ${messageType} - ${new Uint8Array(
                     data.buffer
                 )}`

package/src/UeInstanceMessage/StreamMessageController.ts

@@ -8,14 +8,8 @@ export class ToStreamerMessage {
 }
 
 export class StreamMessageController {
-    toStreamerHandlers: Map<
-        string,
-        (messageData?: Array<number | string> | undefined) => void
-    >;
-    fromStreamerHandlers: Map<
-        string,
-        (messageType: string, messageData?: ArrayBuffer | undefined) => void
-    >;
+    toStreamerHandlers: Map<string, (messageData?: Array<number | string> | undefined) => void>;
+    fromStreamerHandlers: Map<string, (messageType: string, messageData?: ArrayBuffer | undefined) => void>;
     //                        Type      Format
     toStreamerMessages: Map<string, ToStreamerMessage>;
     //                         ID      Type
@@ -216,10 +210,7 @@ export class StreamMessageController {
                 this.fromStreamerHandlers.set(messageType, messageHandler);
                 break;
             default:
-                Logger.Log(
-                    Logger.GetStackTrace(),
-                    `Unknown message direction ${messageDirection}`
-                );
+                Logger.Info(`Unknown message direction ${messageDirection}`);
         }
     }
 }

package/src/UeInstanceMessage/ToStreamerMessagesController.ts

@@ -16,9 +16,7 @@ export class ToStreamerMessagesController {
      * Send Request to Take Quality Control to the UE Instance
      */
     SendRequestQualityControl() {
-        this.sendMessageController.sendMessageToStreamer(
-            'RequestQualityControl'
-        );
+        this.sendMessageController.sendMessageToStreamer('RequestQualityControl');
     }
 
     /**
@@ -32,9 +30,7 @@ export class ToStreamerMessagesController {
      * Send Average Bitrate Request to the UE Instance
      */
     SendAverageBitrateRequest() {
-        this.sendMessageController.sendMessageToStreamer(
-            'AverageBitrateRequest'
-        );
+        this.sendMessageController.sendMessageToStreamer('AverageBitrateRequest');
     }
 
     /**
@@ -55,8 +51,6 @@ export class ToStreamerMessagesController {
      * Send a Request Initial Settings to the UE Instance
      */
     SendRequestInitialSettings() {
-        this.sendMessageController.sendMessageToStreamer(
-            'RequestInitialSettings'
-        );
+        this.sendMessageController.sendMessageToStreamer('RequestInitialSettings');
     }
 }

package/src/Util/EventEmitter.ts

@@ -1,9 +1,4 @@
-import {
-    FlagsIds,
-    NumericParametersIds,
-    OptionParametersIds,
-    TextParametersIds
-} from '../Config/Config';
+import { FlagsIds, NumericParametersIds, OptionParametersIds, TextParametersIds } from '../Config/Config';
 import { LatencyTestResults } from '../DataChannel/LatencyTestResults';
 import { AggregatedStats } from '../PeerConnectionController/AggregatedStats';
 import { InitialSettings } from '../pixelstreamingfrontend';
@@ -15,7 +10,7 @@ import { SettingOption } from '../Config/SettingOption';
 import {
     DataChannelLatencyTestResponse,
     DataChannelLatencyTestResult
-} from "../DataChannel/DataChannelLatencyTestResults";
+} from '../DataChannel/DataChannelLatencyTestResults';
 
 /**
  * An event that is emitted when AFK disconnect is about to happen.
@@ -42,7 +37,7 @@ export class AfkWarningUpdateEvent extends Event {
     readonly type: 'afkWarningUpdate';
     readonly data: {
         /** How many seconds until the session is disconnected */
-        countDown: number
+        countDown: number;
     };
     constructor(data: AfkWarningUpdateEvent['data']) {
         super('afkWarningUpdate');
@@ -77,7 +72,7 @@ export class VideoEncoderAvgQPEvent extends Event {
     readonly type: 'videoEncoderAvgQP';
     readonly data: {
         /** Average video quality value */
-        avgQP: number
+        avgQP: number;
     };
     constructor(data: VideoEncoderAvgQPEvent['data']) {
         super('videoEncoderAvgQP');
@@ -86,7 +81,7 @@ export class VideoEncoderAvgQPEvent extends Event {
 }
 
 /**
- * An event that is emitted after a WebRtc connection has been negotiated. 
+ * An event that is emitted after a WebRtc connection has been negotiated.
  */
 export class WebRtcSdpEvent extends Event {
     readonly type: 'webRtcSdp';
@@ -161,7 +156,7 @@ export class DataChannelOpenEvent extends Event {
         /** Data channel label. One of 'datachannel', 'send-datachannel', 'recv-datachannel' */
         label: string;
         /** RTCDataChannel onOpen event */
-        event: Event
+        event: Event;
     };
     constructor(data: DataChannelOpenEvent['data']) {
         super('dataChannelOpen');
@@ -178,7 +173,7 @@ export class DataChannelCloseEvent extends Event {
         /** Data channel label. One of 'datachannel', 'send-datachannel', 'recv-datachannel' */
         label: string;
         /** RTCDataChannel onClose event */
-        event: Event
+        event: Event;
     };
     constructor(data: DataChannelCloseEvent['data']) {
         super('dataChannelClose');
@@ -195,7 +190,7 @@ export class DataChannelErrorEvent extends Event {
         /** Data channel label. One of 'datachannel', 'send-datachannel', 'recv-datachannel' */
         label: string;
         /** RTCDataChannel onError event */
-        event: Event
+        event: Event;
     };
     constructor(data: DataChannelErrorEvent['data']) {
         super('dataChannelError');
@@ -260,7 +255,7 @@ export class PlayStreamErrorEvent extends Event {
     readonly type: 'playStreamError';
     readonly data: {
         /** Error message */
-        message: string
+        message: string;
     };
     constructor(data: PlayStreamErrorEvent['data']) {
         super('playStreamError');
@@ -286,7 +281,7 @@ export class PlayStreamRejectedEvent extends Event {
     readonly type: 'playStreamRejected';
     readonly data: {
         /** Rejection reason */
-        reason: unknown
+        reason: unknown;
     };
     constructor(data: PlayStreamRejectedEvent['data']) {
         super('playStreamRejected');
@@ -330,7 +325,7 @@ export class StatsReceivedEvent extends Event {
     readonly type: 'statsReceived';
     readonly data: {
         /** Statistics object */
-        aggregatedStats: AggregatedStats
+        aggregatedStats: AggregatedStats;
     };
     constructor(data: StatsReceivedEvent['data']) {
         super('statsReceived');
@@ -379,7 +374,7 @@ export class LatencyTestResultEvent extends Event {
     readonly type: 'latencyTestResult';
     readonly data: {
         /** Latency test result object */
-        latencyTimings: LatencyTestResults
+        latencyTimings: LatencyTestResults;
     };
     constructor(data: LatencyTestResultEvent['data']) {
         super('latencyTestResult');
@@ -395,7 +390,7 @@ export class DataChannelLatencyTestResponseEvent extends Event {
     readonly type: 'dataChannelLatencyTestResponse';
     readonly data: {
         /** Latency test result object */
-        response: DataChannelLatencyTestResponse
+        response: DataChannelLatencyTestResponse;
     };
     constructor(data: DataChannelLatencyTestResponseEvent['data']) {
         super('dataChannelLatencyTestResponse');
@@ -410,7 +405,7 @@ export class DataChannelLatencyTestResultEvent extends Event {
     readonly type: 'dataChannelLatencyTestResult';
     readonly data: {
         /** Latency test result object */
-        result: DataChannelLatencyTestResult
+        result: DataChannelLatencyTestResult;
     };
     constructor(data: DataChannelLatencyTestResultEvent['data']) {
         super('dataChannelLatencyTestResult');
@@ -425,7 +420,7 @@ export class InitialSettingsEvent extends Event {
     readonly type: 'initialSettings';
     readonly data: {
         /** Initial settings from UE */
-        settings: InitialSettings
+        settings: InitialSettings;
     };
     constructor(data: InitialSettingsEvent['data']) {
         super('initialSettings');
@@ -515,7 +510,7 @@ export type XrFrameData = {
  */
 export class XrFrameEvent extends Event {
     readonly type: 'xrFrame';
-    readonly data: XrFrameData
+    readonly data: XrFrameData;
     constructor(data: XrFrameEvent['data']) {
         super('xrFrame');
         this.data = data;
@@ -529,7 +524,7 @@ export class PlayerCountEvent extends Event {
     readonly type: 'playerCount';
     readonly data: {
         /** count object */
-        count: number
+        count: number;
     };
     constructor(data: PlayerCountEvent['data']) {
         super('playerCount');

package/src/Util/FileUtil.ts

@@ -20,17 +20,11 @@ export class FileUtil {
             file.size = 0;
             file.data = [];
             file.timestampStart = new Date().getTime();
-            Logger.Log(
-                Logger.GetStackTrace(),
-                'Received first chunk of file',
-                6
-            );
+            Logger.Info('Received first chunk of file');
         }
 
-        const extensionAsString = new TextDecoder('utf-16').decode(
-            view.slice(1)
-        );
-        Logger.Log(Logger.GetStackTrace(), extensionAsString, 6);
+        const extensionAsString = new TextDecoder('utf-16').decode(view.slice(1));
+        Logger.Info(extensionAsString);
         file.extension = extensionAsString;
     }
 
@@ -48,15 +42,11 @@ export class FileUtil {
             file.size = 0;
             file.data = [];
             file.timestampStart = new Date().getTime();
-            Logger.Log(
-                Logger.GetStackTrace(),
-                'Received first chunk of file',
-                6
-            );
+            Logger.Info('Received first chunk of file');
         }
 
         const mimeAsString = new TextDecoder('utf-16').decode(view.slice(1));
-        Logger.Log(Logger.GetStackTrace(), mimeAsString, 6);
+        Logger.Info(mimeAsString);
         file.mimetype = mimeAsString;
     }
 
@@ -81,26 +71,16 @@ export class FileUtil {
         file.data.push(fileBytes);
 
         // Uncomment for debug
-        Logger.Log(
-            Logger.GetStackTrace(),
-            `Received file chunk: ${file.data.length}/${file.size}`,
-            6
-        );
+        Logger.Info(`Received file chunk: ${file.data.length}/${file.size}`);
 
         if (file.data.length === file.size) {
             file.receiving = false;
             file.valid = true;
-            Logger.Log(Logger.GetStackTrace(), 'Received complete file', 6);
+            Logger.Info('Received complete file');
             const transferDuration = new Date().getTime() - file.timestampStart;
-            const transferBitrate = Math.round(
-                (file.size * 16 * 1024) / transferDuration
-            );
-            Logger.Log(
-                Logger.GetStackTrace(),
-                `Average transfer bitrate: ${transferBitrate}kb/s over ${
-                    transferDuration / 1000
-                } seconds`,
-                6
+            const transferBitrate = Math.round((file.size * 16 * 1024) / transferDuration);
+            Logger.Info(
+                `Average transfer bitrate: ${transferBitrate}kb/s over ${transferDuration / 1000} seconds`
             );
 
             // File reconstruction
@@ -118,10 +98,7 @@ export class FileUtil {
             a.remove();
         } else if (file.data.length > file.size) {
             file.receiving = false;
-            Logger.Error(
-                Logger.GetStackTrace(),
-                `Received bigger file than advertised: ${file.data.length}/${file.size}`
-            );
+            Logger.Error(`Received bigger file than advertised: ${file.data.length}/${file.size}`);
         }
     }
 }

package/src/Util/IURLSearchParams.ts

@@ -0,0 +1,25 @@
+/**
+ * A case insensitive, partial implementation of URLSearchParams
+ */
+export class IURLSearchParams {
+    _urlParams: Record<string, string>;
+
+    constructor(search: string) {
+        this._urlParams = {};
+        const urlParams = new URLSearchParams(search);
+        for (const [name, value] of urlParams) {
+            this._urlParams[name.toLowerCase()] = value;
+        }
+    }
+
+    public has(name: string): boolean {
+        return name.toLowerCase() in this._urlParams;
+    }
+
+    public get(name: string): string | null {
+        if (this.has(name)) {
+            return this._urlParams[name.toLowerCase()];
+        }
+        return null;
+    }
+}

package/src/Util/InputCoordTranslator.ts

@@ -0,0 +1,73 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+export interface RectSize {
+    width: number;
+    height: number;
+}
+
+export interface TranslatedCoordUnsigned {
+    inRange: boolean;
+    x: number;
+    y: number;
+}
+
+export interface TranslatedCoordSigned {
+    x: number;
+    y: number;
+}
+
+export interface UntranslatedCoordUnsigned {
+    x: number;
+    y: number;
+}
+
+/**
+ * Converts coordinates from element relative coordinates to values normalized within the value range of a short (and back again)
+ */
+export class InputCoordTranslator {
+    playerSize: RectSize;
+    ratio: number;
+    playerIsLarger: boolean;
+
+    // we dont use a constructor here because the object is created and passed around to various locations
+    // possibly before this method is called.
+    reconfigure(playerSize: RectSize, videoSize: RectSize) {
+        const playerAspectRatio = playerSize.height / playerSize.width;
+        const videoAspectRatio = videoSize.height / videoSize.width;
+        this.playerIsLarger = playerAspectRatio > videoAspectRatio;
+        this.playerSize = playerSize;
+        this.ratio = this.playerIsLarger
+            ? playerAspectRatio / videoAspectRatio
+            : videoAspectRatio / playerAspectRatio;
+    }
+
+    translateUnsigned(x: number, y: number): TranslatedCoordUnsigned {
+        const normalizedX = this.playerIsLarger
+            ? x / this.playerSize.width
+            : this.ratio * (x / this.playerSize.width - 0.5) + 0.5;
+        const normalizedY = this.playerIsLarger
+            ? this.ratio * (y / this.playerSize.height - 0.5) + 0.5
+            : y / this.playerSize.height;
+        if (normalizedX < 0.0 || normalizedX > 1.0 || normalizedY < 0.0 || normalizedY > 1.0) {
+            return { inRange: false, x: 65535, y: 65535 };
+        } else {
+            return { inRange: true, x: normalizedX * 65536, y: normalizedY * 65536 };
+        }
+    }
+
+    translateSigned(x: number, y: number): TranslatedCoordSigned {
+        const normalizedX = this.playerIsLarger
+            ? x / (0.5 * this.playerSize.width)
+            : (this.ratio * x) / (0.5 * this.playerSize.width);
+        const normalizedY = this.playerIsLarger
+            ? (this.ratio * y) / (0.5 * this.playerSize.height)
+            : y / (0.5 * this.playerSize.height);
+        return { x: normalizedX * 32767, y: normalizedY * 32767 };
+    }
+
+    untranslateUnsigned(x: number, y: number): UntranslatedCoordUnsigned {
+        const normalizedX = this.playerIsLarger ? x / 65536 : (x / 65536 - 0.5) / this.ratio + 0.5;
+        const normalizedY = this.playerIsLarger ? (y / 65536 - 0.5) / this.ratio + 0.5 : y / 65536;
+        return { x: normalizedX * this.playerSize.width, y: normalizedY * this.playerSize.height };
+    }
+}

package/src/Util/RTCUtils.ts

@@ -1,41 +1,49 @@
 export class RTCUtils {
-    static isVideoTransceiver(transceiver : RTCRtpTransceiver | undefined) : boolean {
+    static isVideoTransceiver(transceiver: RTCRtpTransceiver | undefined): boolean {
         return this.canTransceiverReceiveVideo(transceiver) || this.canTransceiverSendVideo(transceiver);
     }
 
-    static canTransceiverReceiveVideo(transceiver : RTCRtpTransceiver | undefined) : boolean {
-        return !!transceiver &&
+    static canTransceiverReceiveVideo(transceiver: RTCRtpTransceiver | undefined): boolean {
+        return (
+            !!transceiver &&
             (transceiver.direction === 'sendrecv' || transceiver.direction === 'recvonly') &&
             transceiver.receiver &&
             transceiver.receiver.track &&
-            transceiver.receiver.track.kind === 'video';    
+            transceiver.receiver.track.kind === 'video'
+        );
     }
 
-    static canTransceiverSendVideo(transceiver : RTCRtpTransceiver | undefined) : boolean {
-        return !!transceiver &&
+    static canTransceiverSendVideo(transceiver: RTCRtpTransceiver | undefined): boolean {
+        return (
+            !!transceiver &&
             (transceiver.direction === 'sendrecv' || transceiver.direction === 'sendonly') &&
             transceiver.sender &&
             transceiver.sender.track &&
-            transceiver.sender.track.kind === 'video';    
+            transceiver.sender.track.kind === 'video'
+        );
     }
 
-    static isAudioTransceiver(transceiver : RTCRtpTransceiver | undefined) : boolean {
+    static isAudioTransceiver(transceiver: RTCRtpTransceiver | undefined): boolean {
         return this.canTransceiverReceiveAudio(transceiver) || this.canTransceiverSendAudio(transceiver);
     }
 
-    static canTransceiverReceiveAudio(transceiver : RTCRtpTransceiver | undefined) : boolean {
-        return !!transceiver &&
+    static canTransceiverReceiveAudio(transceiver: RTCRtpTransceiver | undefined): boolean {
+        return (
+            !!transceiver &&
             (transceiver.direction === 'sendrecv' || transceiver.direction === 'recvonly') &&
             transceiver.receiver &&
             transceiver.receiver.track &&
-            transceiver.receiver.track.kind === 'audio';    
+            transceiver.receiver.track.kind === 'audio'
+        );
     }
 
-    static canTransceiverSendAudio(transceiver : RTCRtpTransceiver | undefined) : boolean {
-        return !!transceiver &&
+    static canTransceiverSendAudio(transceiver: RTCRtpTransceiver | undefined): boolean {
+        return (
+            !!transceiver &&
             (transceiver.direction === 'sendrecv' || transceiver.direction === 'sendonly') &&
             transceiver.sender &&
             transceiver.sender.track &&
-            transceiver.sender.track.kind === 'audio';
+            transceiver.sender.track.kind === 'audio'
+        );
     }
-}
+}