From 56a64b3f91a6bd27cecbacbbe77a81f6621b39f1 Mon Sep 17 00:00:00 2001 From: Luke Bermingham <1215582+lukehb@users.noreply.github.com> Date: Sat, 25 Feb 2023 20:08:33 +1000 Subject: [PATCH] Exposed websocketController and webXRController to public API --- .../implementations/EpicGames/src/player.ts | 4 +- .../EpicGames/src/stresstest.ts | 4 +- .../src/PixelStreaming/PixelStreaming.ts | 87 +++++++++++-------- .../ui-library/src/Application/Application.ts | 84 +++++++++--------- .../src/pixelstreamingfrontend-ui.ts | 7 +- 5 files changed, 103 insertions(+), 83 deletions(-) diff --git a/Frontend/implementations/EpicGames/src/player.ts b/Frontend/implementations/EpicGames/src/player.ts index c229b809..77565315 100644 --- a/Frontend/implementations/EpicGames/src/player.ts +++ b/Frontend/implementations/EpicGames/src/player.ts @@ -14,8 +14,8 @@ document.body.onload = function() { const config = new Config({ useUrlParams: true }); // Create a Native DOM delegate instance that implements the Delegate interface class - const pixelStreaming = new PixelStreaming(config); - const application = new Application({ pixelStreaming }); + const stream = new PixelStreaming(config); + const application = new Application({ stream }); // document.getElementById("centrebox").appendChild(application.rootElement); document.body.appendChild(application.rootElement); } diff --git a/Frontend/implementations/EpicGames/src/stresstest.ts b/Frontend/implementations/EpicGames/src/stresstest.ts index 2e96c7db..5a86dbd6 100644 --- a/Frontend/implementations/EpicGames/src/stresstest.ts +++ b/Frontend/implementations/EpicGames/src/stresstest.ts @@ -145,8 +145,8 @@ export class StressTester { config.setFlagEnabled(Flags.StartVideoMuted, true); // Create a Native DOM delegate instance that implements the Delegate interface class - const pixelStreaming = new PixelStreaming(config); - const application = new Application({ pixelStreaming }); + const stream = new PixelStreaming(config); + const application = new Application({ stream }); streamFrame.appendChild(application.rootElement); return streamFrame; } diff --git a/Frontend/library/src/PixelStreaming/PixelStreaming.ts b/Frontend/library/src/PixelStreaming/PixelStreaming.ts index eb3fb3c5..c3f6020b 100644 --- a/Frontend/library/src/PixelStreaming/PixelStreaming.ts +++ b/Frontend/library/src/PixelStreaming/PixelStreaming.ts @@ -46,8 +46,8 @@ export interface PixelStreamingOverrides { * this will likely be the core of your Pixel Streaming experience in terms of functionality. */ export class PixelStreaming { - private webRtcController: WebRtcPlayerController; - private webXrController: WebXRController; + private _webRtcController: WebRtcPlayerController; + private _webXrController: WebXRController; /** * Configuration object. You can read or modify config through this object. Whenever * the configuration is changed, the library will emit a `settingsChanged` event. @@ -94,14 +94,14 @@ export class PixelStreaming { x: number, y: number ) => - this.webRtcController.requestUnquantizedAndDenormalizeUnsigned( + this._webRtcController.requestUnquantizedAndDenormalizeUnsigned( x, y ); this._activateOnScreenKeyboard = (command: MessageOnScreenKeyboard) => this.onScreenKeyboardHelper.showOnScreenKeyboard(command); - this.webXrController = new WebXRController(this.webRtcController); + this._webXrController = new WebXRController(this._webRtcController); } /** @@ -126,9 +126,9 @@ export class PixelStreaming { // and we aren't currently quality controller, send the request if ( wantsQualityController === true && - !this.webRtcController.isQualityController + !this._webRtcController.isQualityController ) { - this.webRtcController.sendRequestQualityControlOwnership(); + this._webRtcController.sendRequestQualityControlOwnership(); } } ); @@ -136,14 +136,14 @@ export class PixelStreaming { this.config._addOnSettingChangedListener( Flags.AFKDetection, (isAFKEnabled: boolean) => { - this.webRtcController.setAfkEnabled(isAFKEnabled); + this._webRtcController.setAfkEnabled(isAFKEnabled); } ); this.config._addOnSettingChangedListener( Flags.MatchViewportResolution, () => { - this.webRtcController.videoPlayer.updateVideoStreamSize(); + this._webRtcController.videoPlayer.updateVideoStreamSize(); } ); @@ -156,7 +156,7 @@ export class PixelStreaming { isHoveringMouse ? 'Hovering' : 'Locked' } Mouse` ); - this.webRtcController.activateRegisterMouse(); + this._webRtcController.activateRegisterMouse(); } ); @@ -169,7 +169,7 @@ export class PixelStreaming { '-------- Sending MinQP --------', 7 ); - this.webRtcController.sendEncoderMinQP(newValue); + this._webRtcController.sendEncoderMinQP(newValue); Logger.Log( Logger.GetStackTrace(), '-------------------------------------------', @@ -186,7 +186,7 @@ export class PixelStreaming { '-------- Sending encoder settings --------', 7 ); - this.webRtcController.sendEncoderMaxQP(newValue); + this._webRtcController.sendEncoderMaxQP(newValue); Logger.Log( Logger.GetStackTrace(), '-------------------------------------------', @@ -204,7 +204,7 @@ export class PixelStreaming { '-------- Sending web rtc settings --------', 7 ); - this.webRtcController.sendWebRTCMinBitrate(newValue * 1000 /* kbps to bps */); + this._webRtcController.sendWebRTCMinBitrate(newValue * 1000 /* kbps to bps */); Logger.Log( Logger.GetStackTrace(), '-------------------------------------------', @@ -221,7 +221,7 @@ export class PixelStreaming { '-------- Sending web rtc settings --------', 7 ); - this.webRtcController.sendWebRTCMaxBitrate(newValue * 1000 /* kbps to bps */); + this._webRtcController.sendWebRTCMaxBitrate(newValue * 1000 /* kbps to bps */); Logger.Log( Logger.GetStackTrace(), '-------------------------------------------', @@ -238,7 +238,7 @@ export class PixelStreaming { '-------- Sending web rtc settings --------', 7 ); - this.webRtcController.sendWebRTCFps(newValue); + this._webRtcController.sendWebRTCFps(newValue); Logger.Log( Logger.GetStackTrace(), '-------------------------------------------', @@ -250,8 +250,8 @@ export class PixelStreaming { this.config._addOnOptionSettingChangedListener( OptionParameters.PreferredCodec, (newValue: string) => { - if (this.webRtcController) { - this.webRtcController.setPreferredCodec(newValue); + if (this._webRtcController) { + this._webRtcController.setPreferredCodec(newValue); } } ); @@ -283,13 +283,13 @@ export class PixelStreaming { private setWebRtcPlayerController( webRtcPlayerController: WebRtcPlayerController ) { - this.webRtcController = webRtcPlayerController; + this._webRtcController = webRtcPlayerController; - this.webRtcController.setPreferredCodec( + this._webRtcController.setPreferredCodec( this.config.getSettingOption(OptionParameters.PreferredCodec) .selected ); - this.webRtcController.resizePlayerStyle(); + this._webRtcController.resizePlayerStyle(); // connect if auto connect flag is enabled this.checkForAutoConnect(); @@ -299,7 +299,7 @@ export class PixelStreaming { * Connect to signaling server. */ public connect() { - this.webRtcController.connectToSignallingServer(); + this._webRtcController.connectToSignallingServer(); } /** @@ -307,14 +307,14 @@ export class PixelStreaming { * before establishing a new connection */ public reconnect() { - this.webRtcController.restartStreamAutomatically(); + this._webRtcController.restartStreamAutomatically(); } /** * Disconnect from the signaling server and close open peer connections. */ public disconnect() { - this.webRtcController.close(); + this._webRtcController.close(); } /** @@ -322,7 +322,7 @@ export class PixelStreaming { */ public play() { this._onStreamLoading(); - this.webRtcController.playStream(); + this._webRtcController.playStream(); } /** @@ -333,7 +333,7 @@ export class PixelStreaming { if (this.config.isFlagEnabled(Flags.AutoConnect)) { // if autoplaying show an info overlay while while waiting for the connection to begin this._onWebRtcAutoConnect(); - this.webRtcController.connectToSignallingServer(); + this._webRtcController.connectToSignallingServer(); } } @@ -367,13 +367,13 @@ export class PixelStreaming { _onDisconnect(eventString: string) { // if we have overridden the default disconnection message, assign the new value here if ( - this.webRtcController.getDisconnectMessageOverride() != '' && - this.webRtcController.getDisconnectMessageOverride() !== + this._webRtcController.getDisconnectMessageOverride() != '' && + this._webRtcController.getDisconnectMessageOverride() !== undefined && - this.webRtcController.getDisconnectMessageOverride() != null + this._webRtcController.getDisconnectMessageOverride() != null ) { - eventString = this.webRtcController.getDisconnectMessageOverride(); - this.webRtcController.setDisconnectMessageOverride(''); + eventString = this._webRtcController.getDisconnectMessageOverride(); + this._webRtcController.setDisconnectMessageOverride(''); } this._eventEmitter.dispatchEvent( @@ -439,7 +439,7 @@ export class PixelStreaming { videoStats.handleSessionStatistics( this._videoStartTime, this._inputController, - this.webRtcController.videoAvgQp + this._webRtcController.videoAvgQp ); this._eventEmitter.dispatchEvent( @@ -518,10 +518,10 @@ export class PixelStreaming { * @returns */ public requestLatencyTest() { - if (!this.webRtcController.videoPlayer.isVideoReady()) { + if (!this._webRtcController.videoPlayer.isVideoReady()) { return false; } - this.webRtcController.sendLatencyTest(); + this._webRtcController.sendLatencyTest(); return true; } @@ -531,10 +531,10 @@ export class PixelStreaming { * @returns */ public requestShowFps() { - if (!this.webRtcController.videoPlayer.isVideoReady()) { + if (!this._webRtcController.videoPlayer.isVideoReady()) { return false; } - this.webRtcController.sendShowFps(); + this._webRtcController.sendShowFps(); return true; } @@ -544,10 +544,10 @@ export class PixelStreaming { * @returns */ public requestIframe() { - if (!this.webRtcController.videoPlayer.isVideoReady()) { + if (!this._webRtcController.videoPlayer.isVideoReady()) { return false; } - this.webRtcController.sendIframeRequest(); + this._webRtcController.sendIframeRequest(); return true; } @@ -590,4 +590,19 @@ export class PixelStreaming { public toggleXR() { this.webXrController.xrClicked(); } + + /** + * Public getter for the websocket controller. Access to this property allows you to send + * custom websocket messages. + */ + public get webSocketController() { + return this._webRtcController.webSocketController; + } + + /** + * Public getter for the webXrController controller. Used for all XR features. + */ + public get webXrController() { + return this._webXrController; + } } diff --git a/Frontend/ui-library/src/Application/Application.ts b/Frontend/ui-library/src/Application/Application.ts index 84d81da9..531cf819 100644 --- a/Frontend/ui-library/src/Application/Application.ts +++ b/Frontend/ui-library/src/Application/Application.ts @@ -26,14 +26,14 @@ import { VideoQpIndicator } from '../UI/VideoQpIndicator'; import { ConfigUI, LightMode } from '../Config/ConfigUI'; export interface UIOptions { - pixelStreaming: PixelStreaming; + stream: PixelStreaming; } /** * Provides common base functionality for applications that extend this application */ export class Application { - pixelStreaming: PixelStreaming; + stream: PixelStreaming; _rootElement: HTMLElement; _uiFeatureElement: HTMLElement; @@ -59,8 +59,8 @@ export class Application { * @param options - Initialization options */ constructor(options: UIOptions) { - this.pixelStreaming = options.pixelStreaming; - this.configUI = new ConfigUI(this.pixelStreaming.config); + this.stream = options.stream; + this.configUI = new ConfigUI(this.stream.config); this.createOverlays(); @@ -90,31 +90,31 @@ export class Application { public createOverlays(): void { // build all of the overlays this.disconnectOverlay = new DisconnectOverlay( - this.pixelStreaming.videoElementParent + this.stream.videoElementParent ); this.connectOverlay = new ConnectOverlay( - this.pixelStreaming.videoElementParent + this.stream.videoElementParent ); this.playOverlay = new PlayOverlay( - this.pixelStreaming.videoElementParent + this.stream.videoElementParent ); this.infoOverlay = new InfoOverlay( - this.pixelStreaming.videoElementParent + this.stream.videoElementParent ); this.errorOverlay = new ErrorOverlay( - this.pixelStreaming.videoElementParent + this.stream.videoElementParent ); this.afkOverlay = new AFKOverlay( - this.pixelStreaming.videoElementParent + this.stream.videoElementParent ); - this.disconnectOverlay.onAction(() => this.pixelStreaming.reconnect()); + this.disconnectOverlay.onAction(() => this.stream.reconnect()); // Build the webRtc connect overlay Event Listener and show the connect overlay - this.connectOverlay.onAction(() => this.pixelStreaming.connect()); + this.connectOverlay.onAction(() => this.stream.connect()); // set up the play overlays action - this.playOverlay.onAction(() => this.pixelStreaming.play()); + this.playOverlay.onAction(() => this.stream.play()); } /** @@ -136,7 +136,7 @@ export class Application { // Add WebXR button to controls controls.xrIcon.rootElement.onclick = () => - this.pixelStreaming.toggleXR(); + this.stream.toggleXR(); // setup the stats/info button controls.statsIcon.rootElement.onclick = () => this.statsClicked(); @@ -146,7 +146,7 @@ export class Application { // Add button for toggle fps const showFPSButton = new LabelledButton('Show FPS', 'Toggle'); showFPSButton.addOnClickListener(() => { - this.pixelStreaming.requestShowFps(); + this.stream.requestShowFps(); }); // Add button for restart stream @@ -155,7 +155,7 @@ export class Application { 'Restart' ); restartStreamButton.addOnClickListener(() => { - this.pixelStreaming.reconnect(); + this.stream.reconnect(); }); // Add button for request keyframe @@ -164,7 +164,7 @@ export class Application { 'Request' ); requestKeyframeButton.addOnClickListener(() => { - this.pixelStreaming.requestIframe(); + this.stream.requestIframe(); }); const commandsSectionElem = this.configUI.buildSectionWithHeading( @@ -198,85 +198,85 @@ export class Application { } registerCallbacks() { - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'afkWarningActivate', ({ data: { countDown, dismissAfk } }) => this.showAfkOverlay(countDown, dismissAfk) ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'afkWarningUpdate', ({ data: { countDown } }) => this.afkOverlay.updateCountdown(countDown) ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'afkWarningDeactivate', () => this.afkOverlay.hide() ); - this.pixelStreaming.addEventListener('afkTimedOut', () => + this.stream.addEventListener('afkTimedOut', () => this.afkOverlay.hide() ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'videoEncoderAvgQP', ({ data: { avgQP } }) => this.onVideoEncoderAvgQP(avgQP) ); - this.pixelStreaming.addEventListener('webRtcSdp', () => + this.stream.addEventListener('webRtcSdp', () => this.onWebRtcSdp() ); - this.pixelStreaming.addEventListener('webRtcAutoConnect', () => + this.stream.addEventListener('webRtcAutoConnect', () => this.onWebRtcAutoConnect() ); - this.pixelStreaming.addEventListener('webRtcConnecting', () => + this.stream.addEventListener('webRtcConnecting', () => this.onWebRtcConnecting() ); - this.pixelStreaming.addEventListener('webRtcConnected', () => + this.stream.addEventListener('webRtcConnected', () => this.onWebRtcConnected() ); - this.pixelStreaming.addEventListener('webRtcFailed', () => + this.stream.addEventListener('webRtcFailed', () => this.onWebRtcFailed() ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'webRtcDisconnected', ({ data: { eventString, showActionOrErrorOnDisconnect } }) => this.onDisconnect(eventString, showActionOrErrorOnDisconnect) ); - this.pixelStreaming.addEventListener('videoInitialized', () => + this.stream.addEventListener('videoInitialized', () => this.onVideoInitialized() ); - this.pixelStreaming.addEventListener('streamLoading', () => + this.stream.addEventListener('streamLoading', () => this.onStreamLoading() ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'playStreamError', ({ data: { message } }) => this.onPlayStreamError(message) ); - this.pixelStreaming.addEventListener('playStream', () => + this.stream.addEventListener('playStream', () => this.onPlayStream() ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'playStreamRejected', ({ data: { reason } }) => this.onPlayStreamRejected(reason) ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'loadFreezeFrame', ({ data: { shouldShowPlayOverlay } }) => this.onLoadFreezeFrame(shouldShowPlayOverlay) ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'statsReceived', ({ data: { aggregatedStats } }) => this.onStatsReceived(aggregatedStats) ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'latencyTestResult', ({ data: { latencyTimings } }) => this.onLatencyTestResults(latencyTimings) ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'streamerListMessage', ({ data: { messageStreamerList, autoSelectedStreamerId } }) => this.handleStreamerListMessage(messageStreamerList, autoSelectedStreamerId) ); - this.pixelStreaming.addEventListener( + this.stream.addEventListener( 'settingsChanged', (event) => this.configUI.onSettingsChanged(event) ); @@ -291,7 +291,7 @@ export class Application { this._rootElement.id = 'playerUI'; this._rootElement.classList.add('noselect'); this._rootElement.appendChild( - this.pixelStreaming.videoElementParent + this.stream.videoElementParent ); this._rootElement.appendChild(this.uiFeaturesElement); } @@ -432,7 +432,7 @@ export class Application { */ showConnectOrAutoConnectOverlays() { // set up if the auto play will be used or regular click to start - if (!this.pixelStreaming.config.isFlagEnabled(Flags.AutoConnect)) { + if (!this.stream.config.isFlagEnabled(Flags.AutoConnect)) { this.showConnectOverlay(); } } @@ -531,13 +531,13 @@ export class Application { } onVideoInitialized() { - if (!this.pixelStreaming.config.isFlagEnabled(Flags.AutoPlayVideo)) { + if (!this.stream.config.isFlagEnabled(Flags.AutoPlayVideo)) { this.showPlayOverlay(); } // starting a latency check this.statsPanel.latencyTest.latencyTestButton.onclick = () => { - this.pixelStreaming.requestLatencyTest(); + this.stream.requestLatencyTest(); }; } diff --git a/Frontend/ui-library/src/pixelstreamingfrontend-ui.ts b/Frontend/ui-library/src/pixelstreamingfrontend-ui.ts index e9b1ced0..c11b5a29 100644 --- a/Frontend/ui-library/src/pixelstreamingfrontend-ui.ts +++ b/Frontend/ui-library/src/pixelstreamingfrontend-ui.ts @@ -1,6 +1,6 @@ // Copyright Epic Games, Inc. All Rights Reserved. -export { Application } from './Application/Application'; +export { Application, UIOptions } from './Application/Application'; export { PixelStreamingApplicationStyle } from './Styles/PixelStreamingApplicationStyles'; @@ -14,3 +14,8 @@ export { InfoOverlay } from './Overlay/InfoOverlay'; export { PlayOverlay } from './Overlay/PlayOverlay'; export { TextOverlay } from './Overlay/TextOverlay'; export { ConfigUI } from './Config/ConfigUI'; +export { SettingUIBase } from './Config/SettingUIBase'; +export { SettingUIFlag } from './Config/SettingUIFlag'; +export { SettingUINumber } from './Config/SettingUINumber'; +export { SettingUIOption } from './Config/SettingUIOption'; +export { SettingUIText } from './Config/SettingUIText';