Merge pull request #364 from EpicGames/master

Merging in master to generate npm packages.

.github/workflows/container-images.yml

@@ -2,7 +2,7 @@ name: Publish Cirrus container
 
 on:
   push:
-    branches: ['UE5.3']
+    branches: ['UE5.4']
     paths: ['SignallingWebServer/**']
 
 jobs:
@@ -27,6 +27,6 @@ jobs:
         uses: docker/build-push-action@v3
         with:
           context: .
-          tags: 'ghcr.io/epicgames/pixel-streaming-signalling-server:5.3'
+          tags: 'ghcr.io/epicgames/pixel-streaming-signalling-server:5.4'
           push: true
           file: SignallingWebServer/Dockerfile

.github/workflows/create-gh-release.yml

@@ -2,7 +2,7 @@ name: Releases
 
 on: 
   push:
-    branches: ['UE5.3']
+    branches: ['UE5.4']
     paths: ['RELEASE_VERSION']
 
 jobs:

.github/workflows/publish-library-to-npm.yml

@@ -1,7 +1,7 @@
 name: Publish frontend lib
 on:
   push:
-    branches: ['UE5.3']
+    branches: ['UE5.4']
     paths: ['Frontend/library/package.json']
 jobs:
   build:

.github/workflows/publish-ui-library-to-npm.yml

@@ -1,7 +1,7 @@
 name: Publish frontend-ui lib
 on:
   push:
-    branches: ['UE5.3']
+    branches: ['UE5.4']
     paths: ['Frontend/ui-library/package.json']
 jobs:
   build:

Frontend/implementations/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@epicgames-ps/react-pixelstreamingfrontend-react-ue5.3",
+  "name": "@epicgames-ps/react-pixelstreamingfrontend-react-ue5.4",
   "version": "0.0.1",
   "description": "",
   "main": "./src/index.tsx",

Frontend/implementations/react/src/components/PixelStreamingWrapper.tsx

