diff --git a/Common/README.md b/Common/README.md index 05c530b0..c27195c0 100644 --- a/Common/README.md +++ b/Common/README.md @@ -7,5 +7,15 @@ For examples of how to implement this library. - See [lib-pixelstreamingsignalling](/Signalling) - Also see [Wilbur](/SignallingWebServer) which uses the signalling library to implement a full signalling server. +### Adding it to your project +`npm i @epicgames-ps/lib-pixelstreamingcommon-ue5.5` + ## Documentation The API is documented [here](docs). + +### How this library is built +The NPM packages supports: +- ES6 module usage +- CommonJS usage +- Type definitions +- Source maps diff --git a/Frontend/README.md b/Frontend/README.md index 235c230d..231a4e8b 100644 --- a/Frontend/README.md +++ b/Frontend/README.md @@ -7,6 +7,7 @@ The frontend consists of two packages: 1. [lib-pixelstreamingfrontend](/Frontend/library/): the core Pixel Streaming frontend for WebRTC, settings, input, and general functionality. 2. [lib-pixelstreamingfrontend-ui](/Frontend/implementations/typescript): the reference UI that users can either optionally apply on top of the core library or build on top of. +These libraries are published as [NPM packages](/README.md#npm-packages) and support usage as ES6 modules, CommonJS, include type definitions and source maps. ## Docs - [The Settings Panel](Docs/Settings%20Panel.md) @@ -29,7 +30,7 @@ The TypeScript libraries are provided as both an [NPM](https://www.npmjs.com/set ## Usage from source When developing your own Pixel Streaming experience the intent is you will start with this library and extend it through the use of -its public API. We have provided an example of this workflow in our [implementations/typescript](/Frontend/implementations/typescript), which is an implementation of this library. +its public API. We have provided an example of this workflow in our [implementations/typescript](/Frontend/implementations/typescript), which is an implementation of the frontend libraries and contains a working example of how you can bundle/minify your final application JavaScript.. ## Contributing @@ -39,18 +40,18 @@ If part of the library is not exposed and you wish to extend it, please do so in ⚠️ Only NodeJS LTS 18.17.0 is officially supported, some newer versions on NodeJS **WILL BREAK YOUR BUILD** ⚠️ -### Prerequisites +### Prerequisites for local dev - Install NodeJS LTS 18.17.0 on your system. - Install npm globally using: `npm install npm -g` (yes this is required) ### Building the Library Changes to the library occur in the [/library](/Frontend/library) directory and require you to have NodeJS installed as part of your development environment. -Once you have NodeJS installed: +Once you have NodeJS installed: - `cd library` - `npm install` -- `npm run build` +- `npm run build-all` ### Building the UI-Library @@ -76,7 +77,7 @@ This will produce `player.html` and `player.js` under the `SignallingWebServer/P We recommend studying [/ui-library](/Frontend/ui-library) and [player.ts](/Frontend/implementations/typescript/src/player.ts)/[player.html](/Frontend/implementations/typescript/src/player.html), or alternatively the sample React implementation in [implementations/react](/Frontend/implementations/react), then once you have copied and modified the [package.json](/Frontend/implementations/typescript/package.json) and `.ts` into your own `implementation/your_implementation` directory, the process is similar: - `cd implementation/your_implementation` -- `npm build-all` +- `npm run build-all` ## Unit tests @@ -87,4 +88,4 @@ The [/library](/Frontend/library) project has unit tests that test the Pixel Str ## Legal -Copyright © 2024, Epic Games. Licensed under the MIT License, see the file [LICENSE](/LICENSE) for details. +Copyright © 2024, Epic Games. Licensed under the MIT License, see the file [LICENSE](/LICENSE.md) for details. diff --git a/Frontend/implementations/react/package-lock.json b/Frontend/implementations/react/package-lock.json index c43180df..88f7a8b6 100644 --- a/Frontend/implementations/react/package-lock.json +++ b/Frontend/implementations/react/package-lock.json @@ -30,6 +30,7 @@ "extraneous": true }, "../../library": { + "name": "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5", "version": "0.2.0", "license": "MIT", "dependencies": { @@ -47,11 +48,8 @@ "jest-environment-jsdom": "27.5.1", "prettier": "3.3.3", "ts-jest": "27.1.5", - "ts-loader": "^9.4.2", "typedoc": "^0.23.24", - "typescript": "^4.9.4", - "webpack": "^5.75.0", - "webpack-cli": "^5.0.1" + "typescript": "^4.9.4" }, "optionalDependencies": { "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "file:../../Common" diff --git a/Frontend/implementations/react/package.json b/Frontend/implementations/react/package.json index 6ff56b4f..7acabd60 100644 --- a/Frontend/implementations/react/package.json +++ b/Frontend/implementations/react/package.json @@ -6,6 +6,7 @@ "scripts": { "build": "npx webpack --config webpack.prod.js", "build-dev": "npx webpack --config webpack.dev.js", + "build-all": "cd ../../ui-library && npm run build-all && cd ../implementations/react && npm install && npm run build", "watch": "npx webpack --watch", "serve": "webpack serve --config webpack.dev.js", "serve-prod": "webpack serve --config webpack.prod.js" diff --git a/Frontend/implementations/typescript/readme.md b/Frontend/implementations/typescript/readme.md index b59fac2f..f5efbbe4 100644 --- a/Frontend/implementations/typescript/readme.md +++ b/Frontend/implementations/typescript/readme.md @@ -7,6 +7,8 @@ This is the frontend we ship with the Pixel Streaming plugin. The reference fron Using these two libraries gives a fully functional (and customizable) Pixel Streaming experience. +This package is also a good example of how to include the frontend libraries as dependencies and bundle/minify the final application you ship. + ### Key features of the reference frontend - An info panel (screen right) that provides a UI for displaying live statistics to the user. - A settings panel (screen right) that provides a UI for all the options inside [config.ts](/Frontend/library/src/Config/Config.ts). @@ -17,7 +19,7 @@ Using these two libraries gives a fully functional (and customizable) Pixel Stre ``` cd Frontend/implementations/typescript npm install -npm run build +npm run build-all ``` ### Using the reference frontend @@ -28,3 +30,5 @@ cd SignallingWebServer/platform_scripts/cmd start.bat # Navigate to http://localhost in your browser to see the reference frontend ``` + +***Note:* You can also run `start.bat --build` to build all the dependent libraries. diff --git a/Frontend/library/readme.md b/Frontend/library/readme.md index 5199b175..0d019228 100644 --- a/Frontend/library/readme.md +++ b/Frontend/library/readme.md @@ -11,5 +11,13 @@ See [lib-pixelstreamingfrontend-ui](/Frontend/implementations/typescript) for an - Opens a data channel connection sending and receiving custom data (in addition to input). ### Adding it to your project -`npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.4` +`npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.5` +### How this library is built +The NPM packages supports: +- ES6 module usage +- CommonJS usage +- Type definitions +- Source maps + +**Note:** The NPM package does not contain a minified/bundled output, this is up to the user to do this in their application. \ No newline at end of file diff --git a/Frontend/ui-library/README.md b/Frontend/ui-library/README.md new file mode 100644 index 00000000..a2939c60 --- /dev/null +++ b/Frontend/ui-library/README.md @@ -0,0 +1,24 @@ +## lib-pixelstreamingfrontend-ui + +A plugin library that add UI support to the `lib-pixelstreamingfrontend` library. + +This UI library depends on a the base library as a peer dependency, so you should include both as dependencies in your application +if you want to use this library. + +### Key features +- Stock Pixel Streaming frontend +- Setting panel +- Info panel + +### Adding it to your project +`npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.5` +`npm i @epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.5` + +### How this library is built +The NPM packages supports: +- ES6 module usage +- CommonJS usage +- Type definitions +- Source maps + +**Note:** The NPM package does not contain a minified/bundled output, this is up to the user to do this in their application. \ No newline at end of file diff --git a/Signalling/README.md b/Signalling/README.md index 04a45330..9c8931d9 100644 --- a/Signalling/README.md +++ b/Signalling/README.md @@ -8,17 +8,25 @@ To build the `Signalling` module invoke the following commands in the `Common` a ```bash npm install -npm run build -# Or npm run build-dev +npm run build-all +# Or npm run build ``` This will result in a `/dist` or `/build` output directory. **Note:** If you just want to get a signalling server up and running refer to ["Getting Started"](../README.md#getting-started) +### How this library is built +The NPM packages supports: +- ES6 module usage +- CommonJS usage +- Type definitions +- Source maps + ## Documentation - [Protocol Notes](docs/Protocol.md) - [Protocol Messages](../Common/docs/messages.md) The API documentation is [here](docs/) and covers details of all exported components of the library. +