The frontend refers to the HTML, CSS, images, and JavaScript/TypeScript code that runs in web browsers and allows them to connect to Unreal Engine Pixel Streaming applications and interact with them. The frontend library is the foundation that developers can modify and extend to suit the needs of their Pixel Streaming experience.
The frontend consists of two packages:
- lib-pixelstreamingfrontend: the core Pixel Streaming frontend for WebRTC, settings, input, and general functionality.
- lib-pixelstreamingfrontend-ui: the reference UI that users can either optionally apply on top of the core library or build on top of.
- The Settings Panel
- Customizing the Player Webpage
- HTML Page Requirements
- Customizing Player Input Options
- Customizing the Player Widget Style
- Accessing the Pixel Streaming Blueprint API
- Communicating from the Player Page to UE5
- Communicating from UE5 to the Player Page
- Timing Out Inactive Connections
The TypeScript libraries are provided as both an NPM package and a UMD module (available via unpkg), making it easy to consume the libraries from either TypeScript code or plain JavaScript code using modern web development tools and workflows.
When developing your own Pixel Streaming experience the intent is you will start with this library and extend it through the use of its public API. We have provided an example of this workflow in our implementations/EpicGames, which is an implementation of this library.
If part of the library is not exposed and you wish to extend it, please do so in your own branch and open a pull request with your change for our consideration.
Changes to the library occur in the /library directory and require you to have NodeJS installed as part of your development environment. Once you have NodeJS installed:
cd librarynpm installnpm run build
The default user interface is provided in /ui-library directory. You can either use it or provide your own user interface. To build the default UI, run:
cd ui-librarynpm installnpm run build
This will produce player.js under the SignallingWebServer/Public directory - this is the default UI.
We recommend studying /ui-library and player.ts/player.html, or alternatively the sample React implementation in implementations/react, then once you have copied and modified the package.json and .ts into your own implementation/your_implementation directory, the process is similar:
cd implementation/your_implementationnpm build-all
The /library project has unit tests that test the Pixel Streaming functionality against a mocked connection. To run the tests manually, run:
cd librarynpm installnpm run test
Copyright © 2023, Epic Games. Licensed under the MIT License, see the file LICENSE for details.