Skip to content

Commit f5cd15b

Browse files
dan-twdan-tw
authored
Merge pull request #56 from ScalablePixelStreaming/5.5upgrade
Upgrade SPS frontend + example to PSInfra 5.5 and functionality to set SS in url parameters.
2 parents 437dbe8 + 76882c1 commit f5cd15b

File tree

10 files changed

+385
-230
lines changed

10 files changed

+385
-230
lines changed

‎examples/typescript/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/typescript/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@tensorworks/spstypescriptexample",
3-
"version": "0.0.2",
3+
"version": "0.0.3",
44
"description": "The typescript example for consuming the Scalable Pixel Streaming Frontend",
55
"main": "./src/index.ts",
66
"scripts": {

‎examples/typescript/src/index.ts‎

Lines changed: 78 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,79 @@
1-
import { Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle, MessageRecv, Flags, WebRtcDisconnectedEvent } from "@tensorworks/libspsfrontend";
2-
3-
// Apply default styling from Epic Games Pixel Streaming Frontend
4-
export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
5-
PixelStreamingApplicationStyles.applyStyleSheet();
6-
7-
// Extend the MessageRecv to allow the engine version to exist as part of our config message from the signalling server
8-
class MessageExtendedConfig extends MessageRecv {
9-
peerConnectionOptions: RTCConfiguration;
10-
engineVersion: string;
11-
platform: string;
12-
frontendToSendOffer: boolean;
13-
};
14-
15-
// Extend PixelStreaming to use our custom extended config that includes the engine version
16-
class ScalablePixelStreaming extends PixelStreaming {
17-
// Create a new method that retains original functionality
18-
public handleOnConfig(messageExtendedConfig: MessageExtendedConfig) {
19-
this._webRtcController.handleOnConfigMessage(messageExtendedConfig);
20-
}
21-
};
22-
23-
document.body.onload = function () {
24-
25-
// 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
26-
const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true, AutoConnect: false, MaxReconnectAttempts: 0 } });
27-
28-
// Create stream and spsApplication instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types
29-
const stream = new ScalablePixelStreaming(config);
30-
31-
// Override the onConfig so we can determine if we need to send the WebRTC offer based on what is sent from the signalling server
32-
stream.webSocketController.onConfig = (messageExtendedConfig: MessageExtendedConfig) => {
33-
stream.config.setFlagEnabled(Flags.BrowserSendOffer, messageExtendedConfig.frontendToSendOffer);
34-
stream.handleOnConfig(messageExtendedConfig);
35-
}
36-
37-
// override the _onDisconnect function to intercept webrtc disconnect events
38-
// and modify how the event is fired by always showing a click to reconnect overlay.
39-
// we also add a full stop to the AFK message.
40-
stream._onDisconnect = function (eventString: string) {
41-
42-
// check if the eventString coming in is the inactivity string and add a full stop
43-
if (eventString == "You have been disconnected due to inactivity") {
44-
eventString += "."
45-
}
46-
47-
this._eventEmitter.dispatchEvent(
48-
new WebRtcDisconnectedEvent({
49-
eventString: eventString,
50-
allowClickToReconnect: true
51-
})
52-
);
53-
}
54-
55-
// Create and append our application
56-
const spsApplication = new SPSApplication({
57-
stream,
58-
onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */
59-
});
60-
document.body.appendChild(spsApplication.rootElement);
1+
import { Config, PixelStreaming, SPSApplication, PixelStreamingApplicationStyle, Flags, TextParameters, BaseMessage, WebRtcDisconnectedEvent } from "@tensorworks/libspsfrontend";
2+
3+
// Apply default styling from Epic Games Pixel Streaming Frontend
4+
export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
5+
PixelStreamingApplicationStyles.applyStyleSheet();
6+
7+
// Extend the default "Config" message supplied by PSInfra library to include the following:
8+
// - Engine version
9+
// - Platform
10+
// - FrontendSendOffer
11+
class MessageExtendedConfig implements BaseMessage {
12+
type: string;
13+
peerConnectionOptions: RTCConfiguration;
14+
engineVersion: string;
15+
platform: string;
16+
frontendToSendOffer: boolean;
17+
};
18+
19+
// Extend PixelStreaming to use our custom extended config that includes the engine version
20+
class ScalablePixelStreaming extends PixelStreaming {
21+
// Create a new method that retains original functionality
22+
public handleOnConfig(messageExtendedConfig: MessageExtendedConfig) {
23+
this._webRtcController.handleOnConfigMessage(messageExtendedConfig);
24+
}
25+
};
26+
27+
document.body.onload = function () {
28+
29+
// 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
30+
const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true, AutoConnect: false, MaxReconnectAttempts: 0 } });
31+
32+
// Handle setting custom signalling url from code or by querying url parameters (e.g. ?ss=ws://my.signaling.server).
33+
{
34+
// Replace with your custom signalling url if you need to.
35+
// Otherwise SPS will use ws|wss://window.location.host/signalling/window.location.pathname
36+
let YOUR_CUSTOM_SIGNALLING_URL_HERE : string = ""; // <-- replace here
37+
38+
// Check the ?ss= url parameter for a custom signalling url.
39+
const urlParams = new URLSearchParams(window.location.search);
40+
if (urlParams.has(TextParameters.SignallingServerUrl)) {
41+
YOUR_CUSTOM_SIGNALLING_URL_HERE = urlParams.get(TextParameters.SignallingServerUrl);
42+
}
43+
config.setTextSetting(TextParameters.SignallingServerUrl, YOUR_CUSTOM_SIGNALLING_URL_HERE);
44+
}
45+
46+
// Create stream and spsApplication instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types
47+
const stream = new ScalablePixelStreaming(config);
48+
49+
// Override the onConfig so we can determine if we need to send the WebRTC offer based on what is sent from the signalling server
50+
stream.signallingProtocol.addListener("config", (config : MessageExtendedConfig) => {
51+
stream.config.setFlagEnabled(Flags.BrowserSendOffer, config.frontendToSendOffer);
52+
stream.handleOnConfig(config);
53+
});
54+
55+
// override the _onDisconnect function to intercept webrtc disconnect events
56+
// and modify how the event is fired by always showing a click to reconnect overlay.
57+
// we also add a full stop to the AFK message.
58+
stream._onDisconnect = function (eventString: string) {
59+
60+
// check if the eventString coming in is the inactivity string and add a full stop
61+
if (eventString == "You have been disconnected due to inactivity") {
62+
eventString += "."
63+
}
64+
65+
this._eventEmitter.dispatchEvent(
66+
new WebRtcDisconnectedEvent({
67+
eventString: eventString,
68+
allowClickToReconnect: true
69+
})
70+
);
71+
}
72+
73+
// Create and append our application
74+
const spsApplication = new SPSApplication({
75+
stream,
76+
onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */
77+
});
78+
document.body.appendChild(spsApplication.rootElement);
6179
}

0 commit comments

Comments
 (0)