@epicgames-ps/lib-pixelstreamingfrontend-ue5.5 0.0.5

package/src/Config/SettingBase.ts

@@ -0,0 +1,65 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+/**
+ * Base class for a setting that has a text label and an arbitrary setting value it stores.
+ */
+export class SettingBase {
+    id: string;
+    description: string;
+    _label: string;
+    _value: unknown;
+    onChange: (changedValue: unknown, setting: SettingBase) => void;
+    onChangeEmit: (changedValue: unknown) => void;
+
+    constructor(
+        id: string,
+        label: string,
+        description: string,
+        defaultSettingValue: unknown,
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => { /* Do nothing, to be overridden. */ }
+    ) {
+        this.onChange = defaultOnChangeListener;
+
+        this.onChangeEmit = () => {
+            /* Do nothing, to be overridden. */
+        };
+        this.id = id;
+        this.description = description;
+        this.label = label;
+        this.value = defaultSettingValue;
+    }
+
+    /**
+     * Set the label text for the setting.
+     * @param label setting label.
+     */
+    public set label(inLabel: string) {
+        this._label = inLabel;
+        this.onChangeEmit(this._value);
+    }
+
+    /**
+     * @returns The label text for the setting.
+     */
+    public get label(): string {
+        return this._label;
+    }
+
+    /**
+     * @return The setting's value.
+     */
+    public get value(): unknown {
+        return this._value;
+    }
+
+    /**
+     * Update the setting's stored value.
+     * @param inValue The new value for the setting.
+     */
+    public set value(inValue: unknown) {
+        this._value = inValue;
+        this.onChange(this._value, this);
+        this.onChangeEmit(this._value);
+    }
+}

package/src/Config/SettingFlag.ts

@@ -0,0 +1,99 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+import type { FlagsIds } from './Config';
+import { SettingBase } from './SettingBase';
+
+/**
+ * A boolean flag setting object with a text label.
+ */
+export class SettingFlag<
+    CustomIds extends string = FlagsIds
+> extends SettingBase {
+    id: FlagsIds | CustomIds;
+    onChangeEmit: (changedValue: boolean) => void;
+    useUrlParams: boolean;
+
+    constructor(
+        id: FlagsIds | CustomIds,
+        label: string,
+        description: string,
+        defaultFlagValue: boolean,
+        useUrlParams: boolean,
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => { /* Do nothing, to be overridden. */ }
+    ) {
+        super(id, label, description, defaultFlagValue, defaultOnChangeListener);
+
+        const urlParams = new URLSearchParams(window.location.search);
+        if (!useUrlParams || !urlParams.has(this.id)) {
+            this.flag = defaultFlagValue;
+        } else {
+            // parse flag from url parameters
+            const urlParamFlag = this.getUrlParamFlag();
+            this.flag = urlParamFlag;
+        }
+        this.useUrlParams = useUrlParams;
+    }
+
+    /**
+     * Parse the flag value from the url parameters.
+     * @returns True if the url parameters contains /?id, but False if /?id=false
+     */
+    getUrlParamFlag(): boolean {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.has(this.id)) {
+            if (
+                urlParams.get(this.id) === 'false' ||
+                urlParams.get(this.id) === 'False'
+            ) {
+                return false;
+            }
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Persist the setting value in URL.
+     */
+    public updateURLParams() {
+        if (this.useUrlParams) {
+            // set url params
+            const urlParams = new URLSearchParams(window.location.search);
+            if (this.flag === true) {
+                urlParams.set(this.id, 'true');
+            } else {
+                urlParams.set(this.id, 'false');
+            }
+            window.history.replaceState(
+                {},
+                '',
+                urlParams.toString() !== ''
+                    ? `${location.pathname}?${urlParams}`
+                    : `${location.pathname}`
+            );
+        }
+    }
+
+    /**
+     * Enables this flag.
+     */
+    public enable(): void {
+        this.flag = true;
+    }
+
+    /**
+     * @return The setting's value.
+     */
+    public get flag(): boolean {
+        return !!this.value;
+    }
+
+    /**
+     * Update the setting's stored value.
+     * @param inValue The new value for the setting.
+     */
+    public set flag(inValue: boolean) {
+        this.value = inValue;
+    }
+}

package/src/Config/SettingNumber.ts

@@ -0,0 +1,111 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+import type { NumericParametersIds } from './Config';
+import { SettingBase } from './SettingBase';
+
+/**
+ * A number setting object with a text label. Min and max limit the range of allowed values.
+ */
+export class SettingNumber<
+    CustomIds extends string = NumericParametersIds
+> extends SettingBase {
+    _min: number;
+    _max: number;
+
+    id: NumericParametersIds | CustomIds;
+    onChangeEmit: (changedValue: number) => void;
+    useUrlParams: boolean;
+
+    constructor(
+        id: NumericParametersIds | CustomIds,
+        label: string,
+        description: string,
+        min: number,
+        max: number,
+        defaultNumber: number,
+        useUrlParams: boolean,
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => { /* Do nothing, to be overridden. */ }
+    ) {
+        super(id, label, description, defaultNumber, defaultOnChangeListener);
+
+        this._min = min;
+        this._max = max;
+
+        // attempt to read the number from the url params
+        const urlParams = new URLSearchParams(window.location.search);
+        if (!useUrlParams || !urlParams.has(this.id)) {
+            this.number = defaultNumber;
+        } else {
+            const parsedValue = Number.parseFloat(urlParams.get(this.id));
+            this.number = Number.isNaN(parsedValue)
+                ? defaultNumber
+                : parsedValue;
+        }
+        this.useUrlParams = useUrlParams;
+    }
+
+    /**
+     * Persist the setting value in URL.
+     */
+    public updateURLParams(): void {
+        if (this.useUrlParams) {
+            // set url params like ?id=number
+            const urlParams = new URLSearchParams(window.location.search);
+            urlParams.set(this.id, this.number.toString());
+            window.history.replaceState(
+                {},
+                '',
+                urlParams.toString() !== ''
+                    ? `${location.pathname}?${urlParams}`
+                    : `${location.pathname}`
+            );
+        }
+    }
+
+    /**
+     * Set the number value (will be clamped within range).
+     */
+    public set number(newNumber: number) {
+        this.value = this.clamp(newNumber);
+    }
+
+    /**
+     * @returns The number stored.
+     */
+    public get number(): number {
+        return this.value as number;
+    }
+
+    /**
+     * Clamps a number between the min and max values (inclusive).
+     * @param inNumber The number to clamp.
+     * @returns The clamped number.
+     */
+    public clamp(inNumber: number): number {
+        return Math.max(Math.min(this._max, inNumber), this._min);
+    }
+
+    /**
+     * Returns the minimum value
+     * @returns The minimum value
+     */
+    public get min(): number {
+        return this._min;
+    }
+
+    /**
+     * Returns the maximum value
+     * @returns The maximum value
+     */
+    public get max(): number {
+        return this._max;
+    }
+
+    /**
+     * Add a change listener to the number object.
+     */
+    public addOnChangedListener(onChangedFunc: (newNumber: number) => void) {
+        this.onChange = onChangedFunc;
+    }
+}

package/src/Config/SettingOption.ts

@@ -0,0 +1,124 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+import type { OptionParametersIds } from './Config';
+import { SettingBase } from './SettingBase';
+
+/**
+ * An Option setting object with a text label. Allows you to specify an array of options and select one of them.
+ */
+export class SettingOption<
+    CustomIds extends string = OptionParametersIds
+> extends SettingBase {
+    id: OptionParametersIds | CustomIds;
+    onChangeEmit: (changedValue: string) => void;
+    _options: Array<string>;
+    useUrlParams: boolean;
+
+    constructor(
+        id: OptionParametersIds | CustomIds,
+        label: string,
+        description: string,
+        defaultTextValue: string,
+        options: Array<string>,
+        useUrlParams: boolean,
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => { /* Do nothing, to be overridden. */ }
+    ) {
+        super(id, label, description, [defaultTextValue], defaultOnChangeListener);
+
+        this.options = options;
+        const urlParams = new URLSearchParams(window.location.search);
+        const stringToMatch: string =
+            useUrlParams && urlParams.has(this.id)
+                ? this.getUrlParamText()
+                : defaultTextValue;
+        this.selected = stringToMatch;
+        this.useUrlParams = useUrlParams;
+    }
+
+    /**
+     * Parse the text value from the url parameters.
+     * @returns The text value parsed from the url if the url parameters contains /?id=value, but empty string if just /?id or no url param found.
+     */
+    getUrlParamText(): string {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.has(this.id)) {
+            return urlParams.get(this.id) ?? '';
+        }
+        return '';
+    }
+
+    /**
+     * Persist the setting value in URL.
+     */
+    public updateURLParams() {
+        if (this.useUrlParams) {
+            // set url params
+            const urlParams = new URLSearchParams(window.location.search);
+            urlParams.set(this.id, this.selected);
+            window.history.replaceState(
+                {},
+                '',
+                urlParams.toString() !== ''
+                    ? `${location.pathname}?${urlParams}`
+                    : `${location.pathname}`
+            );
+        }
+    }
+
+    /**
+     * Add a change listener to the select element.
+     */
+    public addOnChangedListener(onChangedFunc: (newValue: string) => void) {
+        this.onChange = onChangedFunc;
+    }
+
+    /**
+     * @returns All available options as an array
+     */
+    public get options(): Array<string> {
+        return this._options;
+    }
+
+    /**
+     * Set options
+     * @param values Array of options
+     */
+    public set options(values: Array<string>) {
+        this._options = values;
+        this.onChangeEmit(this.selected);
+    }
+
+    /**
+     * @returns Selected option as a string
+     */
+    public get selected(): string {
+        return this.value as string;
+    }
+
+    /**
+     * Set selected option if it matches one of the available options
+     * @param value Selected option
+     */
+    public set selected(value: string) {
+        // A user may not specify the full possible value so we instead use the closest match.
+        // eg ?xxx=H264 would select 'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f'
+        let filteredList = this.options.filter(
+            (option: string) => option.indexOf(value) !== -1
+        );
+        if (filteredList.length) {
+            this.value = filteredList[0];
+            return;
+        } 
+
+        // A user has specified a codec with a fmtp string but this codec + fmtp line isn't available.
+        // in that case, just use the codec
+        filteredList = this.options.filter(
+            (option: string) => option.indexOf(value.split(' ')[0]) !== -1
+        );
+        if (filteredList.length) {
+            this.value = filteredList[0];
+            return;
+        }
+    }
+}

