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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5",
-    "version": "0.0.11",
+    "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",
@@ -16,7 +16,7 @@
         "spellcheck": "cspell \"{README.md,.github/*.md,src/**/*.ts}\""
     },
     "devDependencies": {
-        "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "^0.0.13",
+        "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "^0.0.14",
         "@types/jest": "27.5.1",
         "@types/webxr": "^0.5.1",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -45,3 +45,4 @@
         "access": "public"
     }
 }
+

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/Config/Config.ts

@@ -508,7 +508,7 @@ export class Config {
                 Flags.HideUI,
                 'Hide the UI overlay',
                 'Will hide all UI overlay details',
-                settings && settings.hasOwnProperty(Flags.HideUI) ?
+                settings && Object.prototype.hasOwnProperty.call(settings, Flags.HideUI) ?
                     settings[Flags.HideUI] :
                     false,
                 useUrlParams

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

@@ -15,6 +15,8 @@ export class PeerConnectionController {
     config: Config;
     preferredCodec: string;
     updateCodecSelection: boolean;
+    videoTrack: MediaStreamTrack;
+    audioTrack: MediaStreamTrack;
 
     /**
      * Create a new RTC Peer Connection client
@@ -175,10 +177,15 @@ export class PeerConnectionController {
      * Generate Aggregated Stats and then fire a onVideo Stats event
      */
     generateStats() {
-        this.peerConnection?.getStats(null).then((StatsData: RTCStatsReport) => {
+        const statsHandler = (StatsData: RTCStatsReport) => {
             this.aggregatedStats.processStats(StatsData);
-            this.onVideoStats(this.aggregatedStats);
+        };
+
+        const audioPromise = this.peerConnection?.getStats(this.audioTrack).then(statsHandler);
+        const videoPromise = this.peerConnection?.getStats(this.videoTrack).then(statsHandler);
 
+        Promise.allSettled([audioPromise, videoPromise]).then(() => {
+            this.onVideoStats(this.aggregatedStats);
             // Update the preferred codec selection based on what was actually negotiated
             if (this.updateCodecSelection && !!this.aggregatedStats.inboundVideoStats.codecId) {
                 this.config.setOptionSettingValue(
@@ -300,6 +307,15 @@ export class PeerConnectionController {
      * @param event - The webRtc track event
      */
     handleOnTrack(event: RTCTrackEvent) {
+        if (event.streams.length < 1 || event.streams[0].id == 'probator') {
+            return;
+        }
+        if (event.track.kind == 'video') {
+            this.videoTrack = event.track;
+        }
+        if (event.track.kind == 'audio') {
+            this.audioTrack = event.track;
+        }
         this.onTrack(event);
     }
 
@@ -366,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 (
@@ -396,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

@@ -6,7 +6,7 @@ import {
 import { PixelStreaming } from './PixelStreaming';
 import { SettingsChangedEvent, StreamerListMessageEvent, WebRtcConnectedEvent, WebRtcSdpEvent } from '../Util/EventEmitter';
 import { mockWebSocket, MockWebSocketSpyFunctions, MockWebSocketTriggerFunctions, unmockWebSocket } from '../__test__/mockWebSocket';
-import { MessageReceive } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
+import { BaseMessage, Messages, MessageHelpers } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
 import { mockRTCPeerConnection, MockRTCPeerConnectionSpyFunctions, MockRTCPeerConnectionTriggerFunctions, unmockRTCPeerConnection } from '../__test__/mockRTCPeerConnection';
 import { mockHTMLMediaElement, mockMediaStream, unmockMediaStream } from '../__test__/mockMediaStream';
 import { InitialSettings } from '../DataChannel/InitialSettings';
@@ -32,26 +32,13 @@ describe('PixelStreaming', () => {
 
     const triggerWebSocketOpen = () =>
         webSocketTriggerFunctions.triggerOnOpen?.();
-    const triggerConfigMessage = () =>
-        webSocketTriggerFunctions.triggerOnMessage?.({
-            type: MessageReceive.MessageRecvTypes.CONFIG,
-            peerConnectionOptions: {}
-        });
-    const triggerStreamerListMessage = (streamerIdList: string[]) =>
-        webSocketTriggerFunctions.triggerOnMessage?.({
-            type: MessageReceive.MessageRecvTypes.STREAMER_LIST,
-            ids: streamerIdList
-        });
-    const triggerSdpOfferMessage = () =>
-        webSocketTriggerFunctions.triggerOnMessage?.({
-            type: MessageReceive.MessageRecvTypes.OFFER,
-            sdp
-        });
-    const triggerIceCandidateMessage = () =>
-        webSocketTriggerFunctions.triggerOnMessage?.({
-            type: MessageReceive.MessageRecvTypes.ICE_CANDIDATE,
-            candidate: iceCandidate
-        });
+    const triggerSignallingMessage = (message: BaseMessage) => {
+        webSocketTriggerFunctions.triggerOnMessage?.(message);
+    }
+    const triggerConfigMessage = () => triggerSignallingMessage(MessageHelpers.createMessage(Messages.config, { peerConnectionOptions: {} }));
+    const triggerStreamerListMessage = (streamerIdList: string[]) => triggerSignallingMessage(MessageHelpers.createMessage(Messages.streamerList, { ids: streamerIdList }));
+    const triggerSdpOfferMessage = () => triggerSignallingMessage(MessageHelpers.createMessage(Messages.offer, { sdp }));
+    const triggerIceCandidateMessage = () => triggerSignallingMessage(MessageHelpers.createMessage(Messages.iceCandidate, { candidate: iceCandidate }));
     const triggerIceConnectionState = (state: RTCIceConnectionState) =>
         rtcPeerConnectionTriggerFunctions.triggerIceConnectionStateChange?.(
             state
@@ -135,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();
@@ -200,17 +187,13 @@ describe('PixelStreaming', () => {
 
     it('should automatically reconnect and request streamer list N times on websocket close', () => {
         const config = new Config({ initialSettings: {ss: mockSignallingUrl, AutoConnect: true, MaxReconnectAttempts: 3}});
-        const autoconnectedSpy = jest.fn();
-
         const pixelStreaming = new PixelStreaming(config);
-        pixelStreaming.addEventListener("webRtcAutoConnect", autoconnectedSpy);
 
         expect(webSocketSpyFunctions.constructorSpy).toHaveBeenCalledWith(mockSignallingUrl);
         expect(webSocketSpyFunctions.constructorSpy).toHaveBeenCalledTimes(1);
         expect(webSocketSpyFunctions.closeSpy).not.toHaveBeenCalled();
 
-    
-        webSocketTriggerFunctions.triggerRemoteClose();
+        webSocketTriggerFunctions.triggerRemoteClose?.();
 
         expect(webSocketSpyFunctions.closeSpy).toHaveBeenCalled();
 
@@ -229,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
@@ -261,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);
@@ -273,18 +256,18 @@ describe('PixelStreaming', () => {
         
         expect(streamerListSpy).toHaveBeenCalledWith(new StreamerListMessageEvent({
             messageStreamerList: expect.objectContaining({
-                type: MessageReceive.MessageRecvTypes.STREAMER_LIST,
+                type: Messages.streamerList.typeName,
                 ids: streamerIdList
             }),
             autoSelectedStreamerId: streamerId,
-            wantedStreamerId: null
+            wantedStreamerId: '' 
         }));
         expect(webSocketSpyFunctions.sendSpy).toHaveBeenCalledWith(
             expect.stringMatching(/"type":"subscribe".*MOCK_PIXEL_STREAMING/)
         );
     });
 
-    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];
@@ -298,11 +281,11 @@ describe('PixelStreaming', () => {
         
         expect(streamerListSpy).toHaveBeenCalledWith(new StreamerListMessageEvent({
             messageStreamerList: expect.objectContaining({
-                type: MessageReceive.MessageRecvTypes.STREAMER_LIST,
+                type: Messages.streamerList.typeName,
                 ids: extendedStreamerIdList
             }),
-            autoSelectedStreamerId: null,
-            wantedStreamerId: null
+            autoSelectedStreamerId: '',
+            wantedStreamerId: ''
         }));
         expect(webSocketSpyFunctions.sendSpy).not.toHaveBeenCalledWith(
             expect.stringMatching(/"type":"subscribe"/)
@@ -443,22 +426,22 @@ describe('PixelStreaming', () => {
         expect(streamSpy).toHaveBeenCalled();
     });
 
-    it('should emit playStreamRejected if video play is rejected', async () => {
-        mockHTMLMediaElement({ ableToPlay: false });
-        
-        const config = new Config({ initialSettings: {ss: mockSignallingUrl}});
-        const streamRejectedSpy = jest.fn();
-        const pixelStreaming = new PixelStreaming(config);
-        pixelStreaming.addEventListener("playStreamRejected", streamRejectedSpy);
-        pixelStreaming.connect();
-
-        establishMockedPixelStreamingConnection();
-
-        pixelStreaming.play();
-        await flushPromises();
-
-        expect(streamRejectedSpy).toHaveBeenCalled();
-    });
+    // it('should emit playStreamRejected if video play is rejected', async () => {
+    //     mockHTMLMediaElement({ ableToPlay: false });
+    //     
+    //     const config = new Config({ initialSettings: {ss: mockSignallingUrl}});
+    //     const streamRejectedSpy = jest.fn();
+    //     const pixelStreaming = new PixelStreaming(config);
+    //     pixelStreaming.addEventListener("playStreamRejected", streamRejectedSpy);
+    //     pixelStreaming.connect();
+    //
+    //     establishMockedPixelStreamingConnection();
+    //
+    //     pixelStreaming.play();
+    //     await flushPromises();
+    //
+    //     expect(streamRejectedSpy).toHaveBeenCalled();
+    // });
 
     it('should send data through the data channel when emitCommand is called', () => {
         mockHTMLMediaElement({ ableToPlay: true, readyState: 2 });

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. */
@@ -121,7 +121,7 @@ export class PixelStreaming {
         this._setupWebRtcTCPRelayDetection = this._setupWebRtcTCPRelayDetection.bind(this)
 
         // Add event listener for the webRtcConnected event
-        this._eventEmitter.addEventListener("webRtcConnected", (webRtcConnectedEvent: WebRtcConnectedEvent) => {
+        this._eventEmitter.addEventListener("webRtcConnected", (_: WebRtcConnectedEvent) => {
 
             // Bind to the stats received event
             this._eventEmitter.addEventListener("statsReceived",  this._setupWebRtcTCPRelayDetection);
@@ -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 &&
@@ -640,13 +640,13 @@ export class PixelStreaming {
     // Sets up to emit the webrtc tcp relay detect event 
     _setupWebRtcTCPRelayDetection(statsReceivedEvent: StatsReceivedEvent) {
         // Get the active candidate pair
-        let activeCandidatePair = statsReceivedEvent.data.aggregatedStats.getActiveCandidatePair();
+        const activeCandidatePair = statsReceivedEvent.data.aggregatedStats.getActiveCandidatePair();
                 
         // Check if the active candidate pair is not null
         if (activeCandidatePair != null) {
 
             // Get the local candidate assigned to the active candidate pair
-            let localCandidate = statsReceivedEvent.data.aggregatedStats.localCandidates.find((candidate) => candidate.id == activeCandidatePair.localCandidateId, null)
+            const localCandidate = statsReceivedEvent.data.aggregatedStats.localCandidates.find((candidate) => candidate.id == activeCandidatePair.localCandidateId, null)
 
             // Check if the local candidate is not null, candidate type is relay and the relay protocol is tcp
             if (localCandidate != null && localCandidate.candidateType == 'relay' && localCandidate.relayProtocol == 'tcp') {

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/VideoPlayer/StreamController.ts

@@ -31,6 +31,12 @@ export class StreamController {
             'handleOnTrack ' + JSON.stringify(rtcTrackEvent.streams),
             6
         );
+        // Do not add the track if the ID is `probator` as this is special track created by mediasoup for bitrate probing.
+        // Refer to https://github.com/EpicGamesExt/PixelStreamingInfrastructure/pull/86 for more details.
+        if (rtcTrackEvent.streams.length < 1 || rtcTrackEvent.streams[0].id == 'probator') {
+            return;
+        }
+
         const videoElement = this.videoElementProvider.getVideoElement();
 
         if (rtcTrackEvent.track) {

package/src/WebRtcPlayer/WebRtcPlayerController.ts

@@ -222,6 +222,7 @@ export class WebRtcPlayerController {
                 const message = MessageHelpers.createMessage(Messages.listStreamers);
                 this.protocol.sendMessage(message);
             }
+            this.reconnectAttempt = 0;
         });
         this.protocol.transport.addListener('error', () => {
             // dont really need to do anything here since the close event should follow.
@@ -706,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',
@@ -742,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',
@@ -1324,7 +1343,7 @@ export class WebRtcPlayerController {
             6
         );
 
-        let wantedStreamerId: string = null;
+        let wantedStreamerId: string = '';
 
         // get the current selected streamer id option
         const streamerIDOption = this.config.getSettingOption(OptionParameters.StreamerId);
@@ -1342,7 +1361,7 @@ export class WebRtcPlayerController {
             settingOptions
         );
 
-        let autoSelectedStreamerId: string = null;
+        let autoSelectedStreamerId: string = '';
         const waitForStreamer = this.config.isFlagEnabled(Flags.WaitForStreamer);
         const reconnectLimit = this.config.getNumericSettingValue(NumericParameters.MaxReconnectAttempts);
         const reconnectDelay = this.config.getNumericSettingValue(NumericParameters.StreamerAutoJoinInterval);