@@ -5,7 +5,7 @@ import {
     Config,
     AllSettings,
     PixelStreaming
-} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 
 export interface PixelStreamingWrapperProps {
     initialSettings?: Partial<AllSettings>;

Frontend/implementations/typescript/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@epicgames-ps/reference-pixelstreamingfrontend-ue5.3",
+  "name": "@epicgames-ps/reference-pixelstreamingfrontend-ue5.4",
   "version": "0.0.1",
   "description": "",
   "main": "./src/player.ts",

Frontend/implementations/typescript/readme.md

@@ -14,4 +14,4 @@ A plugin library that can be optionally applied on top of the core library to cr
 
 
 ### Adding it to your project
-`npm i @epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.3`
+`npm i @epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.4`

Frontend/implementations/typescript/src/player.ts

@@ -1,7 +1,7 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
-import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
-import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.3';
+import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
+import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.4';
 const PixelStreamingApplicationStyles =
     new PixelStreamingApplicationStyle();
 PixelStreamingApplicationStyles.applyStyleSheet();

Frontend/implementations/typescript/src/showcase.ts

@@ -1,7 +1,7 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
-import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
-import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.3';
+import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
+import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.4';
 export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
 PixelStreamingApplicationStyles.applyStyleSheet();
 

Frontend/implementations/typescript/src/stresstest.ts

@@ -1,7 +1,7 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
-import { Config, Flags, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
-import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.3';
+import { Config, Flags, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
+import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.4';
 const PixelStreamingApplicationStyles =
     new PixelStreamingApplicationStyle();
 PixelStreamingApplicationStyles.applyStyleSheet();

Frontend/implementations/typescript/src/uiless.ts

@@ -1,6 +1,6 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
-import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 
 document.body.onload = function() {
 	// Example of how to set the logger level

Frontend/library/package.json

@@ -1,7 +1,7 @@
 {
-    "name": "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3",
+    "name": "@epicgames-ps/lib-pixelstreamingfrontend-ue5.4",
     "version": "0.0.1",
-    "description": "Frontend library for Unreal Engine 5.3 Pixel Streaming",
+    "description": "Frontend library for Unreal Engine 5.4 Pixel Streaming",
     "main": "dist/lib-pixelstreamingfrontend.js",
     "module": "dist/lib-pixelstreamingfrontend.esm.js",
     "types": "types/pixelstreamingfrontend.d.ts",

Frontend/library/readme.md

@@ -11,5 +11,5 @@ See [lib-pixelstreamingfrontend-ui](/Frontend/implementations/typescript) for an
 - Opens a datachannel connection sending and receiving custom data (in addition to input).
 
 ### Adding it to your project
-`npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.3`
+`npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.4`
 

Frontend/ui-library/package.json

@@ -1,7 +1,7 @@
 {
-    "name": "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.3",
+    "name": "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.4",
     "version": "0.0.1",
-    "description": "Reference frontend UI library for Unreal Engine 5.3 Pixel Streaming - gives the stock look and feel.",
+    "description": "Reference frontend UI library for Unreal Engine 5.4 Pixel Streaming - gives the stock look and feel.",
     "main": "dist/lib-pixelstreamingfrontend-ui.js",
     "module": "dist/lib-pixelstreamingfrontend-ui.esm.js",
     "types": "types/pixelstreamingfrontend-ui.d.ts",
@@ -16,7 +16,7 @@
         "spellcheck": "cspell \"{README.md,.github/*.md,src/**/*.ts}\""
     },
     "devDependencies": {
-        "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3": "^0.0.1",
+        "@epicgames-ps/lib-pixelstreamingfrontend-ue5.4": "^0.0.1",
         "@typescript-eslint/eslint-plugin": "^5.16.0",
         "@typescript-eslint/parser": "^5.16.0",
         "cspell": "^4.1.0",
@@ -34,7 +34,7 @@
         "jss-plugin-global": "^10.9.2"
     },
     "peerDependencies": {
-        "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3": "^0.0.1"
+        "@epicgames-ps/lib-pixelstreamingfrontend-ue5.4": "^0.0.1"
     },
     "repository": {
         "type": "git",

Frontend/ui-library/src/Application/Application.ts

@@ -8,7 +8,7 @@ import {
     LatencyTestResults,
     InitialSettings,
     MessageStreamerList
-} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 import { OverlayBase } from '../Overlay/BaseOverlay';
 import { ActionOverlay } from '../Overlay/ActionOverlay';
 import { TextOverlay } from '../Overlay/TextOverlay';

Frontend/ui-library/src/Config/ConfigUI.ts

@@ -17,7 +17,7 @@ import {
     SettingOption,
     Logger,
     SettingBase
-} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 import { SettingUIFlag } from './SettingUIFlag';
 import { SettingUINumber } from './SettingUINumber';
 import { SettingUIText } from './SettingUIText';

Frontend/ui-library/src/Config/SettingUIBase.ts

@@ -1,6 +1,6 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
-import { SettingBase } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+import { SettingBase } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 
 /**
  * Base class for a setting that has a text label, an arbitrary setting value it stores, an a HTML element that represents this setting.

Frontend/ui-library/src/Config/SettingUIFlag.ts

@@ -3,7 +3,7 @@
 import type {
     FlagsIds,
     SettingFlag
-} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 import { SettingUIBase } from './SettingUIBase';
 
 export class SettingUIFlag<

Frontend/ui-library/src/Config/SettingUINumber.ts

@@ -3,8 +3,8 @@
 import type {
     NumericParametersIds,
     SettingNumber
-} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
-import { Logger } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
+import { Logger } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 import { SettingUIBase } from './SettingUIBase';
 
 /**

Frontend/ui-library/src/Config/SettingUIOption.ts

@@ -3,7 +3,7 @@
 import type {
     OptionParametersIds,
     SettingOption
-} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 import { SettingUIBase } from './SettingUIBase';
 
 export class SettingUIOption<

Frontend/ui-library/src/Config/SettingUIText.ts

@@ -3,7 +3,7 @@
 import type {
     SettingText,
     TextParametersIds
-} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 import { SettingUIBase } from './SettingUIBase';
 
 export class SettingUIText<

Frontend/ui-library/src/Overlay/ActionOverlay.ts

@@ -1,6 +1,6 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
-import { Logger } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+import { Logger } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 
 import { OverlayBase } from './BaseOverlay';
 

Frontend/ui-library/src/UI/Controls.ts

@@ -4,7 +4,7 @@ import { FullScreenIcon } from './FullscreenIcon';
 import { SettingsIcon } from './SettingsIcon';
 import { StatsIcon } from './StatsIcon';
 import { XRIcon } from './XRIcon';
-import { WebXRController } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+import { WebXRController } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 import { UIElementConfig, UIElementCreationMode } from '../UI/UIConfigurationTypes'
 
 /**

Frontend/ui-library/src/UI/LatencyTest.ts

@@ -1,7 +1,7 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
-import { LatencyTestResults } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
-import { Logger } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+import { LatencyTestResults } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
+import { Logger } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 
 /**
  * Latency test UI elements and results handling.

Frontend/ui-library/src/UI/StatsPanel.ts

@@ -1,8 +1,8 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
 import { LatencyTest } from './LatencyTest';
-import {InitialSettings, Logger, PixelStreaming} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
-import { AggregatedStats } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
+import { InitialSettings, Logger, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
+import { AggregatedStats } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4';
 import { MathUtils } from '../Util/MathUtils';
 import {DataChannelLatencyTest} from "./DataChannelLatencyTest";
 import {PixelStreamingSettings} from "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3/types/DataChannel/InitialSettings";

Frontend/ui-library/webpack.common.js

@@ -21,7 +21,7 @@ module.exports = {
         extensions: ['.tsx', '.ts', '.js']
     },
     externals: {
-        '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3': '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3',
+        '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4': '@epicgames-ps/lib-pixelstreamingfrontend-ue5.4',
         jss: 'jss',
         'jss-plugin-camel-case': 'jss-plugin-camel-case',
         'jss-plugin-global': 'jss-plugin-global'

Matchmaker/Docs/Setting up Matchmaker.md

@@ -0,0 +1,40 @@
+## Multiple Full Stacks with Matchmaking
+
+Instead of having all users connect to the same stream, you may want each person to end up in their own interactive experiences. To do this, you can run a separate stack of Pixel Streaming components for each user, and direct each user to a separate Signaling and Web Server to start a connection.
+
+You can set up each stack of Pixel Streaming components on a separate host, or you can put more than one stack on the same host as long as you configure the port settings for the components within each stack so that they all communicate over different ports. See the [Pixel Streaming Reference](https://docs.unrealengine.com/5.3/en-US/unreal-engine-pixel-streaming-reference/) for details on these port settings.
+
+**Note:** If you plan to run multiple instances of the Unreal Engine using Pixel Streaming on the same computer, remember many consumer-level graphics cards such as the NVIDIA GeForce line can only run a maximum of three encoders at the same time. Professional-grade cards such as the Quadro and Tesla do not have the same limitation.
+
+To help set up this kind of configuration, the Pixel Streaming system can use a matchmaker server that tracks which Signaling and Web Servers are available, and whether they are being used by a client connection.
+
+![Multiple full stacks with a Matchmaker Server](images/MatchmakerDiagram.png)
+
+Instead of each client needing to connect to its own Signaling and Web Server URL, they first connect to the Matchmaker Server. The Matchmaker takes care of redirecting each requester to its own Signaling and Web Server, which sets up the peer-to-peer connection between the client and its UE5 application. As long as that connection is active, the Matchmaker Server will not redirect any new incoming browser connections to the same Signaling and Web Server.
+
+The Pixel Streaming system includes a reference implementation for a Matchmaker Server, under the `Samples/PixelStreaming/WebServers/Matchmaker` folder. You can use this server as-is; or, you can customize the `matchmaker.js` file to fit your needs, as long as you handle the same messages from the Signaling and Web Server.
+
+To set up the Matchmaker Server:
+
+1.  Before you start your Signalling and Web Server, start the Matchmaker Server by running its `run.bat` file. By default, the server listens for HTTP connections from clients on port **90**, and it listens for connections from Signalling and Web Servers on port **9999**. You can override those settings by providing the following configuration parameters on the command line:
+
+    | Parameter | Description |
+    | --- | --- |
+    | **--HttpPort** |  Defines the port the Matchmaker Server listens to for incoming HTTP connections from browsers. |
+    | **--MatchmakerPort** | Defines the port the Matchmaker Server listens to for incoming status messages from Signaling and Web Servers. |
+
+    For example:
+
+    \> Start_SignallingServer.ps1 --HttpPort 88 --MatchmakerPort 9988
+
+2.  Set the following configuration parameters for the Signalling and Web Server:
+
+    | Parameter | Description |
+    | --- | --- |
+    | **--UseMatchmaker** | Set this parameter to `true` to make the Signalling Web Server send its current status to the Matchmaker Server. |
+    | **--MatchmakerAddress** | The IP address of the Matchmaker Server this Signalling and Web Server will connect to. |
+    | **--MatchmakerPort** | The port this Signalling and Web Server will use when it needs to send messages to the Matchmaker Server. Make sure this value matches the **--MatchmakerPort** value you set for the Matchmaker Server. |
+    | **--PublicIp** | The publicly visible IP address of the Signalling and Web Server. When the Matchmaker Server redirects a user to this Signalling and Web Server, it sends them to this IP address. Therefore, it has to be visible to the connecting browser. |
+    | **--HttpPort** | The port that the Signalling and Web Server listens to for HTTP connections. When the Matchmaker Server redirects a user to this Signalling and Web Server, it sends them to this port. |
+
+    For instructions on how you can set these parameters, see the [Pixel Streaming Reference](https://docs.unrealengine.com/5.3/en-US/unreal-engine-pixel-streaming-reference/)

RELEASE_VERSION

@@ -1 +1 @@
-0.0.1
+0.0.4

SFU/Docs/What is the SFU.md

@@ -0,0 +1,39 @@
+## What is the SFU?
+
+A Selective Forwarding Unit (SFU) is a server which intelligently routes media streams between participants. In Pixel Streaming the role of the SFU is to receive stream data from the Unreal Engine application and deliver it to the recipients peers (typically connected web browsers), optionally subsetting the data to adapt to the prevailing network conditions of each recipient peer.
+
+When using the SFU Pixel Streaming implements the simulcast strategy for adapting stream bandwidth. In the simulcast strategy, the Unreal Instance generates multiple streams at different resolutions. The SFU then selects which quality variant of the stream to transmit to the recipient based on the recipient's network conditions.
+
+
+**Note:** At this time the SFU feature of Pixel Streaming is experimental.
+
+
+![SFUSetup](images/SFUDiagram.PNG)
+
+## When to Use an SFU
+An SFU enables a one-to-many stream where there can be more peers connected than would be typically available if all the peers were connected to the Pixel Streaming application in a peer-to-peer fashion. The use of an SFU is often appropriate when your Pixel Streaming application requires multiple connected recipients and those recipients are in varying network conditions that call for different quality stream quality levels (for example, lower bitrates, resolutions, or framerates).
+
+## SFU Configuration
+Configuration of the SFU can be achieved by modifying the `config.js` file found in `Samples/PixelStreaming/WebServers/SFU`.
+
+The SFU is configured by default to provide two quality levels. One full resolution stream and one half resolution stream. This configuration can be changed using `-SimulcastParameters=` (See [Pixel Streaming Reference](https://docs.unrealengine.com/5.3/en-US/unreal-engine-pixel-streaming-reference/) for details). 
+
+
+**Note:** If you are create more than three simulcast streams you may hit up against limits when using the H.264 hardware encoders on consumer GPUs that often have a limit of three encoding sessions.
+
+## Creating a SFU Layer Toggle
+
+To best test the layer-switching functionality of the SFU, we’ve added the blueprints required to force the stream to switch between the available layers of your SFU.
+
+![SFULayerBP](images/SFULayerBP.PNG) 
+
+Adding the above to your level blueprint lets you use the assigned key as a connected peer to switch layers. 
+
+**Note:** The SFU is designed to automatically switch peers between layers based on their connection, so using this blueprint isn’t required for actual deployments.
+
+
+![Layer1](images/Layer1.png) Layer 1 
+
+![Layer2](images/Layer2.png) Layer 2 
+
+![Layer3](images/Layer3.png) Layer 3 

SignallingWebServer/Dockerfile

@@ -1,13 +1,10 @@
 # Use the current Long Term Support (LTS) version of Node.js
 FROM node:lts
-
 # Copy the signalling server and frontend source code from the build context
 COPY /SignallingWebServer /SignallingWebServer
 COPY /Frontend /Frontend
-
 # Install the dependencies for the signalling server and build the frontend
 RUN SignallingWebServer/platform_scripts/bash/setup.sh --build
-
 # Expose TCP ports 80 and 443 for player WebSocket connections and web server HTTP(S) access
 EXPOSE 80
 EXPOSE 443
@@ -30,4 +27,4 @@ EXPOSE 3478
 EXPOSE 3479
 
 # Set the signalling server as the container's entrypoint
-ENTRYPOINT ["/usr/local/bin/node", "/SignallingWebServer/cirrus.js"]
+ENTRYPOINT ["/usr/local/bin/node", "/SignallingWebServer/cirrus.js"]

SignallingWebServer/platform_scripts/bash/docker-build-cirrus.sh

@@ -7,4 +7,3 @@ pushd "${BASH_LOCATION}" > /dev/null
 # When run from SignallingWebServer/platform_scripts/bash, this uses the SignallingWebServer directory
 # as the build context so the Cirrus files can be successfully copied into the container image
 docker build --network=host -t 'cirrus-webserver:latest' -f "${BASH_LOCATION}/../../Dockerfile" "${BASH_LOCATION}/../../.."
-