package/src/Config/SettingText.ts

@@ -0,0 +1,82 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+import type { TextParametersIds } from './Config';
+import { SettingBase } from './SettingBase';
+
+/**
+ * A text setting object with a text label.
+ */
+export class SettingText<
+    CustomIds extends string = TextParametersIds
+> extends SettingBase {
+    id: TextParametersIds | CustomIds;
+    onChangeEmit: (changedValue: string) => void;
+    useUrlParams: boolean;
+
+    constructor(
+        id: TextParametersIds | CustomIds,
+        label: string,
+        description: string,
+        defaultTextValue: string,
+        useUrlParams: boolean,
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => { /* Do nothing, to be overridden. */ }
+    ) {
+        super(id, label, description, defaultTextValue, defaultOnChangeListener);
+
+        const urlParams = new URLSearchParams(window.location.search);
+        if (!useUrlParams || !urlParams.has(this.id)) {
+            this.text = defaultTextValue;
+        } else {
+            // parse flag from url parameters
+            const urlParamFlag = this.getUrlParamText();
+            this.text = urlParamFlag;
+        }
+        this.useUrlParams = useUrlParams;
+    }
+
+    /**
+     * Parse the text value from the url parameters.
+     * @returns The text value parsed from the url if the url parameters contains /?id=value, but empty string if just /?id or no url param found.
+     */
+    getUrlParamText(): string {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.has(this.id)) {
+            return urlParams.get(this.id) ?? '';
+        }
+        return '';
+    }
+
+    /**
+     * Persist the setting value in URL.
+     */
+    public updateURLParams() {
+        if (this.useUrlParams) {
+            // set url params
+            const urlParams = new URLSearchParams(window.location.search);
+            urlParams.set(this.id, this.text);
+            window.history.replaceState(
+                {},
+                '',
+                urlParams.toString() !== ''
+                    ? `${location.pathname}?${urlParams}`
+                    : `${location.pathname}`
+            );
+        }
+    }
+
+    /**
+     * @return The setting's value.
+     */
+    public get text(): string {
+        return this.value as string;
+    }
+
+    /**
+     * Update the setting's stored value.
+     * @param inValue The new value for the setting.
+     */
+    public set text(inValue: string) {
+        this.value = inValue;
+    }
+}

package/src/DataChannel/DataChannelController.ts

@@ -0,0 +1,138 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
+
+/**
+ * Handles the Sending and Receiving of messages to the UE Instance via the Data Channel
+ */
+export class DataChannelController {
+    dataChannel: RTCDataChannel;
+    peerConnection: RTCPeerConnection;
+    datachannelOptions: RTCDataChannelInit;
+    label: string;
+    isReceivingFreezeFrame = false;
+
+    /**
+     * return the current state of a datachannel controller instance
+     * @returns the current DataChannelController instance
+     */
+    getDataChannelInstance(): DataChannelController {
+        return this;
+    }
+
+    /**
+     * To Create and Set up a Data Channel
+     * @param peerConnection - The RTC Peer Connection
+     * @param label - Label of the Data Channel
+     * @param datachannelOptions - Optional RTC DataChannel options
+     */
+    createDataChannel(
+        peerConnection: RTCPeerConnection,
+        label: string,
+        datachannelOptions?: RTCDataChannelInit
+    ) {
+        this.peerConnection = peerConnection;
+        this.label = label;
+        this.datachannelOptions = datachannelOptions;
+        if (datachannelOptions == null) {
+            this.datachannelOptions = {} as RTCDataChannelInit;
+            this.datachannelOptions.ordered = true;
+        }
+
+        this.dataChannel = this.peerConnection.createDataChannel(
+            this.label,
+            this.datachannelOptions
+        );
+        this.setupDataChannel();
+    }
+
+    setupDataChannel() {
+        //We Want an Array Buffer not a blob
+        this.dataChannel.binaryType = 'arraybuffer';
+        this.dataChannel.onopen = (ev: Event) => this.handleOnOpen(ev);
+        this.dataChannel.onclose = (ev: Event) => this.handleOnClose(ev);
+        this.dataChannel.onmessage = (ev: MessageEvent) =>
+            this.handleOnMessage(ev);
+        this.dataChannel.onerror = (ev: MessageEvent) => this.handleOnError(ev);
+    }
+
+    /**
+     * Handles when the Data Channel is opened
+     */
+    handleOnOpen(ev: Event) {
+        Logger.Log(
+            Logger.GetStackTrace(),
+            `Data Channel (${this.label}) opened.`,
+            7
+        );
+        this.onOpen(this.dataChannel?.label, ev);
+    }
+
+    /**
+     * Handles when the Data Channel is closed
+     */
+    handleOnClose(ev: Event) {
+        Logger.Log(
+            Logger.GetStackTrace(),
+            `Data Channel (${this.label}) closed.`,
+            7
+        );
+        this.onClose(this.dataChannel?.label, ev);
+    }
+
+    /**
+     * Handles when a message is received
+     * @param event - Message Event
+     */
+    handleOnMessage(event: MessageEvent) {
+        // Higher log level to prevent log spam with messages received
+        Logger.Log(
+            Logger.GetStackTrace(),
+            `Data Channel (${this.label}) message: ${event}`,
+            8
+        );
+    }
+
+    /**
+     * Handles when an error is thrown
+     * @param event - Error Event
+     */
+    handleOnError(event: MessageEvent) {
+        Logger.Log(
+            Logger.GetStackTrace(),
+            `Data Channel (${this.label}) error: ${event}`,
+            7
+        );
+        this.onError(this.dataChannel?.label, event);
+    }
+
+    /**
+     * Override to register onOpen handler
+     * @param label Data channel label ("datachannel", "send-datachannel", "recv-datachannel")
+     * @param ev event
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onOpen(label: string, ev: Event) {
+        // empty default implementation
+    }
+
+    /**
+     * Override to register onClose handler
+     * @param label Data channel label ("datachannel", "send-datachannel", "recv-datachannel")
+     * @param ev event
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onClose(label: string, ev: Event) {
+        // empty default implementation
+    }
+
+    /**
+     * Override to register onError handler
+     * @param label Data channel label ("datachannel", "send-datachannel", "recv-datachannel")
+     * @param ev event
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onError(label: string, ev: Event) {
+        // empty default implementation
+    }
+}