The frontend refers to the HTML, CSS, images, and JavaScript/TypeScript code that runs in web browsers and allows them to connect to 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 these packages:
- lib-pixelstreamingfrontend: the core Pixel Streaming frontend for WebRTC, settings, input, and general functionality.
- lib-pixelstreamingfrontend-ui: the UI library that users can either optionally apply on top of the core library or build on top of.
- reference-pixelstreamingfrontend: the reference implementation of the Pixel Streaming frontend (the one that ships with the plugin).
These libraries are published as NPM packages and support usage as ES6 modules, CommonJS, include type definitions and source maps.
The TypeScript libraries are provided as both an NPM package containing ES6 modules and a CommonJS, 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/typescript, which is an implementation of the frontend libraries and contains a working example of how you can bundle/minify your final application JavaScript.
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.
- Install NodeJS version specified above.
- Ensure
npmis available in your terminal.
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, refer to the build instructions in /Frontend/library/
The user interface library is provided in /ui-library directory. You can either use it or provide your own user interface.
To build run refer to the build instructions in Frontend/ui-library/.
The default Pixel Streaming web player is provided under /implementations/typescript.
To build run refer to the build instructions in /implementations/typescript/.
This will produce player.html and player.js under the SignallingWebServer/Public directory - these are the default Pixel Streaming web frontend.
We recommend studying /ui-library and player.ts/player.html, or alternatively the sample React implementation in implementations/react.
Many of the libraries, such as /frontend/library/, contain unit tests that test the Pixel Streaming functionality against a mocked connection. To run the tests manually study the package.json in the root of the library.
Copyright Epic Games. Licensed under the MIT License, see the file LICENSE for details.