|
1 | 1 | # Utilising the frontend |
2 | 2 |
|
3 | 3 | ## Overview |
4 | | - |
5 | | -The Scalable Pixel Streaming (SPS) frontend is a library of HTML, CSS, and TypeScript code that runs in web browsers and allows users to connect and interact with Scalable Pixel Streaming applications. It consumes the Epic Games Pixel Streaming frontend and UI libraries and extends their signalling server and WebSocket packages. Note that the Epic Games Pixel Streaming frontend can be configured to work with Scalable Pixel Streaming signalling servers. |
6 | | - |
7 | | -## Epic Games Pixel Streaming frontend and UI frontend NPM packages |
8 | | - |
9 | | -### Pixel Streaming frontend |
10 | | - |
11 | | -The NPM package for the Pixel Streaming frontend consumed by SPS is located [here](https://www.npmjs.com/package/@epicgames-ps/lib-pixelstreamingfrontend-ue5.4). |
12 | | - |
13 | | -It contains the following functionality: |
14 | | - |
15 | | -- WebSocket handling; |
16 | | -- Data channel handling; |
17 | | -- UE message handling; |
18 | | -- Mouse and keyboard interaction handling; |
19 | | -- Video and audio stream handling; |
| 4 | +The Scalable Pixel Streaming Frontend is a library of HTML, CSS and TypeScript code that runs in client web browsers to help users connect to Scalable Pixel Streaming applications and interact with them. It is able to achieve this by consuming the Pixel Streaming Frontend and UI libraries and by extending their signalling server and WebSocket packages the Pixel Streaming Frontend can be configured to work with Scalable Pixel Streaming signalling severs. |
| 5 | + |
| 6 | +## Epic Games Pixel Streaming Frontend and UI Frontend |
| 7 | +For the base functionality for Pixel Streaming and its UI capabilities the Scalable Pixel Streaming Frontend consumes the Epic Games Pixel Streaming Frontend and UI Frontend: |
| 8 | +- [Pixel Streaming Frontend](https://www.npmjs.com/package/@epicgames-ps/lib-pixelstreamingfrontend-ue5.5) |
| 9 | +- [Pixel Streaming Frontend UI](https://www.npmjs.com/package/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.5) |
| 10 | + |
| 11 | +### Pixel Streaming Frontend |
| 12 | +The Pixel Streaming Frontend contains all the base functionality: |
| 13 | +- WebSocket handling. |
| 14 | +- Data channel handling. |
| 15 | +- UE message handling. |
| 16 | +- Mouse and keyboard interaction handling. |
| 17 | +- Video and audio stream handling. |
20 | 18 | - Logic for: AFK, FreezeFrames, Mic, TURN, SDP. |
21 | 19 |
|
22 | | -### Pixel Streaming frontend UI |
23 | | - |
24 | | -The NPM package for the Pixel Streaming UI frontend consumed by SPS is located [here](https://www.npmjs.com/package/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.4). |
25 | | - |
26 | | -It contains the following functionality: |
27 | | - |
28 | | -- Text, Action, and AFK Overlays; |
29 | | -- CSS styling; |
30 | | -- UI display settings; |
| 20 | +### Pixel Streaming Frontend UI |
| 21 | +The Pixel Streaming Frontend UI contains all the functionality for UI components: |
| 22 | +- Text, Action and AFK Overlays. |
| 23 | +- CSS styling. |
| 24 | +- UI display settings. |
31 | 25 | - UE stream data. |
32 | 26 |
|
33 | 27 | --- |
@@ -233,6 +227,12 @@ if(webSocketAddress != ""){ |
233 | 227 | } |
234 | 228 | ``` |
235 | 229 |
|
236 | | -## SPS frontend and frontend UI customisation |
| 230 | +## SPS Frontend UI element customisation |
| 231 | +Further customisation of UI elements like overlays or visual elements can also be achieved by utilising the Pixel Streaming Frontend UI and extending its types. For further information on how to utilise the Epic Games Pixel Streaming Frontend UI refer to the [Pixel Streaming Frontend UI documentation](https://github.com/EpicGames/PixelStreamingInfrastructure#readme). |
| 232 | + |
| 233 | +## Building a frontend container |
| 234 | +This may be useful if you need to make modifications to the default SPS frontend and want to deploy it in your SPS installation. |
237 | 235 |
|
238 | | -Refer to [the official Pixel Streaming repository documentation](https://github.com/EpicGamesExt/PixelStreamingInfrastructure#readme) to learn more about further utilising the Epic Games Pixel Streaming frontend and frontend UI. Utilise the supplied SPS frontend library as a template for further customisation, and leverage Pixel Streaming frontend UI types to further customise UI elements, such as overlays and visual elements. |
| 236 | +1. Build the `examples/typescript` frontend using the instructions above. |
| 237 | +2. Navigate to the root of this repository. |
| 238 | +3. `docker build -t yourdockerhubaccount/my-custom-sps-frontend:latest -f dockerfiles/sps-frontend.dockerfile .` |
0 commit comments