@epicgames-ps/lib-pixelstreamingfrontend-ue5.5 0.0.12 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5",
-    "version": "0.0.12",
+    "version": "0.1.0",
     "description": "Frontend library for Unreal Engine 5.5 Pixel Streaming",
     "main": "dist/lib-pixelstreamingfrontend.js",
     "module": "dist/lib-pixelstreamingfrontend.esm.js",

package/readme.md

@@ -8,7 +8,7 @@ See [lib-pixelstreamingfrontend-ui](/Frontend/implementations/typescript) for an
 - Create a websocket connection to communicate with the signalling server.
 - Create a WebRTC player that displays the Unreal Engine video and audio.
 - Handling of input from the user and transmitting it back to Unreal Engine.
-- Opens a datachannel connection sending and receiving custom data (in addition to input).
+- Opens a data channel connection sending and receiving custom data (in addition to input).
 
 ### Adding it to your project
 `npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.4`

package/src/Inputs/FakeTouchController.ts

@@ -19,7 +19,7 @@ export class FakeTouchController implements ITouchController {
     coordinateConverter: CoordinateConverter;
     videoElementParentClientRect: DOMRect;
 
-    // Utility for keeping track of event handlers and unregistering them
+    // Utility for keeping track of event handlers and to unregister them.
     private touchEventListenerTracker = new EventListenerTracker();
 
     /**

package/src/Inputs/GamepadController.ts

@@ -13,7 +13,7 @@ export class GamePadController {
     requestAnimationFrame: (callback: FrameRequestCallback) => number;
     toStreamerMessagesProvider: StreamMessageController;
 
-    // Utility for keeping track of event handlers and unregistering them
+    // Utility for keeping track of event handlers and to unregister them.
     private gamePadEventListenerTracker = new EventListenerTracker();
 
     /**
@@ -69,7 +69,7 @@ export class GamePadController {
     }
 
     /**
-     * Unregisters all event handlers
+     * Unregister all event handlers.
      */
     unregisterGamePadEvents() {
         this.gamePadEventListenerTracker.unregisterAll();

package/src/Inputs/IMouseEvents.ts

@@ -58,7 +58,7 @@ export interface IMouseEvents {
     handleContextMenu?(mouseEvent: MouseEvent): void;
 
     /**
-     * Unregisters any registered mouse event handlers
+     * Unregister any registered mouse event handlers
      */
     unregisterMouseEvents(): void;
 }

package/src/Inputs/ITouchController.ts

@@ -23,7 +23,7 @@ export interface ITouchController {
     onTouchMove(touchEvent: TouchEvent): void;
 
     /**
-     * Unregisters all touch event handlers
+     * Unregister all touch event handlers.
      */
     unregisterTouchEvents(): void;
 }

package/src/Inputs/KeyboardController.ts

@@ -19,7 +19,7 @@ export class KeyboardController {
     activeKeysProvider: ActiveKeys;
     config: Config;
 
-    // Utility for keeping track of event handlers and unregistering them
+    // Utility for keeping track of event handlers and to unregister them.
     private keyboardEventListenerTracker = new EventListenerTracker();
 
     /*
@@ -177,7 +177,7 @@ export class KeyboardController {
     }
 
     /**
-     * Unregisters document keyboard events
+     * Unregister document keyboard events.
      */
     unregisterKeyBoardEvents() {
         this.keyboardEventListenerTracker.unregisterAll();

package/src/Inputs/LockedMouseEvents.ts

@@ -22,7 +22,7 @@ export class LockedMouseEvents implements IMouseEvents {
         this.updateMouseMovePosition(mouseEvent);
     };
 
-    // Utility for keeping track of event handlers and unregistering them
+    // Utility for keeping track of event handlers and to unregister them.
     private mouseEventListenerTracker = new EventListenerTracker();
 
     /**
@@ -51,7 +51,7 @@ export class LockedMouseEvents implements IMouseEvents {
     }
 
     /**
-     * Unregisters all event handlers
+     * Unregister all event handlers.
      */
     unregisterMouseEvents() {
         this.mouseEventListenerTracker.unregisterAll();

package/src/Inputs/MouseController.ts

@@ -20,7 +20,7 @@ export class MouseController {
     coordinateConverter: CoordinateConverter;
     activeKeysProvider: ActiveKeys;
 
-    // Utility for keeping track of event handlers and unregistering them
+    // Utility for keeping track of event handlers and to unregister them.
     private mouseEventListenerTracker = new EventListenerTracker();
 
     /**

package/src/Inputs/TouchController.ts

@@ -18,7 +18,7 @@ export class TouchController implements ITouchController {
     fingerIds = new Map();
     maxByteValue = 255;
 
-    // Utility for keeping track of event handlers and unregistering them
+    // Utility for keeping track of event handlers and to unregister them.
     private touchEventListenerTracker = new EventListenerTracker();
 
     /**

package/src/Inputs/XRGamepadController.ts

@@ -2,10 +2,9 @@
 
 import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
 import { Controller } from './GamepadTypes';
-import { WebXRUtils } from '../Util/WebXRUtils';
 
 /**
- * The class that handles the functionality of xrgamepads and controllers
+ * The class that handles the functionality of XR gamepads and controllers.
  */
 export class XRGamepadController {
     controllers: Array<Controller>;
@@ -19,6 +18,29 @@ export class XRGamepadController {
         this.controllers = [];
     }
 
+    /**
+     * Deep copies the values from a gamepad by first converting it to a JSON object and then back to a gamepad
+     *
+     * @param gamepad the original gamepad
+     * @returns a new gamepad object, populated with the original gamepads values
+     */
+    static deepCopyGamepad(gamepad: Gamepad): Gamepad {
+        return JSON.parse(
+            JSON.stringify({
+                buttons: gamepad.buttons.map((b) =>
+                    JSON.parse(
+                        JSON.stringify({
+                            pressed: b.pressed,
+                            touched: b.touched,
+                            value: b.value
+                        })
+                    )
+                ),
+                axes: gamepad.axes
+            })
+        );
+    }
+
     updateStatus(
         source: XRInputSource,
         frame: XRFrame,
@@ -75,12 +97,10 @@ export class XRGamepadController {
                     currentState: undefined,
 					id: undefined
                 };
-                this.controllers[handedness].prevState =
-                    WebXRUtils.deepCopyGamepad(source.gamepad);
+                this.controllers[handedness].prevState = XRGamepadController.deepCopyGamepad(source.gamepad);
             }
 
-            this.controllers[handedness].currentState =
-                WebXRUtils.deepCopyGamepad(source.gamepad);
+            this.controllers[handedness].currentState = XRGamepadController.deepCopyGamepad(source.gamepad);
 
             const controller = this.controllers[handedness];
             const currState = controller.currentState;
@@ -92,35 +112,33 @@ export class XRGamepadController {
 
                 if (currButton.pressed) {
                     // press
-                    this.toStreamerMessagesProvider.toStreamerHandlers.get(
-                        'XRButtonPressed'
-                    )([handedness, i, prevButton.pressed ? 1 : 0]);
-                } else if (!currButton.pressed && prevButton.pressed) {
-                    this.toStreamerMessagesProvider.toStreamerHandlers.get(
-                        'XRButtonReleased'
-                    )([handedness, i, 0]);
+                    const isRepeat = prevButton.pressed ? 1 : 0;
+                    this.toStreamerMessagesProvider.toStreamerHandlers.get('XRButtonPressed')([handedness, i, isRepeat, currButton.value]);
+                } else if (prevButton.pressed) {
+                    this.toStreamerMessagesProvider.toStreamerHandlers.get('XRButtonReleased')([handedness, i, 0]);
                 }
 
-                if (currButton.touched && !currButton.pressed) {
-                    // press
-                    this.toStreamerMessagesProvider.toStreamerHandlers.get(
-                        'XRButtonPressed'
-                    )([handedness, 3, prevButton.touched ? 1 : 0]);
-                } else if (!currButton.touched && prevButton.touched) {
-                    this.toStreamerMessagesProvider.toStreamerHandlers.get(
-                        'XRButtonReleased'
-                    )([handedness, 3, 0]);
+                if (currButton.touched) {
+                    // touched
+                    const isRepeat = prevButton.touched ? 1 : 0;
+                    this.toStreamerMessagesProvider.toStreamerHandlers.get('XRButtonTouched')([handedness, i, isRepeat]);
+                }
+                else if (prevButton.touched) {
+                    this.toStreamerMessagesProvider.toStreamerHandlers.get('XRButtonTouchReleased')([handedness, i, 0]);
                 }
             }
 
             // Iterate over gamepad axes
             for (let i = 0; i < currState.axes.length; i++) {
-                this.toStreamerMessagesProvider.toStreamerHandlers.get(
-                    'XRAnalog'
-                )([handedness, i, currState.axes[i]]);
+                const curAxisValue = currState.axes[i];
+                const prevAxisValue = prevState.axes[i];
+                // Only send axis update if there is a change
+                if(curAxisValue != prevAxisValue) {
+                    this.toStreamerMessagesProvider.toStreamerHandlers.get('XRAnalog')([handedness, i, curAxisValue]);
+                }
             }
 
             this.controllers[handedness].prevState = currState;
         }
     }
-}
+}

package/src/PeerConnectionController/PeerConnectionController.ts

@@ -382,7 +382,7 @@ export class PeerConnectionController {
         // Setup a transceiver for getting UE video
         this.peerConnection?.addTransceiver('video', { direction: 'recvonly' });
 
-        // We can only set preferrec codec on Chrome
+        // We can only set preferred codec on Chrome
         if (RTCRtpReceiver.getCapabilities && this.preferredCodec != '') {
             for (const transceiver of this.peerConnection?.getTransceivers() ?? []) {
                 if (
@@ -412,7 +412,7 @@ export class PeerConnectionController {
                             return option != this.preferredCodec;
                         })
                         .forEach((option) => {
-                            // Ammend the rest of the browsers supported codecs
+                            // Amend the rest of the browsers supported codecs
                             const altCodec = option.split(' ');
                             codecs.push({
                                 mimeType: 'video/' + altCodec[0] /* Name */,

package/src/PixelStreaming/PixelStreaming.test.ts

@@ -122,7 +122,7 @@ describe('PixelStreaming', () => {
         expect(webSocketSpyFunctions.constructorSpy).toHaveBeenCalledWith(mockSignallingUrl);
     });
 
-    it('should autoconnect to signalling server if autoconnect setting is enabled', () => {
+    it('should auto connect to signalling server if auto connect setting is enabled', () => {
         const config = new Config({ initialSettings: {ss: mockSignallingUrl, AutoConnect: true}});
 
         expect(webSocketSpyFunctions.constructorSpy).not.toHaveBeenCalled();
@@ -212,7 +212,7 @@ describe('PixelStreaming', () => {
         // We don't have a signalling server to respond with data so lets just fake a response with no streamers
         triggerStreamerListMessage([]);
         // Wait 2 seconds. This delay waits for the WebRtcPlayerController to realise the previously received list doesn't contain
-        // the streamer is was preiously subscribed to, so it'll request the list again
+        // the streamer is was previously subscribed to, so it'll request the list again
         jest.advanceTimersByTime(2000);
 
         // Same as above but repeated for the second call
@@ -244,7 +244,7 @@ describe('PixelStreaming', () => {
         );
     });
 
-    it('should autoselect a streamer if receiving only one streamer in streamerList message', () => {
+    it('should auto select a streamer if receiving only one streamer in streamerList message', () => {
         const config = new Config({ initialSettings: {ss: mockSignallingUrl, AutoConnect: true}});
         const streamerListSpy = jest.fn();
         const pixelStreaming = new PixelStreaming(config);
@@ -267,7 +267,7 @@ describe('PixelStreaming', () => {
         );
     });
 
-    it('should not autoselect a streamer if receiving multiple streamers in streamerList message', () => {
+    it('should not auto select a streamer if receiving multiple streamers in streamerList message', () => {
         const config = new Config({ initialSettings: {ss: mockSignallingUrl, AutoConnect: true}});
         const streamerId2 = "MOCK_2_PIXEL_STREAMING";
         const extendedStreamerIdList = [streamerId, streamerId2];

package/src/PixelStreaming/PixelStreaming.ts

@@ -45,7 +45,7 @@ import { RTCUtils } from '../Util/RTCUtils';
 
 
 export interface PixelStreamingOverrides {
-    /** The DOM elment where Pixel Streaming video and user input event handlers are attached to.
+    /** The DOM element where Pixel Streaming video and user input event handlers are attached to.
      * You can give an existing DOM element here. If not given, the library will create a new div element
      * that is not attached anywhere. In this case you can later get access to this new element and
      * attach it to your web page. */
@@ -146,7 +146,7 @@ export class PixelStreaming {
         this.config._addOnSettingChangedListener(
             Flags.IsQualityController,
             (wantsQualityController: boolean) => {
-                // If the setting has been set to true (either programatically or the user has flicked the toggle)
+                // If the setting has been set to true (either programmatically or the user has flicked the toggle)
                 // and we aren't currently quality controller, send the request
                 if (
                     wantsQualityController === true &&

package/src/Util/CoordinateConverter.ts

@@ -92,11 +92,12 @@ export class CoordinateConverter {
         this.videoElement = this.videoElementProvider.getVideoElement();
 
         if (this.videoElementParent && this.videoElement) {
-            const playerAspectRatio =
-                this.videoElementParent.clientHeight /
-                this.videoElementParent.clientWidth;
-            const videoAspectRatio =
-                this.videoElement.videoHeight / this.videoElement.videoWidth;
+            const playerWidth = this.videoElementParent.clientWidth || 1;
+            const playerHeight = this.videoElementParent.clientHeight || 1;
+            const videoWidth = this.videoElement.videoWidth || 1;
+            const videoHeight = this.videoElement.videoHeight || 1;
+            const playerAspectRatio = playerHeight / playerWidth;
+            const videoAspectRatio = videoHeight / videoWidth;
             if (playerAspectRatio > videoAspectRatio) {
                 Logger.Log(
                     Logger.GetStackTrace(),

package/src/Util/RTCUtils.ts

@@ -1,5 +1,5 @@
 export class RTCUtils {
-    static isVideoTransciever(transceiver : RTCRtpTransceiver | undefined) : boolean {
+    static isVideoTransceiver(transceiver : RTCRtpTransceiver | undefined) : boolean {
         return this.canTransceiverReceiveVideo(transceiver) || this.canTransceiverSendVideo(transceiver);
     }
 
@@ -19,7 +19,7 @@ export class RTCUtils {
             transceiver.sender.track.kind === 'video';    
     }
 
-    static isAudioTransciever(transceiver : RTCRtpTransceiver | undefined) : boolean {
+    static isAudioTransceiver(transceiver : RTCRtpTransceiver | undefined) : boolean {
         return this.canTransceiverReceiveAudio(transceiver) || this.canTransceiverSendAudio(transceiver);
     }
 

package/src/WebRtcPlayer/WebRtcPlayerController.ts

@@ -707,6 +707,15 @@ export class WebRtcPlayerController {
                     data
                 )
         );
+        this.streamMessageController.registerMessageHandler(
+            MessageDirection.ToStreamer,
+            'XREyeViews',
+            (data: Array<number | string>) =>
+                this.sendMessageController.sendMessageToStreamer(
+                    'XREyeViews',
+                    data
+                )
+        );
         this.streamMessageController.registerMessageHandler(
             MessageDirection.ToStreamer,
             'XRHMDTransform',
@@ -743,6 +752,15 @@ export class WebRtcPlayerController {
                     data
                 )
         );
+        this.streamMessageController.registerMessageHandler(
+            MessageDirection.ToStreamer,
+            'XRButtonTouchReleased',
+            (data: Array<number | string>) =>
+                this.sendMessageController.sendMessageToStreamer(
+                    'XRButtonTouchReleased',
+                    data
+                )
+        );
         this.streamMessageController.registerMessageHandler(
             MessageDirection.ToStreamer,
             'XRButtonPressed',