Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix FireFox not streaming VPX on SPS #59

Merged
merged 7 commits into from
Jul 24, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 27 additions & 28 deletions docs/frontend_utilisation_guide.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,27 @@
# Utilising the frontend

## Overview

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.

## Epic Games Pixel Streaming frontend and UI frontend NPM packages

### Pixel Streaming frontend

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).

It contains the following functionality:

- WebSocket handling;
- Data channel handling;
- UE message handling;
- Mouse and keyboard interaction handling;
- Video and audio stream handling;
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.

## Epic Games Pixel Streaming Frontend and UI Frontend
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:
- [Pixel Streaming Frontend](https://www.npmjs.com/package/@epicgames-ps/lib-pixelstreamingfrontend-ue5.5)
- [Pixel Streaming Frontend UI](https://www.npmjs.com/package/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.5)

### Pixel Streaming Frontend
The Pixel Streaming Frontend contains all the base functionality:
- WebSocket handling.
- Data channel handling.
- UE message handling.
- Mouse and keyboard interaction handling.
- Video and audio stream handling.
- Logic for: AFK, FreezeFrames, Mic, TURN, SDP.

### Pixel Streaming frontend UI

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).

It contains the following functionality:

- Text, Action, and AFK Overlays;
- CSS styling;
- UI display settings;
- UE stream data.
### Pixel Streaming Frontend UI
The Pixel Streaming Frontend UI contains all the functionality for UI components:
- Text, Action and AFK Overlays.
- CSS styling.
- UI display settings; UE stream data.
lukehb marked this conversation as resolved.
Show resolved Hide resolved

---

Expand Down Expand Up @@ -233,6 +226,12 @@ if(webSocketAddress != ""){
}
```

## SPS frontend and frontend UI customisation
## SPS Frontend UI element customisation
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).

## Building a frontend container
This may be useful if you need to make modifications to the default SPS frontend and want to deploy it in your SPS installation.

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.
1. Build the `examples/typescript` frontend using the instructions above.
2. Navigate to the root of this repository.
3. `docker build -t yourdockerhubaccount/my-custom-sps-frontend:latest -f dockerfiles/sps-frontend.dockerfile .`
Loading
Loading