From 10a638aecc8162846c09d488db39b3e5e5e5e298 Mon Sep 17 00:00:00 2001 From: Daniel Holden Date: Tue, 9 May 2023 11:18:49 +1000 Subject: [PATCH 1/8] extend the handleOnConfig from the PS library so we are able to include an engine version. The engine version is then used to determine if we need to send our WebRTC offer from the frontend or from the UE instance --- examples/typescript/src/index.ts | 33 +++++++++++++++++++++++++------ examples/typescript/tsconfig.json | 2 +- library/package-lock.json | 21 ++++++++++---------- library/package.json | 2 +- 4 files changed, 40 insertions(+), 18 deletions(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index e2337471..90128ce4 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -1,4 +1,4 @@ -import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend"; +import { Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle, MessageRecv, Flags } from "@tensorworks/libspsfrontend"; // Apply default styling from Epic Games Pixel Streaming Frontend export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle(); @@ -7,24 +7,45 @@ PixelStreamingApplicationStyles.applyStyleSheet(); // websocket url env declare var WEBSOCKET_URL: string; +// Extend the MessageRecv to allow the engine version to exist as part of our config message from the signalling server +class MessageExtendedConfig extends MessageRecv { + peerConnectionOptions: RTCConfiguration; + engineVersion: string +}; + +// Extend PixelStreaming to use our custom extended config that includes the engine version +class ScalablePixelStreaming extends PixelStreaming { + // Create a new method that retains original functionality + public handleOnConfig(messageExtendedConfig: MessageExtendedConfig) { + this._webRtcController.handleOnConfigMessage(messageExtendedConfig) + } +}; + document.body.onload = function () { - // Create a config object. - // Note: This config is extremely important, SPS only supports the browser sending the offer. + // Create a config object. We default to sending the WebRTC offer from the browser as true const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); // make usage of WEBSOCKET_URL if it is not empty let webSocketAddress = WEBSOCKET_URL; - if(webSocketAddress != ""){ + if (webSocketAddress != "") { config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) } // Create stream and spsApplication instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types - const stream = new PixelStreaming(config); + const stream = new ScalablePixelStreaming(config); + + // Override the onConfig so we can determine if we need to send the WebRTC offer based on the engine version + // If the engine version is 4.27 or not defined, the browser should send the offer. This is what the Scalable Pixel Streaming signalling server will be expecting. + stream.webSocketController.onConfig = (messageExtendedConfig: MessageExtendedConfig) => { + stream.config.setFlagEnabled(Flags.BrowserSendOffer, (messageExtendedConfig.engineVersion == "4.27" || messageExtendedConfig.engineVersion == "")); + stream.handleOnConfig(messageExtendedConfig); + } + + // Create and append our application const spsApplication = new SPSApplication({ stream, onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */ }); - document.body.appendChild(spsApplication.rootElement); } \ No newline at end of file diff --git a/examples/typescript/tsconfig.json b/examples/typescript/tsconfig.json index 32cb2238..c9623293 100644 --- a/examples/typescript/tsconfig.json +++ b/examples/typescript/tsconfig.json @@ -4,7 +4,7 @@ "noImplicitAny": true, "module": "es6", "esModuleInterop": true, - "target": "es5", + "target": "ES6", "moduleResolution": "node", "sourceMap": false, "allowJs": true, diff --git a/library/package-lock.json b/library/package-lock.json index 68e57307..5f7088d4 100644 --- a/library/package-lock.json +++ b/library/package-lock.json @@ -1,16 +1,16 @@ { "name": "@tensorworks/libspsfrontend", - "version": "0.3.2", + "version": "0.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@tensorworks/libspsfrontend", - "version": "0.3.2", + "version": "0.3.3", "license": "MIT", "dependencies": { "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": "^0.5.1", - "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": "^0.4.0" + "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": "^0.4.1" }, "devDependencies": { "css-loader": "^6.7.3", @@ -53,16 +53,17 @@ } }, "node_modules/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2/-/lib-pixelstreamingfrontend-ui-ue5.2-0.4.0.tgz", - "integrity": "sha512-WwIUMMMxRDbo+LTt/t3b24qNhTX4d4TuWoj4Ynw37fX8SHLFvJ++9U0ByP3bRxyw9scRBNTVtCZ/6kZIzJV2fQ==", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2/-/lib-pixelstreamingfrontend-ui-ue5.2-0.4.1.tgz", + "integrity": "sha512-GXwB4/LS2fcVyfTAHe6Ma90+Z+oxNIIiwowe0S5ItgsGn2DPo1KwhDw7AbIsbqgtJDntKoofuzrtcdU6lG4RNw==", + "license": "MIT", "dependencies": { "jss": "^10.9.2", "jss-plugin-camel-case": "^10.9.2", "jss-plugin-global": "^10.9.2" }, "peerDependencies": { - "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": "^0.5.0" + "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": "^0.5.1" } }, "node_modules/@jridgewell/gen-mapping": { @@ -4333,9 +4334,9 @@ } }, "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2/-/lib-pixelstreamingfrontend-ui-ue5.2-0.4.0.tgz", - "integrity": "sha512-WwIUMMMxRDbo+LTt/t3b24qNhTX4d4TuWoj4Ynw37fX8SHLFvJ++9U0ByP3bRxyw9scRBNTVtCZ/6kZIzJV2fQ==", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2/-/lib-pixelstreamingfrontend-ui-ue5.2-0.4.1.tgz", + "integrity": "sha512-GXwB4/LS2fcVyfTAHe6Ma90+Z+oxNIIiwowe0S5ItgsGn2DPo1KwhDw7AbIsbqgtJDntKoofuzrtcdU6lG4RNw==", "requires": { "jss": "^10.9.2", "jss-plugin-camel-case": "^10.9.2", diff --git a/library/package.json b/library/package.json index ac3cd55d..3b8c76f9 100644 --- a/library/package.json +++ b/library/package.json @@ -15,7 +15,7 @@ "license": "MIT", "dependencies": { "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": "^0.5.1", - "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": "^0.4.0" + "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": "^0.4.1" }, "devDependencies": { "css-loader": "^6.7.3", From 1bf90ba6fac236a9cbd2f15b8f15b0446ea52305 Mon Sep 17 00:00:00 2001 From: Daniel Holden Date: Tue, 9 May 2023 15:27:02 +1000 Subject: [PATCH 2/8] send offers from the frontend when using ue 5.0 as well --- examples/typescript/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index 90128ce4..b9d0e4d1 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -38,7 +38,7 @@ document.body.onload = function () { // Override the onConfig so we can determine if we need to send the WebRTC offer based on the engine version // If the engine version is 4.27 or not defined, the browser should send the offer. This is what the Scalable Pixel Streaming signalling server will be expecting. stream.webSocketController.onConfig = (messageExtendedConfig: MessageExtendedConfig) => { - stream.config.setFlagEnabled(Flags.BrowserSendOffer, (messageExtendedConfig.engineVersion == "4.27" || messageExtendedConfig.engineVersion == "")); + stream.config.setFlagEnabled(Flags.BrowserSendOffer, (messageExtendedConfig.engineVersion == "4.27" || messageExtendedConfig.engineVersion == "5.0" || messageExtendedConfig.engineVersion == "")); stream.handleOnConfig(messageExtendedConfig); } From 8815bae2f9772e79e0ef459702a57715e369efa9 Mon Sep 17 00:00:00 2001 From: Daniel Holden Date: Tue, 9 May 2023 15:53:45 +1000 Subject: [PATCH 3/8] remove 5.0 as a version that sends offers from the frontend --- examples/typescript/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index b9d0e4d1..90128ce4 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -38,7 +38,7 @@ document.body.onload = function () { // Override the onConfig so we can determine if we need to send the WebRTC offer based on the engine version // If the engine version is 4.27 or not defined, the browser should send the offer. This is what the Scalable Pixel Streaming signalling server will be expecting. stream.webSocketController.onConfig = (messageExtendedConfig: MessageExtendedConfig) => { - stream.config.setFlagEnabled(Flags.BrowserSendOffer, (messageExtendedConfig.engineVersion == "4.27" || messageExtendedConfig.engineVersion == "5.0" || messageExtendedConfig.engineVersion == "")); + stream.config.setFlagEnabled(Flags.BrowserSendOffer, (messageExtendedConfig.engineVersion == "4.27" || messageExtendedConfig.engineVersion == "")); stream.handleOnConfig(messageExtendedConfig); } From a3f30cb89c58a58680aff6a1da995361d4b23373 Mon Sep 17 00:00:00 2001 From: David MacPherson Date: Tue, 16 May 2023 21:09:30 +1000 Subject: [PATCH 4/8] Replaced the logic to send the offer from the frontend depending on what is sent from the signalling server --- examples/typescript/src/index.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index 90128ce4..abdbad55 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -11,6 +11,8 @@ declare var WEBSOCKET_URL: string; class MessageExtendedConfig extends MessageRecv { peerConnectionOptions: RTCConfiguration; engineVersion: string + platform: string + frontendToSendOffer: boolean }; // Extend PixelStreaming to use our custom extended config that includes the engine version @@ -35,10 +37,9 @@ document.body.onload = function () { // Create stream and spsApplication instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types const stream = new ScalablePixelStreaming(config); - // Override the onConfig so we can determine if we need to send the WebRTC offer based on the engine version - // If the engine version is 4.27 or not defined, the browser should send the offer. This is what the Scalable Pixel Streaming signalling server will be expecting. + // Override the onConfig so we can determine if we need to send the WebRTC offer based on what is sent from the signalling server stream.webSocketController.onConfig = (messageExtendedConfig: MessageExtendedConfig) => { - stream.config.setFlagEnabled(Flags.BrowserSendOffer, (messageExtendedConfig.engineVersion == "4.27" || messageExtendedConfig.engineVersion == "")); + stream.config.setFlagEnabled(Flags.BrowserSendOffer, messageExtendedConfig.frontendToSendOffer); stream.handleOnConfig(messageExtendedConfig); } From 6f96953e0b566b36c77e1de11385ef4026b714b7 Mon Sep 17 00:00:00 2001 From: David MacPherson Date: Thu, 18 May 2023 13:55:35 +1000 Subject: [PATCH 5/8] Added missed semicolons --- examples/typescript/src/index.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index abdbad55..5d77535c 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -10,16 +10,16 @@ declare var WEBSOCKET_URL: string; // Extend the MessageRecv to allow the engine version to exist as part of our config message from the signalling server class MessageExtendedConfig extends MessageRecv { peerConnectionOptions: RTCConfiguration; - engineVersion: string - platform: string - frontendToSendOffer: boolean + engineVersion: string; + platform: string; + frontendToSendOffer: boolean; }; // Extend PixelStreaming to use our custom extended config that includes the engine version class ScalablePixelStreaming extends PixelStreaming { // Create a new method that retains original functionality public handleOnConfig(messageExtendedConfig: MessageExtendedConfig) { - this._webRtcController.handleOnConfigMessage(messageExtendedConfig) + this._webRtcController.handleOnConfigMessage(messageExtendedConfig); } }; @@ -31,7 +31,7 @@ document.body.onload = function () { // make usage of WEBSOCKET_URL if it is not empty let webSocketAddress = WEBSOCKET_URL; if (webSocketAddress != "") { - config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) + config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress); } // Create stream and spsApplication instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types From bd4c022d61eb53cb0f8ec7a86478568a0bdb5f0a Mon Sep 17 00:00:00 2001 From: David MacPherson Date: Fri, 19 May 2023 11:05:35 +1000 Subject: [PATCH 6/8] Set the autoConnect to false and the maxReconnects attempts to 0 --- examples/typescript/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index 5d77535c..d36fb40c 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -25,8 +25,8 @@ class ScalablePixelStreaming extends PixelStreaming { document.body.onload = function () { - // Create a config object. We default to sending the WebRTC offer from the browser as true - const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); + // Create a config object. We default to sending the WebRTC offer from the browser as true, TimeoutIfIdle to true, AutoConnect to false and MaxReconnectAttempts to 0 + const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true, AutoConnect: false, MaxReconnectAttempts: 0 } }); // make usage of WEBSOCKET_URL if it is not empty let webSocketAddress = WEBSOCKET_URL; From 057a80e90b8b475dcbfc2441e9a0cbfe6f1477fb Mon Sep 17 00:00:00 2001 From: Daniel Holden Date: Mon, 22 May 2023 11:59:27 +1000 Subject: [PATCH 7/8] bump the library version up to v0.3.4 --- library/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library/package.json b/library/package.json index 3b8c76f9..bf895eb4 100644 --- a/library/package.json +++ b/library/package.json @@ -1,6 +1,6 @@ { "name": "@tensorworks/libspsfrontend", - "version": "0.3.3", + "version": "0.3.4", "description": "The Scalable Pixel Streaming Frontend Library consuming Epic Games' Pixel Streaming Frontend", "main": "dist/libspsfrontend.min.js", "module": "dist/libspsfrontend.esm.js", From 264d173268afe33870641bcf76d05e64f4b527ba Mon Sep 17 00:00:00 2001 From: Daniel Holden Date: Mon, 22 May 2023 12:00:31 +1000 Subject: [PATCH 8/8] bump the example version to v0.0.2 --- examples/typescript/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/typescript/package.json b/examples/typescript/package.json index a04e94c8..8f8162db 100644 --- a/examples/typescript/package.json +++ b/examples/typescript/package.json @@ -1,6 +1,6 @@ { "name": "@tensorworks/spstypescriptexample", - "version": "0.0.1", + "version": "0.0.2", "description": "The typescript example for consuming the Scalable Pixel Streaming Frontend", "main": "./src/index.ts", "scripts": { @@ -38,4 +38,4 @@ "webpack-dev-server": "^4.11.1", "wepack-cli": "^0.0.1-security" } -} +} \ No newline at end of file