From 2c47da252f63e626479daed6dd6d19bd11c7d836 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Mon, 27 Mar 2023 13:55:00 +1000 Subject: [PATCH 01/18] removed the old npm guide under the transition doc as this will no longer be correct --- docs/api_transition_guide.md | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/docs/api_transition_guide.md b/docs/api_transition_guide.md index 6a5195fb..d1d3d726 100644 --- a/docs/api_transition_guide.md +++ b/docs/api_transition_guide.md @@ -60,13 +60,4 @@ pixelStreaming.addEventListener("videoInitialized", ()=> { /* Do something */ }) (More details [here](https://github.com/EpicGames/PixelStreamingInfrastructure/pull/110)) ------- - -### NPM Packages -The old [`libspsfrontend`](https://www.npmjs.com/package/@tensorworks/libspsfrontend) package is now deprecated in favour of [`spsfrontend`](https://www.npmjs.com/package/@tensorworks/spsfrontend). - -Add `spsfrontend` to your project like so: - -``` -npm i @tensorworks/spsfrontend -``` \ No newline at end of file +------ \ No newline at end of file From ef819bc786af2093a8b67f34a00f912f984a5638 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Mon, 27 Mar 2023 15:35:57 +1000 Subject: [PATCH 02/18] began the refactor of frontend docs for the npm package --- docs/frontend_utilisation_guide.md | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 1d4529cd..54a39d94 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -24,7 +24,26 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components --- -## Getting Started +## Getting Started Github +### Installing the Scalable Pixel Streaming Frontend through Github +1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) + +2) Run the following command in the `library` directory of the source tree: +```bash +# Install the frontend library's dependencies +npm install +``` +This will install both the Pixel Streaming Frontend and Frontend UI along with other dependencies which the Scalable Pixel Streaming Frontend consumes. + + + + +## Getting Started NPM +### Installing the Scalable Pixel Streaming Frontend through NPM +1) Run the following command in a terminal `npm i @tensorworks/libspsfrontend` + + + ### Installing the Scalable Pixel Streaming Frontend 1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) From 63cb5ca182847601df968489c199d70844840caa Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 30 Mar 2023 15:51:27 +1000 Subject: [PATCH 03/18] added documentation explaning the library and the example and how to use them --- docs/frontend_utilisation_guide.md | 43 +++++++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 54a39d94..9512bb44 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -24,17 +24,52 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components --- -## Getting Started Github -### Installing the Scalable Pixel Streaming Frontend through Github +## Getting Started +### The Library +The Libary is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and includes all of the custom signaling server logic that Scalable Pixel Streaming signaling servers require to work. The Libary can be either obtained through [Github]() or [NPM]() and to work must be paird consumed by some sort of implimentation to run and kick off the Scalable Pixel Streaming connection. + +### The Example +#### Typescript Example +The typescript example is a simple HTML, CSS and TypeScript implementation of what a user may create to utalise and consume the Scalable Pixel Streaming Frontend Library. Its role is to instansiate the Librarys' components and help start the Scalable Pixel Streaming connection to the siginaling server. Please note consuming and using the Library is open to interpretation as well as the requirements of the user and is not limited to the example provided. + +### Building for Development vs Production +Within the Scalable Pixel Streaming Frontend there are several scripts that can be run via npm to build the Library and Example for development or production pourposes. When building for development pourposes this will enable scource maps for debugging when devloping. Vicse versa when building for production this will disable scource maps, disable console and minimize the dist contents. Below are a list of npm commands for both the Library and Example and what each command does: +#### Library commands +Please ensure that all Library commands are ran from the `library` directory and first a user must run `npm install` first to install all dependencies. +- `npm run build-dev`: Build the Library in development mode +- `npm run build-prod`: Build the Library in production mode + +#### Example commands +Please ensure that all example commands are ran from the `examples/typescript` directory. It is allways reccomended that a user installs the Library first as the example requires the Library however contrary to this, any command that includes a `*` next to its description does not require the Library to be installed and built first. + +- `npm run build-dev`: Build the Library in development mode +- `npm run build-prod`: Build the Library in production mode +- `npm run build-all-dev`: `*`Build the Library and the Example in development mode and link the Library to the Example for consumption +- `npm run build-all-prod`: `*`Build the Library and the Example in production mode and link the Library to the Example for consumption +- `npm run serve-dev`: Serve the Example localy using the Library in development mode +- `npm run serve-prod`: Serve the Example localy using the Library in production mode +- `npm run symlink`: Links the Library to the Example for consumption + + +### Installing the Scalable Pixel Streaming Frontend Library 1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) 2) Run the following command in the `library` directory of the source tree: ```bash # Install the frontend library's dependencies -npm install +npm install && npm run build-dev ``` -This will install both the Pixel Streaming Frontend and Frontend UI along with other dependencies which the Scalable Pixel Streaming Frontend consumes. +This will install both the Pixel Streaming Frontend and Frontend UI along with other dependencies which the Scalable Pixel Streaming Frontend library consumes. +### Installing the Scalable Pixel Streaming Frontend Example and Library +1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) + +2) Run the following command in the `examples/typescript` directory of the source tree: +```bash +# Install the frontend library's dependencies +npm run build-all-dev +``` +This will install the Scalable Pixel Streaming Frontend Example and Library. From 76a133a3122636d8e3813ea052063bbb0ccce36a Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Fri, 31 Mar 2023 08:31:07 +1000 Subject: [PATCH 04/18] fixed spelling mistakes and added urls --- docs/frontend_utilisation_guide.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 9512bb44..567916fc 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -26,28 +26,28 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components ## Getting Started ### The Library -The Libary is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and includes all of the custom signaling server logic that Scalable Pixel Streaming signaling servers require to work. The Libary can be either obtained through [Github]() or [NPM]() and to work must be paird consumed by some sort of implimentation to run and kick off the Scalable Pixel Streaming connection. +The Library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The Library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend) and to work must be paired consumed by some sort of implementation to run and kick off the Scalable Pixel Streaming connection. ### The Example #### Typescript Example -The typescript example is a simple HTML, CSS and TypeScript implementation of what a user may create to utalise and consume the Scalable Pixel Streaming Frontend Library. Its role is to instansiate the Librarys' components and help start the Scalable Pixel Streaming connection to the siginaling server. Please note consuming and using the Library is open to interpretation as well as the requirements of the user and is not limited to the example provided. +The typescript example is a simple HTML, CSS and TypeScript implementation of what a user may create to utilise and consume the Scalable Pixel Streaming Frontend Library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. Please note consuming and using the Library is open to interpretation as well as the requirements of the user and is not limited to the example provided. ### Building for Development vs Production -Within the Scalable Pixel Streaming Frontend there are several scripts that can be run via npm to build the Library and Example for development or production pourposes. When building for development pourposes this will enable scource maps for debugging when devloping. Vicse versa when building for production this will disable scource maps, disable console and minimize the dist contents. Below are a list of npm commands for both the Library and Example and what each command does: +Within the Scalable Pixel Streaming Frontend there are several scripts that can be run via npm to build the Library and Example for development or production. When building for development this will enable source maps for debugging when developing. When building for production this will disable source maps, disable console and minimize the dist contents. Below are a list of npm commands for both the Library and Example and what each command does: #### Library commands Please ensure that all Library commands are ran from the `library` directory and first a user must run `npm install` first to install all dependencies. - `npm run build-dev`: Build the Library in development mode - `npm run build-prod`: Build the Library in production mode #### Example commands -Please ensure that all example commands are ran from the `examples/typescript` directory. It is allways reccomended that a user installs the Library first as the example requires the Library however contrary to this, any command that includes a `*` next to its description does not require the Library to be installed and built first. +Please ensure that all example commands are ran from the `examples/typescript` directory. It is always recommended that a user installs the Library first as the example requires the Library however contrary to this, any command that includes a `*` next to its description does not require the Library to be installed and built first. - `npm run build-dev`: Build the Library in development mode - `npm run build-prod`: Build the Library in production mode - `npm run build-all-dev`: `*`Build the Library and the Example in development mode and link the Library to the Example for consumption - `npm run build-all-prod`: `*`Build the Library and the Example in production mode and link the Library to the Example for consumption -- `npm run serve-dev`: Serve the Example localy using the Library in development mode -- `npm run serve-prod`: Serve the Example localy using the Library in production mode +- `npm run serve-dev`: Serve the Example locally using the Library in development mode +- `npm run serve-prod`: Serve the Example locally using the Library in production mode - `npm run symlink`: Links the Library to the Example for consumption From 7a0ae0cbcefce9c37a68ac2c7a46f02419187791 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Fri, 31 Mar 2023 08:45:08 +1000 Subject: [PATCH 05/18] made gramatical changes to explaning the library example and commands --- docs/frontend_utilisation_guide.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 567916fc..36500666 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -26,29 +26,29 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components ## Getting Started ### The Library -The Library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The Library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend) and to work must be paired consumed by some sort of implementation to run and kick off the Scalable Pixel Streaming connection. +The Library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The Library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the Library it must be initialised via HTML and Javascript. The Example below is but one example of initialize the Library. ### The Example #### Typescript Example -The typescript example is a simple HTML, CSS and TypeScript implementation of what a user may create to utilise and consume the Scalable Pixel Streaming Frontend Library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. Please note consuming and using the Library is open to interpretation as well as the requirements of the user and is not limited to the example provided. +The Typescript Example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend Library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. Please note how a user chooses to initialize Library is open to interpretation and the users requirements and is not limited to the Typescript Example. ### Building for Development vs Production -Within the Scalable Pixel Streaming Frontend there are several scripts that can be run via npm to build the Library and Example for development or production. When building for development this will enable source maps for debugging when developing. When building for production this will disable source maps, disable console and minimize the dist contents. Below are a list of npm commands for both the Library and Example and what each command does: +Within the Scalable Pixel Streaming Frontend there are several npm scripts that can be used to build the Library and Example for either development or production use cases. When building for development this will enable source maps for debugging. When building for production this will disable source maps, minimize console output and minimize the dist contents. Below are a list of npm commands for both the Library and Example and what each command does: #### Library commands -Please ensure that all Library commands are ran from the `library` directory and first a user must run `npm install` first to install all dependencies. +Please ensure that all Library commands are executed from the `library` directory and a user must first run `npm install` to install all the Libraries dependencies. - `npm run build-dev`: Build the Library in development mode - `npm run build-prod`: Build the Library in production mode #### Example commands -Please ensure that all example commands are ran from the `examples/typescript` directory. It is always recommended that a user installs the Library first as the example requires the Library however contrary to this, any command that includes a `*` next to its description does not require the Library to be installed and built first. +Please ensure that all example commands are executed from the `examples/typescript` directory. It is always recommended that a user installs the Library first as the example requires the Library. Contrary to this however, `build-all-dev` and `build-all-prod` do not require the Library to be installed and built first and will install and build both the Library and Example and all dependencies. - `npm run build-dev`: Build the Library in development mode - `npm run build-prod`: Build the Library in production mode -- `npm run build-all-dev`: `*`Build the Library and the Example in development mode and link the Library to the Example for consumption -- `npm run build-all-prod`: `*`Build the Library and the Example in production mode and link the Library to the Example for consumption - `npm run serve-dev`: Serve the Example locally using the Library in development mode - `npm run serve-prod`: Serve the Example locally using the Library in production mode - `npm run symlink`: Links the Library to the Example for consumption +- `npm run build-all-dev`: Build the Library and the Example in development mode and link the Library to the Example for consumption +- `npm run build-all-prod`: Build the Library and the Example in production mode and link the Library to the Example for consumption ### Installing the Scalable Pixel Streaming Frontend Library From e2a13d91de54195ddfb23660584008b533c435e4 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Fri, 31 Mar 2023 08:46:25 +1000 Subject: [PATCH 06/18] removed redundant headding --- docs/frontend_utilisation_guide.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 36500666..c06bcd44 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -28,8 +28,7 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components ### The Library The Library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The Library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the Library it must be initialised via HTML and Javascript. The Example below is but one example of initialize the Library. -### The Example -#### Typescript Example +### The Typescript Example The Typescript Example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend Library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. Please note how a user chooses to initialize Library is open to interpretation and the users requirements and is not limited to the Typescript Example. ### Building for Development vs Production From 9dbef2d9228ae860905d25f57b6ac51ab36c3e94 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Fri, 31 Mar 2023 10:09:50 +1000 Subject: [PATCH 07/18] updated the portion for installing via github --- docs/frontend_utilisation_guide.md | 51 ++++++++++++++++++++---------- 1 file changed, 34 insertions(+), 17 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index c06bcd44..67d95dcf 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -24,23 +24,23 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components --- -## Getting Started +## Scalable Pixel Streaming Frontend Pieces ### The Library The Library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The Library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the Library it must be initialised via HTML and Javascript. The Example below is but one example of initialize the Library. ### The Typescript Example The Typescript Example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend Library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. Please note how a user chooses to initialize Library is open to interpretation and the users requirements and is not limited to the Typescript Example. - +## Getting Started; installation and consumption ### Building for Development vs Production -Within the Scalable Pixel Streaming Frontend there are several npm scripts that can be used to build the Library and Example for either development or production use cases. When building for development this will enable source maps for debugging. When building for production this will disable source maps, minimize console output and minimize the dist contents. Below are a list of npm commands for both the Library and Example and what each command does: -#### Library commands -Please ensure that all Library commands are executed from the `library` directory and a user must first run `npm install` to install all the Libraries dependencies. +Within the Scalable Pixel Streaming Frontend there are several npm scripts that can be used to build the Library and Example for either development or production use cases. When building for development this will enable source maps for debugging. When building for production this will disable source maps, minimize console output and minimize the dist contents. Below are a list of npm scripts for both the Library and Example and what each command does: + +#### Library scripts +Please ensure that all Library scripts are executed from the `library` directory and a user must first run `npm install` to install all the Libraries dependencies. - `npm run build-dev`: Build the Library in development mode - `npm run build-prod`: Build the Library in production mode -#### Example commands -Please ensure that all example commands are executed from the `examples/typescript` directory. It is always recommended that a user installs the Library first as the example requires the Library. Contrary to this however, `build-all-dev` and `build-all-prod` do not require the Library to be installed and built first and will install and build both the Library and Example and all dependencies. - +#### Example scripts +Please ensure that all example scripts are executed from the `examples/typescript` directory. It is always recommended that a user installs the Library first as the example requires the Library. Contrary to this however, `build-all-dev` and `build-all-prod` do not require the Library to be installed and built first and will install and build both the Library and Example and all dependencies. - `npm run build-dev`: Build the Library in development mode - `npm run build-prod`: Build the Library in production mode - `npm run serve-dev`: Serve the Example locally using the Library in development mode @@ -49,26 +49,43 @@ Please ensure that all example commands are executed from the `examples/typescri - `npm run build-all-dev`: Build the Library and the Example in development mode and link the Library to the Example for consumption - `npm run build-all-prod`: Build the Library and the Example in production mode and link the Library to the Example for consumption +### Installing the Scalable Pixel Streaming Frontend Library From Github +Please note the following installation will be done with `dev` npm scripts however, it can also be done with `prod` build scripts. -### Installing the Scalable Pixel Streaming Frontend Library 1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) -2) Run the following command in the `library` directory of the source tree: +2) To build the Library run the following commands in the `library` directory of the source tree: ```bash -# Install the frontend library's dependencies -npm install && npm run build-dev +# Install the Frontend Library's dependencies +npm install + +# Build the Frontend Library +npm run build-dev ``` -This will install both the Pixel Streaming Frontend and Frontend UI along with other dependencies which the Scalable Pixel Streaming Frontend library consumes. +These commands and scripts will install and build the Library. -### Installing the Scalable Pixel Streaming Frontend Example and Library +3) Run the following commands in the `examples/typescript` directory of the source tree: +```bash +# Install the Examples's dependencies +npm npm install + +# Symlink the Library to the Example +npm run symlink + +# Build the Example +npm run build-dev +``` +These commands and scripts will install the Example, link the Library to the Example and build the Example. + +#### Installing and building with the build-all script 1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) -2) Run the following command in the `examples/typescript` directory of the source tree: +2) Run the following script in the `examples/typescript` directory of the source tree: ```bash -# Install the frontend library's dependencies +# Install, link and build the Example and Library npm run build-all-dev ``` -This will install the Scalable Pixel Streaming Frontend Example and Library. +This will install, link and build the Scalable Pixel Streaming Frontend Example and Library all in one. From 3b061554e09e4bba3f9562b8e1ebf4c341faf57b Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Fri, 31 Mar 2023 11:30:09 +1000 Subject: [PATCH 08/18] updated the using npm package --- docs/frontend_utilisation_guide.md | 85 +++++++++++++----------------- 1 file changed, 36 insertions(+), 49 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 67d95dcf..d0112f34 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -87,55 +87,28 @@ npm run build-all-dev ``` This will install, link and build the Scalable Pixel Streaming Frontend Example and Library all in one. - - -## Getting Started NPM ### Installing the Scalable Pixel Streaming Frontend through NPM -1) Run the following command in a terminal `npm i @tensorworks/libspsfrontend` - - - -### Installing the Scalable Pixel Streaming Frontend -1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) - -2) Run the following command in the base directory of the source tree: -```bash -# Install the frontend library's dependencies -npm install . -``` -This will install both the Pixel Streaming Frontend and Frontend UI along with other dependencies which the Scalable Pixel Streaming Frontend consumes. - -### Running the Scalable Pixel Streaming Frontend locally -1) To run the Frontend locally after installing simply run the following command from the base directory of the source tree: -```bash -# Build the frontend library -npm run build -``` +If your project includes a `package.json` file run the following command in the same directory +1) Run the following command: `npm i @tensorworks/libspsfrontend` -### Building the Scalable Pixel Streaming Frontend -1) Run the following command in the base directory of the source tree: -```bash -# Install the frontend library's dependencies -npm install . -``` -This will transpile the TypeScript source files to JavaScript and generate the UMD module in the dist subdirectory. +2) Import your desired components form the Library from the following package `"@tensorworks/libspsfrontend"` -### Implementing the Scalable Pixel Streaming Frontend in a custom webpage -The Scalable Pixel Streaming Frontend comes with a base index.ts file which is the entry point. In a custom webpage this file can be left out and a custom entry point can be implemented: +#### Basics to initialising and consuming the Library +The following example for initialising the Library is based on the Typescript Example Provided on Github. -1) Import all the required packages from the Epic Games Pixel Streaming Frontend and Frontend UI libraries -```typescript -import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2'; -import { PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2'; -``` -2) Import SPSApplication from the Scalable Pixel Streaming Frontend Library +1) Import all the required packages from the Scalable Pixel Streaming Frontend Library ```typescript -import { SPSApplication } from "./SPSApplication"; +import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend"; ``` -3) Create `PixelStreamingApplicationStyles` variable so we have access to the Epic Games Pixel Streaming CSS: +2) Apply default styling from Epic Games Pixel Streaming Frontend ```typescript export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle(); +PixelStreamingApplicationStyles.applyStyleSheet(); ``` +3) Declare the `WEBSOCKET_URL` environment variable so the websocket url can be injected via a `.env` file +```typescript +declare var WEBSOCKET_URL: string; +``` 4) Create a `document.body.onload` function to automate the activation and creation of steps 5-8 ```typescript document.body.onload = function () { @@ -146,15 +119,22 @@ document.body.onload = function () { ```typescript const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); ``` -6) Create the `stream` object and pass in the new `config` object +6) Create an if statement that will make use of the `WEBSOCKET_URL` environment variable if one is included ```typescript -const stream = new PixelStreaming(config); +let webSocketAddress = WEBSOCKET_URL; + if(webSocketAddress != ""){ + config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) + } ``` -7) Create the `spsApplication` object and pass in the `stream` object enclosed in curly braces +7) Create `stream` and `spsApplication` instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types ```typescript -const spsApplication = new SPSApplication({ stream }); +const stream = new PixelStreaming(config); +const spsApplication = new SPSApplication({ + stream, + onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */ +}); ``` -8) Place `spsApplication.rootElement` inside a DOM Element of your choice or inject directly into the body of the web page +8) Append the `spsApplication.rootElement` inside a DOM Element of your choice or inject directly into the body of the web page like in the TypeScript Example ```typescript document.body.appendChild(spsApplication.rootElement); //OR @@ -163,15 +143,22 @@ document.getElementById("myElementId").appendChild(spsApplication.rootElement); ### Default Index Implementation ```typescript -import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2'; -import { PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2'; -import { SPSApplication } from "./SPSApplication"; +import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend"; export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle(); +PixelStreamingApplicationStyles.applyStyleSheet(); +declare var WEBSOCKET_URL: string; document.body.onload = function () { const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); + let webSocketAddress = WEBSOCKET_URL; + if(webSocketAddress != ""){ + config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) + } const stream = new PixelStreaming(config); - const spsApplication = new SPSApplication({ stream }); + const spsApplication = new SPSApplication({ + stream, + onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */ + }); document.body.appendChild(spsApplication.rootElement); } ``` From 383ed3b82c9ff73aa5486cd4fe61ac569ee33bbd Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Fri, 31 Mar 2023 12:42:10 +1000 Subject: [PATCH 09/18] added instructions to customising the websocket address --- docs/frontend_utilisation_guide.md | 59 +++++++++++++++++++++--------- 1 file changed, 41 insertions(+), 18 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index d0112f34..58f4b90b 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -94,7 +94,7 @@ If your project includes a `package.json` file run the following command in the 2) Import your desired components form the Library from the following package `"@tensorworks/libspsfrontend"` #### Basics to initialising and consuming the Library -The following example for initialising the Library is based on the Typescript Example Provided on Github. +The following example for initialising the Library is based on the Typescript Example Provided on Github however is more broad. 1) Import all the required packages from the Scalable Pixel Streaming Frontend Library ```typescript @@ -105,9 +105,9 @@ import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingAp export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle(); PixelStreamingApplicationStyles.applyStyleSheet(); ``` -3) Declare the `WEBSOCKET_URL` environment variable so the websocket url can be injected via a `.env` file +3) Create a `webSocketAddress` variable so the websocket url can be modified if a user wishes to inject their own websocket address at load time ```typescript -declare var WEBSOCKET_URL: string; +let webSocketAddress = ""; ``` 4) Create a `document.body.onload` function to automate the activation and creation of steps 5-8 ```typescript @@ -119,12 +119,11 @@ document.body.onload = function () { ```typescript const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); ``` -6) Create an if statement that will make use of the `WEBSOCKET_URL` environment variable if one is included +6) Create an if statement that will make use of the `webSocketAddress` variable if one is included ```typescript -let webSocketAddress = WEBSOCKET_URL; - if(webSocketAddress != ""){ - config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) - } +if(webSocketAddress != ""){ + config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) +} ``` 7) Create `stream` and `spsApplication` instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types ```typescript @@ -146,11 +145,10 @@ document.getElementById("myElementId").appendChild(spsApplication.rootElement); import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend"; export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle(); PixelStreamingApplicationStyles.applyStyleSheet(); -declare var WEBSOCKET_URL: string; +let webSocketAddress = ""; document.body.onload = function () { const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); - let webSocketAddress = WEBSOCKET_URL; if(webSocketAddress != ""){ config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) } @@ -163,17 +161,42 @@ document.body.onload = function () { } ``` -### Connecting to a WebSocket -When serving the Scalable Pixel Streaming Frontend it will build a default WebSocket address to connect to based on the address of the current window of the webpage. If the WebSocket address happens to match what is created by default then no further steps are required however, this is not always the case. In the stage of creating the `config` object for our entry point it is possible to inject a WebSocket address that will override the default that is created: - -1) After completing `Implementing the Scalable Pixel Streaming frontend in a custom webpage` steps 1-8 import the `TextParameters` package from the Pixel Streaming Frontend +### Customising the WebSocket connection +#### Using setTextSetting within Config to inject a custom websocket +When serving the Scalable Pixel Streaming Frontend it will build a default WebSocket address to connect to based on the address of the current window of the webpage. If the WebSocket address happens to match what is created by default then no further steps are required however, this is not always the case. Through the usage of `setTextSetting` method on our `config` instance a user can inject a WebSocket address that will override the default. Steps to achieving this are covered in Basics to initialising and consuming the Library steps 3 and 6. +#### The .env file for the Typescript Example +In the Typescript Example there is a `.env.example` file. inside this file there is a line called `WEBSOCKET_URL` containing a filler url. This file can be used to hard code a websocket address that can be consumed by the example as shown above. This example is able to work with the help of the [dotenv npm package](https://www.npmjs.com/package/dotenv) in the `webpack.common.js` file in the Typescript Example. To implement this example steps: +1) Rename the `.env.example` to `.env` +2) Replace the place holder url with the websocket url you wish to consume +3) Rebuild the example with the `npm run build-dev` or `npm run build-prod` for the changes to take effect + +If you wish to include this functionality in your project you will need to include the following steps: +The Typescript Example makes use of these exact steps and is a good demonstration resource on this topic. +1) Install `dotenv` via npm `npm i dotenv --save-dev` +2) Include `dotenv` in you webpack file and set your `.env` file path using `path:` +```javascript +require('dotenv').config({ path: './.env' }); +``` +3) Include a plugin in your webpack file with the environment variables name. For this example the name will be set to `WEBSOCKET_URL` +```javascript +new webpack.DefinePlugin({ + WEBSOCKET_URL: JSON.stringify((process.env.WEBSOCKET_URL !== undefined) ? process.env.WEBSOCKET_URL : '') +}), +``` +4) Create the `.env` file in the path you set in step 3 with the variable of your choice +```bash +WEBSOCKET_URL=ws://example.com/your/ws +``` +5) Declare your environment variable where you instantiate your Scalable Pixel Streaming Frontend Library ```typescript -import { Config, PixelStreaming, TextParameters } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2'; +declare var WEBSOCKET_URL: string; ``` -2) Beneath the line where the `config` object was created call the `setTextSetting` method and pass in `TextParameters.SignallingServerUrl` and your websocket address as a string +6) Make use of the `setTextSetting` method within the `config` instance to set the `TextParameters.SignallingServerUrl` to a variable that makes use of `WEBSOCKET_URL` ```typescript -const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); -config.setTextSetting(TextParameters.SignallingServerUrl, "wss://your.websocket.url/ws") +let webSocketAddress = WEBSOCKET_URL; +if(webSocketAddress != ""){ + config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) +} ``` --- From 21143e522e06a2d54611de6dafaa699ce3ba4bc4 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Fri, 31 Mar 2023 12:48:16 +1000 Subject: [PATCH 10/18] reworded epic library consumption and customisation paragraphs --- docs/frontend_utilisation_guide.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 58f4b90b..91849d97 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -201,7 +201,7 @@ if(webSocketAddress != ""){ --- ## Scalable Pixel Streaming Frontend customisation -By default the Scalable Pixel Streaming Frontend contains all the requirements to connect to a Scalable Pixel Streaming signalling server making it an effective starting template for further customisation rather than starting from scratch. For further ways to utilise the the Pixel Streaming Frontend refer to the [Pixel Streaming Frontend documentation](https://github.com/EpicGames/PixelStreamingInfrastructure#readme). +By default the Scalable Pixel Streaming Frontend Library contains all the requirements to connect to a Scalable Pixel Streaming signalling server making it an effective starting template for further customisation rather than starting from scratch. It is able to achieve this functionality through its consumption of the Epic Games Pixel Streaming Frontend. To learn more about further utilising the Epic Games Pixel Streaming Frontend documentation can be found [here](https://github.com/EpicGames/PixelStreamingInfrastructure#readme). ### Scalable Pixel Streaming Frontend UI element customisation -Further customisation of UI elements like Overlays or visual elements can 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). \ No newline at end of file +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). \ No newline at end of file From 10ff7e05bce6278cce6dc9d9b79203fa451dd870 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 4 Apr 2023 11:37:07 +1000 Subject: [PATCH 11/18] updated The library paragraph and frontend packages title --- docs/frontend_utilisation_guide.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 91849d97..a084052b 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -24,9 +24,9 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components --- -## Scalable Pixel Streaming Frontend Pieces +## Scalable Pixel Streaming Frontend packages ### The Library -The Library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The Library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the Library it must be initialised via HTML and Javascript. The Example below is but one example of initialize the Library. +The Library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The Library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the Library it must be initialised via HTML and Javascript. The library is written in TypeScript but configured to export as a UMD module and can be consumed by plain JavaScript and most JavaScript frameworks. ### The Typescript Example The Typescript Example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend Library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. Please note how a user chooses to initialize Library is open to interpretation and the users requirements and is not limited to the Typescript Example. From a1ac40e997464ba507195878f2a8b257f42f4d27 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 4 Apr 2023 11:37:54 +1000 Subject: [PATCH 12/18] set library and example to lowercase --- docs/frontend_utilisation_guide.md | 86 +++++++++++++++--------------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index a084052b..bd50d999 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -25,78 +25,78 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components --- ## Scalable Pixel Streaming Frontend packages -### The Library -The Library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The Library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the Library it must be initialised via HTML and Javascript. The library is written in TypeScript but configured to export as a UMD module and can be consumed by plain JavaScript and most JavaScript frameworks. +### The library +The library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the library it must be initialised via HTML and Javascript. The library is written in TypeScript but configured to export as a UMD module and can be consumed by plain JavaScript and most JavaScript frameworks. -### The Typescript Example -The Typescript Example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend Library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. Please note how a user chooses to initialize Library is open to interpretation and the users requirements and is not limited to the Typescript Example. +### The Typescript example +The Typescript example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. Please note how a user chooses to initialize library is open to interpretation and the users requirements and is not limited to the Typescript example. ## Getting Started; installation and consumption ### Building for Development vs Production -Within the Scalable Pixel Streaming Frontend there are several npm scripts that can be used to build the Library and Example for either development or production use cases. When building for development this will enable source maps for debugging. When building for production this will disable source maps, minimize console output and minimize the dist contents. Below are a list of npm scripts for both the Library and Example and what each command does: - -#### Library scripts -Please ensure that all Library scripts are executed from the `library` directory and a user must first run `npm install` to install all the Libraries dependencies. -- `npm run build-dev`: Build the Library in development mode -- `npm run build-prod`: Build the Library in production mode - -#### Example scripts -Please ensure that all example scripts are executed from the `examples/typescript` directory. It is always recommended that a user installs the Library first as the example requires the Library. Contrary to this however, `build-all-dev` and `build-all-prod` do not require the Library to be installed and built first and will install and build both the Library and Example and all dependencies. -- `npm run build-dev`: Build the Library in development mode -- `npm run build-prod`: Build the Library in production mode -- `npm run serve-dev`: Serve the Example locally using the Library in development mode -- `npm run serve-prod`: Serve the Example locally using the Library in production mode -- `npm run symlink`: Links the Library to the Example for consumption -- `npm run build-all-dev`: Build the Library and the Example in development mode and link the Library to the Example for consumption -- `npm run build-all-prod`: Build the Library and the Example in production mode and link the Library to the Example for consumption - -### Installing the Scalable Pixel Streaming Frontend Library From Github +Within the Scalable Pixel Streaming Frontend there are several npm scripts that can be used to build the library and example for either development or production use cases. When building for development this will enable source maps for debugging. When building for production this will disable source maps, minimize console output and minimize the dist contents. Below are a list of npm scripts for both the library and example and what each command does: + +#### library scripts +Please ensure that all library scripts are executed from the `library` directory and a user must first run `npm install` to install all the Libraries dependencies. +- `npm run build-dev`: Build the library in development mode +- `npm run build-prod`: Build the library in production mode + +#### example scripts +Please ensure that all example scripts are executed from the `examples/typescript` directory. It is always recommended that a user installs the library first as the example requires the library. Contrary to this however, `build-all-dev` and `build-all-prod` do not require the library to be installed and built first and will install and build both the library and example and all dependencies. +- `npm run build-dev`: Build the library in development mode +- `npm run build-prod`: Build the library in production mode +- `npm run serve-dev`: Serve the example locally using the library in development mode +- `npm run serve-prod`: Serve the example locally using the library in production mode +- `npm run symlink`: Links the library to the example for consumption +- `npm run build-all-dev`: Build the library and the example in development mode and link the library to the example for consumption +- `npm run build-all-prod`: Build the library and the example in production mode and link the library to the example for consumption + +### Installing the Scalable Pixel Streaming Frontend library From Github Please note the following installation will be done with `dev` npm scripts however, it can also be done with `prod` build scripts. 1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) -2) To build the Library run the following commands in the `library` directory of the source tree: +2) To build the library run the following commands in the `library` directory of the source tree: ```bash -# Install the Frontend Library's dependencies +# Install the Frontend library's dependencies npm install -# Build the Frontend Library +# Build the Frontend library npm run build-dev ``` -These commands and scripts will install and build the Library. +These commands and scripts will install and build the library. 3) Run the following commands in the `examples/typescript` directory of the source tree: ```bash -# Install the Examples's dependencies +# Install the examples's dependencies npm npm install -# Symlink the Library to the Example +# Symlink the library to the example npm run symlink -# Build the Example +# Build the example npm run build-dev ``` -These commands and scripts will install the Example, link the Library to the Example and build the Example. +These commands and scripts will install the example, link the library to the example and build the example. #### Installing and building with the build-all script 1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) 2) Run the following script in the `examples/typescript` directory of the source tree: ```bash -# Install, link and build the Example and Library +# Install, link and build the example and library npm run build-all-dev ``` -This will install, link and build the Scalable Pixel Streaming Frontend Example and Library all in one. +This will install, link and build the Scalable Pixel Streaming Frontend example and library all in one. ### Installing the Scalable Pixel Streaming Frontend through NPM If your project includes a `package.json` file run the following command in the same directory 1) Run the following command: `npm i @tensorworks/libspsfrontend` -2) Import your desired components form the Library from the following package `"@tensorworks/libspsfrontend"` +2) Import your desired components form the library from the following package `"@tensorworks/libspsfrontend"` -#### Basics to initialising and consuming the Library -The following example for initialising the Library is based on the Typescript Example Provided on Github however is more broad. +#### Basics to initialising and consuming the library +The following example for initialising the library is based on the Typescript example Provided on Github however is more broad. -1) Import all the required packages from the Scalable Pixel Streaming Frontend Library +1) Import all the required packages from the Scalable Pixel Streaming Frontend library ```typescript import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend"; ``` @@ -133,7 +133,7 @@ const spsApplication = new SPSApplication({ onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */ }); ``` -8) Append the `spsApplication.rootElement` inside a DOM Element of your choice or inject directly into the body of the web page like in the TypeScript Example +8) Append the `spsApplication.rootElement` inside a DOM Element of your choice or inject directly into the body of the web page like in the TypeScript example ```typescript document.body.appendChild(spsApplication.rootElement); //OR @@ -163,15 +163,15 @@ document.body.onload = function () { ### Customising the WebSocket connection #### Using setTextSetting within Config to inject a custom websocket -When serving the Scalable Pixel Streaming Frontend it will build a default WebSocket address to connect to based on the address of the current window of the webpage. If the WebSocket address happens to match what is created by default then no further steps are required however, this is not always the case. Through the usage of `setTextSetting` method on our `config` instance a user can inject a WebSocket address that will override the default. Steps to achieving this are covered in Basics to initialising and consuming the Library steps 3 and 6. -#### The .env file for the Typescript Example -In the Typescript Example there is a `.env.example` file. inside this file there is a line called `WEBSOCKET_URL` containing a filler url. This file can be used to hard code a websocket address that can be consumed by the example as shown above. This example is able to work with the help of the [dotenv npm package](https://www.npmjs.com/package/dotenv) in the `webpack.common.js` file in the Typescript Example. To implement this example steps: +When serving the Scalable Pixel Streaming Frontend it will build a default WebSocket address to connect to based on the address of the current window of the webpage. If the WebSocket address happens to match what is created by default then no further steps are required however, this is not always the case. Through the usage of `setTextSetting` method on our `config` instance a user can inject a WebSocket address that will override the default. Steps to achieving this are covered in Basics to initialising and consuming the library steps 3 and 6. +#### The .env file for the Typescript example +In the Typescript example there is a `.env.example` file. inside this file there is a line called `WEBSOCKET_URL` containing a filler url. This file can be used to hard code a websocket address that can be consumed by the example as shown above. This example is able to work with the help of the [dotenv npm package](https://www.npmjs.com/package/dotenv) in the `webpack.common.js` file in the Typescript example. To implement this example steps: 1) Rename the `.env.example` to `.env` 2) Replace the place holder url with the websocket url you wish to consume 3) Rebuild the example with the `npm run build-dev` or `npm run build-prod` for the changes to take effect If you wish to include this functionality in your project you will need to include the following steps: -The Typescript Example makes use of these exact steps and is a good demonstration resource on this topic. +The Typescript example makes use of these exact steps and is a good demonstration resource on this topic. 1) Install `dotenv` via npm `npm i dotenv --save-dev` 2) Include `dotenv` in you webpack file and set your `.env` file path using `path:` ```javascript @@ -187,7 +187,7 @@ new webpack.DefinePlugin({ ```bash WEBSOCKET_URL=ws://example.com/your/ws ``` -5) Declare your environment variable where you instantiate your Scalable Pixel Streaming Frontend Library +5) Declare your environment variable where you instantiate your Scalable Pixel Streaming Frontend library ```typescript declare var WEBSOCKET_URL: string; ``` @@ -201,7 +201,7 @@ if(webSocketAddress != ""){ --- ## Scalable Pixel Streaming Frontend customisation -By default the Scalable Pixel Streaming Frontend Library contains all the requirements to connect to a Scalable Pixel Streaming signalling server making it an effective starting template for further customisation rather than starting from scratch. It is able to achieve this functionality through its consumption of the Epic Games Pixel Streaming Frontend. To learn more about further utilising the Epic Games Pixel Streaming Frontend documentation can be found [here](https://github.com/EpicGames/PixelStreamingInfrastructure#readme). +By default the Scalable Pixel Streaming Frontend library contains all the requirements to connect to a Scalable Pixel Streaming signalling server making it an effective starting template for further customisation rather than starting from scratch. It is able to achieve this functionality through its consumption of the Epic Games Pixel Streaming Frontend. To learn more about further utilising the Epic Games Pixel Streaming Frontend documentation can be found [here](https://github.com/EpicGames/PixelStreamingInfrastructure#readme). ### Scalable Pixel Streaming 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). \ No newline at end of file From 5d619d6a05dd5c046f3a85d110099bde8723fd61 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 4 Apr 2023 11:41:22 +1000 Subject: [PATCH 13/18] droped redundant sentence --- docs/frontend_utilisation_guide.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index bd50d999..51fe3ed2 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -29,7 +29,8 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components The library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the library it must be initialised via HTML and Javascript. The library is written in TypeScript but configured to export as a UMD module and can be consumed by plain JavaScript and most JavaScript frameworks. ### The Typescript example -The Typescript example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. Please note how a user chooses to initialize library is open to interpretation and the users requirements and is not limited to the Typescript example. +The Typescript example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. + ## Getting Started; installation and consumption ### Building for Development vs Production Within the Scalable Pixel Streaming Frontend there are several npm scripts that can be used to build the library and example for either development or production use cases. When building for development this will enable source maps for debugging. When building for production this will disable source maps, minimize console output and minimize the dist contents. Below are a list of npm scripts for both the library and example and what each command does: From bb347ef46c9ddfde8aa1719ffede43fdaf998764 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 4 Apr 2023 11:44:47 +1000 Subject: [PATCH 14/18] updated package titles and corrected typescript with cammlecase --- docs/frontend_utilisation_guide.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 51fe3ed2..3b80c1d2 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -25,10 +25,10 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components --- ## Scalable Pixel Streaming Frontend packages -### The library +### The Scalable Pixel Streaming Frontend library The library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the library it must be initialised via HTML and Javascript. The library is written in TypeScript but configured to export as a UMD module and can be consumed by plain JavaScript and most JavaScript frameworks. -### The Typescript example +### The Scalable Pixel Streaming Frontend Typescript example The Typescript example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. ## Getting Started; installation and consumption From b015fe9e45be6e7fe7028ce4bbd3d972cade4fdf Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 4 Apr 2023 11:49:25 +1000 Subject: [PATCH 15/18] removed capitilastion of from and corrected grammar for npm commands paragraph --- docs/frontend_utilisation_guide.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 3b80c1d2..77fa837a 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -28,12 +28,12 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components ### The Scalable Pixel Streaming Frontend library The library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the library it must be initialised via HTML and Javascript. The library is written in TypeScript but configured to export as a UMD module and can be consumed by plain JavaScript and most JavaScript frameworks. -### The Scalable Pixel Streaming Frontend Typescript example -The Typescript example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. +### The Scalable Pixel Streaming Frontend TypesScript example +The TypeScript example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. ## Getting Started; installation and consumption ### Building for Development vs Production -Within the Scalable Pixel Streaming Frontend there are several npm scripts that can be used to build the library and example for either development or production use cases. When building for development this will enable source maps for debugging. When building for production this will disable source maps, minimize console output and minimize the dist contents. Below are a list of npm scripts for both the library and example and what each command does: +The Scalable Pixel Streaming Frontend packages contain several npm scripts that can be used to build the library and example for either development or production. When building for development this will enable source maps for debugging. When building for production this will disable source maps, reduce console output and minify the distributed JavaScript files. Below are a list of npm scripts for both the library and example and what each command does: #### library scripts Please ensure that all library scripts are executed from the `library` directory and a user must first run `npm install` to install all the Libraries dependencies. @@ -50,7 +50,7 @@ Please ensure that all example scripts are executed from the `examples/typescrip - `npm run build-all-dev`: Build the library and the example in development mode and link the library to the example for consumption - `npm run build-all-prod`: Build the library and the example in production mode and link the library to the example for consumption -### Installing the Scalable Pixel Streaming Frontend library From Github +### Installing the Scalable Pixel Streaming Frontend library from Github Please note the following installation will be done with `dev` npm scripts however, it can also be done with `prod` build scripts. 1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) @@ -95,7 +95,7 @@ If your project includes a `package.json` file run the following command in the 2) Import your desired components form the library from the following package `"@tensorworks/libspsfrontend"` #### Basics to initialising and consuming the library -The following example for initialising the library is based on the Typescript example Provided on Github however is more broad. +The following example for initialising the library is based on the TypeScript example Provided on Github however is more broad. 1) Import all the required packages from the Scalable Pixel Streaming Frontend library ```typescript @@ -165,14 +165,14 @@ document.body.onload = function () { ### Customising the WebSocket connection #### Using setTextSetting within Config to inject a custom websocket When serving the Scalable Pixel Streaming Frontend it will build a default WebSocket address to connect to based on the address of the current window of the webpage. If the WebSocket address happens to match what is created by default then no further steps are required however, this is not always the case. Through the usage of `setTextSetting` method on our `config` instance a user can inject a WebSocket address that will override the default. Steps to achieving this are covered in Basics to initialising and consuming the library steps 3 and 6. -#### The .env file for the Typescript example -In the Typescript example there is a `.env.example` file. inside this file there is a line called `WEBSOCKET_URL` containing a filler url. This file can be used to hard code a websocket address that can be consumed by the example as shown above. This example is able to work with the help of the [dotenv npm package](https://www.npmjs.com/package/dotenv) in the `webpack.common.js` file in the Typescript example. To implement this example steps: +#### The .env file for the TypeScript example +In the TypeScript example there is a `.env.example` file. inside this file there is a line called `WEBSOCKET_URL` containing a filler url. This file can be used to hard code a websocket address that can be consumed by the example as shown above. This example is able to work with the help of the [dotenv npm package](https://www.npmjs.com/package/dotenv) in the `webpack.common.js` file in the Typescript example. To implement this example steps: 1) Rename the `.env.example` to `.env` 2) Replace the place holder url with the websocket url you wish to consume 3) Rebuild the example with the `npm run build-dev` or `npm run build-prod` for the changes to take effect If you wish to include this functionality in your project you will need to include the following steps: -The Typescript example makes use of these exact steps and is a good demonstration resource on this topic. +The TypeScript example makes use of these exact steps and is a good demonstration resource on this topic. 1) Install `dotenv` via npm `npm i dotenv --save-dev` 2) Include `dotenv` in you webpack file and set your `.env` file path using `path:` ```javascript From 4820831c542f48909f428f142606b7c814b6ede6 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 13 Apr 2023 09:18:42 +1000 Subject: [PATCH 16/18] added small speling and gramatical changes to the fronted docs --- docs/frontend_utilisation_guide.md | 48 +++++++++++++++--------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 77fa837a..f6d9c440 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -1,15 +1,15 @@ # Utilising the Frontend ## Overview -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 Fronted can be configured to work with Scalable Pixel Streaming signalling severs. +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 Fronted can be configured to work with Scalable Pixel Streaming signalling severs. -## Epic Games Pixel Streaming libraries +## 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.2) - [Pixel Streaming Frontend UI](https://www.npmjs.com/package/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2) ### Pixel Streaming Frontend The Pixel Streaming Frontend contains all the base functionality: -- Websocket handling +- WebSocket handling - Data channel handling - UE message handling - Mouse and keyboard interaction handling @@ -25,15 +25,15 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components --- ## Scalable Pixel Streaming Frontend packages -### The Scalable Pixel Streaming Frontend library -The library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The library can be either obtained through [Github](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the library it must be initialised via HTML and Javascript. The library is written in TypeScript but configured to export as a UMD module and can be consumed by plain JavaScript and most JavaScript frameworks. +### The Scalable Pixel Streaming Frontend Library +The library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The library can be either obtained through [GitHub](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the library it must be initialised via HTML and Javascript. The library is written in TypeScript but configured to export as a UMD module and can be consumed by plain JavaScript and most JavaScript frameworks. -### The Scalable Pixel Streaming Frontend TypesScript example -The TypeScript example is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. +### The Scalable Pixel Streaming Frontend TypeScript example +The [TypeScript example]() is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend Library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. ## Getting Started; installation and consumption ### Building for Development vs Production -The Scalable Pixel Streaming Frontend packages contain several npm scripts that can be used to build the library and example for either development or production. When building for development this will enable source maps for debugging. When building for production this will disable source maps, reduce console output and minify the distributed JavaScript files. Below are a list of npm scripts for both the library and example and what each command does: +The Scalable Pixel Streaming Frontend packages contain several NPM scripts that can be used to build the library and example for either development or production. When building for development this will enable source maps for debugging. When building for production this will disable source maps, reduce console output and minify the distributed JavaScript files. Below are a list of npm scripts for both the library and example and what each command does: #### library scripts Please ensure that all library scripts are executed from the `library` directory and a user must first run `npm install` to install all the Libraries dependencies. @@ -50,8 +50,8 @@ Please ensure that all example scripts are executed from the `examples/typescrip - `npm run build-all-dev`: Build the library and the example in development mode and link the library to the example for consumption - `npm run build-all-prod`: Build the library and the example in production mode and link the library to the example for consumption -### Installing the Scalable Pixel Streaming Frontend library from Github -Please note the following installation will be done with `dev` npm scripts however, it can also be done with `prod` build scripts. +### Installing the Scalable Pixel Streaming Frontend Library from GitHub +Please note the following installation will be done with `dev` NPM scripts however, it can also be done with `prod` build scripts. 1) Download the [Scalable Pixel Streaming Frontend source code from GitHub](https://github.com/ScalablePixelStreaming/Frontend) @@ -67,7 +67,7 @@ These commands and scripts will install and build the library. 3) Run the following commands in the `examples/typescript` directory of the source tree: ```bash -# Install the examples's dependencies +# Install the examples' dependencies npm npm install # Symlink the library to the example @@ -86,7 +86,7 @@ These commands and scripts will install the example, link the library to the exa # Install, link and build the example and library npm run build-all-dev ``` -This will install, link and build the Scalable Pixel Streaming Frontend example and library all in one. +This will install, link and build the Scalable Pixel Streaming Frontend example and library all-in-one. ### Installing the Scalable Pixel Streaming Frontend through NPM If your project includes a `package.json` file run the following command in the same directory @@ -95,9 +95,9 @@ If your project includes a `package.json` file run the following command in the 2) Import your desired components form the library from the following package `"@tensorworks/libspsfrontend"` #### Basics to initialising and consuming the library -The following example for initialising the library is based on the TypeScript example Provided on Github however is more broad. +The following example for initialising the library is based on the TypeScript example Provided on GitHub. -1) Import all the required packages from the Scalable Pixel Streaming Frontend library +1) Import all the required packages from the Scalable Pixel Streaming Frontend Library ```typescript import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend"; ``` @@ -106,7 +106,7 @@ import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingAp export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle(); PixelStreamingApplicationStyles.applyStyleSheet(); ``` -3) Create a `webSocketAddress` variable so the websocket url can be modified if a user wishes to inject their own websocket address at load time +3) Create a `webSocketAddress` variable so the WebSocket URL can be modified if a user wishes to inject their own WebSocket address at load time ```typescript let webSocketAddress = ""; ``` @@ -163,22 +163,22 @@ document.body.onload = function () { ``` ### Customising the WebSocket connection -#### Using setTextSetting within Config to inject a custom websocket +#### Using setTextSetting within Config to inject a custom WebSocket When serving the Scalable Pixel Streaming Frontend it will build a default WebSocket address to connect to based on the address of the current window of the webpage. If the WebSocket address happens to match what is created by default then no further steps are required however, this is not always the case. Through the usage of `setTextSetting` method on our `config` instance a user can inject a WebSocket address that will override the default. Steps to achieving this are covered in Basics to initialising and consuming the library steps 3 and 6. #### The .env file for the TypeScript example -In the TypeScript example there is a `.env.example` file. inside this file there is a line called `WEBSOCKET_URL` containing a filler url. This file can be used to hard code a websocket address that can be consumed by the example as shown above. This example is able to work with the help of the [dotenv npm package](https://www.npmjs.com/package/dotenv) in the `webpack.common.js` file in the Typescript example. To implement this example steps: +In the TypeScript example there is a `.env.example` file. inside this file there is a line called `WEBSOCKET_URL` containing a filler url. This file can be used to hard code a WebSocket address that can be consumed by the example as shown above. This example is able to work with the help of the [dotenv NPM package](https://www.npmjs.com/package/dotenv) in the `webpack.common.js` file in the Typescript example. To implement this example follow these steps: 1) Rename the `.env.example` to `.env` -2) Replace the place holder url with the websocket url you wish to consume +2) Replace the place holder url with the WebSocket URL you wish to consume 3) Rebuild the example with the `npm run build-dev` or `npm run build-prod` for the changes to take effect If you wish to include this functionality in your project you will need to include the following steps: The TypeScript example makes use of these exact steps and is a good demonstration resource on this topic. -1) Install `dotenv` via npm `npm i dotenv --save-dev` -2) Include `dotenv` in you webpack file and set your `.env` file path using `path:` +1) Install `dotenv` via NPM `npm i dotenv --save-dev` +2) Include `dotenv` in your webpack file and set your `.env` file path using `path:` ```javascript require('dotenv').config({ path: './.env' }); ``` -3) Include a plugin in your webpack file with the environment variables name. For this example the name will be set to `WEBSOCKET_URL` +3) Include a plugin in your webpack file with the environment variables' name. For this example the name will be set to `WEBSOCKET_URL` ```javascript new webpack.DefinePlugin({ WEBSOCKET_URL: JSON.stringify((process.env.WEBSOCKET_URL !== undefined) ? process.env.WEBSOCKET_URL : '') @@ -188,7 +188,7 @@ new webpack.DefinePlugin({ ```bash WEBSOCKET_URL=ws://example.com/your/ws ``` -5) Declare your environment variable where you instantiate your Scalable Pixel Streaming Frontend library +5) Declare your environment variable where you instantiate your Scalable Pixel Streaming Frontend Library ```typescript declare var WEBSOCKET_URL: string; ``` @@ -202,7 +202,7 @@ if(webSocketAddress != ""){ --- ## Scalable Pixel Streaming Frontend customisation -By default the Scalable Pixel Streaming Frontend library contains all the requirements to connect to a Scalable Pixel Streaming signalling server making it an effective starting template for further customisation rather than starting from scratch. It is able to achieve this functionality through its consumption of the Epic Games Pixel Streaming Frontend. To learn more about further utilising the Epic Games Pixel Streaming Frontend documentation can be found [here](https://github.com/EpicGames/PixelStreamingInfrastructure#readme). +By default the Scalable Pixel Streaming Frontend Library contains all the requirements to connect to a Scalable Pixel Streaming signalling server making it an effective starting template for further customisation rather than starting from scratch. It is able to achieve this functionality through its consumption of the Epic Games Pixel Streaming Frontend. To learn more about further utilising the Epic Games Pixel Streaming Frontend documentation can be found [here](https://github.com/EpicGames/PixelStreamingInfrastructure#readme). ### Scalable Pixel Streaming 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). \ No newline at end of file +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). \ No newline at end of file From 52bd7bae3ee7504b2807ebd00209bd2ab64e3233 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 13 Apr 2023 09:38:55 +1000 Subject: [PATCH 17/18] added larger gramatical changes and explanations to frontend docs --- docs/frontend_utilisation_guide.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index f6d9c440..21dbfe9c 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -29,7 +29,7 @@ The Pixel Streaming Frontend UI contains all the functionality for UI components The library is the part of the Scalable Pixel Streaming Frontend that consumes the Epic Games Pixel Streaming Frontend and UI Frontend. It includes all of the custom signalling server logic that Scalable Pixel Streaming signalling servers require to work. The library can be either obtained through [GitHub](https://github.com/ScalablePixelStreaming/Frontend) or [NPM](https://www.npmjs.com/package/@tensorworks/libspsfrontend). To make use of the library it must be initialised via HTML and Javascript. The library is written in TypeScript but configured to export as a UMD module and can be consumed by plain JavaScript and most JavaScript frameworks. ### The Scalable Pixel Streaming Frontend TypeScript example -The [TypeScript example]() is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend Library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. +The [TypeScript example](https://github.com/ScalablePixelStreaming/Frontend/tree/main/examples/typescript) is a simple HTML, CSS and TypeScript implementation of what a user could create to initialize the Scalable Pixel Streaming Frontend Library. Its role is to instantiate the library's components and help start the Scalable Pixel Streaming connection to the signalling server. ## Getting Started; installation and consumption ### Building for Development vs Production @@ -41,7 +41,7 @@ Please ensure that all library scripts are executed from the `library` directory - `npm run build-prod`: Build the library in production mode #### example scripts -Please ensure that all example scripts are executed from the `examples/typescript` directory. It is always recommended that a user installs the library first as the example requires the library. Contrary to this however, `build-all-dev` and `build-all-prod` do not require the library to be installed and built first and will install and build both the library and example and all dependencies. +Please ensure that all example scripts are executed from the `examples/typescript` directory. In general, it is recommended that a user installs the library first as the example requires the library. On the contrary, `build-all-dev` and `build-all-prod` do not require the library to be installed and built first, as these scripts will install and build the library, example and all dependencies. - `npm run build-dev`: Build the library in development mode - `npm run build-prod`: Build the library in production mode - `npm run serve-dev`: Serve the example locally using the library in development mode @@ -92,12 +92,12 @@ This will install, link and build the Scalable Pixel Streaming Frontend example If your project includes a `package.json` file run the following command in the same directory 1) Run the following command: `npm i @tensorworks/libspsfrontend` -2) Import your desired components form the library from the following package `"@tensorworks/libspsfrontend"` +2) Import your desired components from the library package `"@tensorworks/libspsfrontend"` #### Basics to initialising and consuming the library The following example for initialising the library is based on the TypeScript example Provided on GitHub. -1) Import all the required packages from the Scalable Pixel Streaming Frontend Library +1) Import all the required objects, types and packages from the Scalable Pixel Streaming Frontend Library ```typescript import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend"; ``` @@ -126,7 +126,7 @@ if(webSocketAddress != ""){ config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) } ``` -7) Create `stream` and `spsApplication` instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types +7) Create an instance of the `PixelStreaming` object called `stream` and an instance of the `SPSApplication` object called `spsApplication`. ```typescript const stream = new PixelStreaming(config); const spsApplication = new SPSApplication({ @@ -164,7 +164,7 @@ document.body.onload = function () { ### Customising the WebSocket connection #### Using setTextSetting within Config to inject a custom WebSocket -When serving the Scalable Pixel Streaming Frontend it will build a default WebSocket address to connect to based on the address of the current window of the webpage. If the WebSocket address happens to match what is created by default then no further steps are required however, this is not always the case. Through the usage of `setTextSetting` method on our `config` instance a user can inject a WebSocket address that will override the default. Steps to achieving this are covered in Basics to initialising and consuming the library steps 3 and 6. +When serving the Scalable Pixel Streaming Frontend it will build a default WebSocket address to connect to based on the address of the current window of the webpage. If the WebSocket address matches what is created by default then no further steps are required. Users can override the default by using the `setTextSetting` method on our `config` instance. See the section: Basics to initialising and consuming the library (link) steps 3 and 6. #### The .env file for the TypeScript example In the TypeScript example there is a `.env.example` file. inside this file there is a line called `WEBSOCKET_URL` containing a filler url. This file can be used to hard code a WebSocket address that can be consumed by the example as shown above. This example is able to work with the help of the [dotenv NPM package](https://www.npmjs.com/package/dotenv) in the `webpack.common.js` file in the Typescript example. To implement this example follow these steps: 1) Rename the `.env.example` to `.env` From 2b0b3dd0bba4e3fb340e31d078b790f45db9ae49 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 13 Apr 2023 10:03:28 +1000 Subject: [PATCH 18/18] added more spelling and minor grammatical changes --- docs/frontend_utilisation_guide.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/frontend_utilisation_guide.md b/docs/frontend_utilisation_guide.md index 21dbfe9c..769bd011 100644 --- a/docs/frontend_utilisation_guide.md +++ b/docs/frontend_utilisation_guide.md @@ -1,6 +1,6 @@ # Utilising the Frontend ## Overview -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 Fronted can be configured to work with Scalable Pixel Streaming signalling severs. +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: @@ -166,9 +166,9 @@ document.body.onload = function () { #### Using setTextSetting within Config to inject a custom WebSocket When serving the Scalable Pixel Streaming Frontend it will build a default WebSocket address to connect to based on the address of the current window of the webpage. If the WebSocket address matches what is created by default then no further steps are required. Users can override the default by using the `setTextSetting` method on our `config` instance. See the section: Basics to initialising and consuming the library (link) steps 3 and 6. #### The .env file for the TypeScript example -In the TypeScript example there is a `.env.example` file. inside this file there is a line called `WEBSOCKET_URL` containing a filler url. This file can be used to hard code a WebSocket address that can be consumed by the example as shown above. This example is able to work with the help of the [dotenv NPM package](https://www.npmjs.com/package/dotenv) in the `webpack.common.js` file in the Typescript example. To implement this example follow these steps: +In the TypeScript example there is a `.env.example` file. inside this file there is a line called `WEBSOCKET_URL` containing a filler URL. This file can be used to hard code a WebSocket address that can be consumed by the example as shown above. This example is able to work with the help of the [dotenv NPM package](https://www.npmjs.com/package/dotenv) in the `webpack.common.js` file in the TypeScript example. To implement this example follow these steps: 1) Rename the `.env.example` to `.env` -2) Replace the place holder url with the WebSocket URL you wish to consume +2) Replace the place holder URL with the WebSocket URL you wish to consume 3) Rebuild the example with the `npm run build-dev` or `npm run build-prod` for the changes to take effect If you wish to include this functionality in your project you will need to include the following steps: