@epicgames-ps/lib-pixelstreamingfrontend-ue5.5 0.2.1 → 0.3.0

package/dist/commonjs/VideoPlayer/StreamController.js

@@ -0,0 +1,68 @@
+"use strict";
+// Copyright Epic Games, Inc. All Rights Reserved.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamController = void 0;
+const lib_pixelstreamingcommon_ue5_5_1 = require("@epicgames-ps/lib-pixelstreamingcommon-ue5.5");
+/**
+ * Video Player Controller handles the creation of the video HTML element and all handlers
+ */
+class StreamController {
+    /**
+     * @param videoElementProvider Video Player instance
+     */
+    constructor(videoElementProvider) {
+        this.videoElementProvider = videoElementProvider;
+        this.audioElement = document.createElement('Audio');
+        this.videoElementProvider.setAudioElement(this.audioElement);
+    }
+    /**
+     * Handles when the Peer connection has a track event
+     * @param rtcTrackEvent - RTC Track Event
+     */
+    handleOnTrack(rtcTrackEvent) {
+        lib_pixelstreamingcommon_ue5_5_1.Logger.Info('handleOnTrack ' + JSON.stringify(rtcTrackEvent.streams));
+        // Do not add the track if the ID is `probator` as this is special track created by mediasoup for bitrate probing.
+        // Refer to https://github.com/EpicGamesExt/PixelStreamingInfrastructure/pull/86 for more details.
+        if (rtcTrackEvent.streams.length < 1 || rtcTrackEvent.streams[0].id == 'probator') {
+            return;
+        }
+        const videoElement = this.videoElementProvider.getVideoElement();
+        if (rtcTrackEvent.track) {
+            lib_pixelstreamingcommon_ue5_5_1.Logger.Info('Got track - ' +
+                rtcTrackEvent.track.kind +
+                ' id=' +
+                rtcTrackEvent.track.id +
+                ' readyState=' +
+                rtcTrackEvent.track.readyState);
+        }
+        if (rtcTrackEvent.track.kind == 'audio') {
+            this.CreateAudioTrack(rtcTrackEvent.streams[0]);
+            return;
+        }
+        else if (rtcTrackEvent.track.kind == 'video' &&
+            videoElement.srcObject !== rtcTrackEvent.streams[0]) {
+            videoElement.srcObject = rtcTrackEvent.streams[0];
+            lib_pixelstreamingcommon_ue5_5_1.Logger.Info('Set video source from video track ontrack.');
+            return;
+        }
+    }
+    /**
+     * Creates the audio device when receiving an RTCTrackEvent with the kind of "audio"
+     * @param audioMediaStream - Audio Media stream track
+     */
+    CreateAudioTrack(audioMediaStream) {
+        const videoElement = this.videoElementProvider.getVideoElement();
+        // do nothing the video has the same media stream as the audio track we have here (they are linked)
+        if (videoElement.srcObject == audioMediaStream) {
+            return;
+        }
+        // video element has some other media stream that is not associated with this audio track
+        else if (videoElement.srcObject && videoElement.srcObject !== audioMediaStream) {
+            // create a new audio element
+            this.audioElement.srcObject = audioMediaStream;
+            lib_pixelstreamingcommon_ue5_5_1.Logger.Info('Created new audio element to play separate audio stream.');
+        }
+    }
+}
+exports.StreamController = StreamController;
+//# sourceMappingURL=StreamController.js.map

package/dist/commonjs/VideoPlayer/StreamController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamController.js","sourceRoot":"","sources":["../../../src/VideoPlayer/StreamController.ts"],"names":[],"mappings":";AAAA,kDAAkD;;;AAElD,iGAAsE;AAGtE;;GAEG;AACH,MAAa,gBAAgB;IAIzB;;OAEG;IACH,YAAY,oBAAiC;QACzC,IAAI,CAAC,oBAAoB,GAAG,oBAAoB,CAAC;QACjD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;QACxE,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACjE,CAAC;IAED;;;OAGG;IACH,aAAa,CAAC,aAA4B;QACtC,uCAAM,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;QACtE,kHAAkH;QAClH,kGAAkG;QAClG,IAAI,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,UAAU,EAAE;YAC/E,OAAO;SACV;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,eAAe,EAAE,CAAC;QAEjE,IAAI,aAAa,CAAC,KAAK,EAAE;YACrB,uCAAM,CAAC,IAAI,CACP,cAAc;gBACV,aAAa,CAAC,KAAK,CAAC,IAAI;gBACxB,MAAM;gBACN,aAAa,CAAC,KAAK,CAAC,EAAE;gBACtB,cAAc;gBACd,aAAa,CAAC,KAAK,CAAC,UAAU,CACrC,CAAC;SACL;QAED,IAAI,aAAa,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO,EAAE;YACrC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YAChD,OAAO;SACV;aAAM,IACH,aAAa,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO;YACnC,YAAY,CAAC,SAAS,KAAK,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,EACrD;YACE,YAAY,CAAC,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YAClD,uCAAM,CAAC,IAAI,CAAC,4CAA4C,CAAC,CAAC;YAC1D,OAAO;SACV;IACL,CAAC;IAED;;;OAGG;IACH,gBAAgB,CAAC,gBAA6B;QAC1C,MAAM,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,eAAe,EAAE,CAAC;QAEjE,mGAAmG;QACnG,IAAI,YAAY,CAAC,SAAS,IAAI,gBAAgB,EAAE;YAC5C,OAAO;SACV;QACD,yFAAyF;aACpF,IAAI,YAAY,CAAC,SAAS,IAAI,YAAY,CAAC,SAAS,KAAK,gBAAgB,EAAE;YAC5E,6BAA6B;YAC7B,IAAI,CAAC,YAAY,CAAC,SAAS,GAAG,gBAAgB,CAAC;YAC/C,uCAAM,CAAC,IAAI,CAAC,0DAA0D,CAAC,CAAC;SAC3E;IACL,CAAC;CACJ;AArED,4CAqEC"}

package/dist/commonjs/VideoPlayer/VideoPlayer.js

@@ -0,0 +1,178 @@
+"use strict";
+// Copyright Epic Games, Inc. All Rights Reserved.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoPlayer = void 0;
+const Config_1 = require("../Config/Config");
+const lib_pixelstreamingcommon_ue5_5_1 = require("@epicgames-ps/lib-pixelstreamingcommon-ue5.5");
+/**
+ * The video player html element
+ */
+class VideoPlayer {
+    /**
+     * @param videoElementParent the html div the the video player will be injected into
+     * @param config the applications configuration. We're interested in the startVideoMuted flag
+     */
+    constructor(videoElementParent, config) {
+        this.lastTimeResized = new Date().getTime();
+        this.videoElement = document.createElement('video');
+        this.config = config;
+        this.videoElement.id = 'streamingVideo';
+        this.videoElement.disablePictureInPicture = true;
+        this.videoElement.playsInline = true;
+        this.videoElement.style.width = '100%';
+        this.videoElement.style.height = '100%';
+        this.videoElement.style.position = 'absolute';
+        this.videoElement.style.pointerEvents = 'all';
+        videoElementParent.appendChild(this.videoElement);
+        this.onResizePlayerCallback = () => {
+            console.log('Resolution changed, restyling player, did you forget to override this function?');
+        };
+        this.onMatchViewportResolutionCallback = () => {
+            console.log('Resolution changed and match viewport resolution is turned on, did you forget to override this function?');
+        };
+        // set play for video (and audio)
+        this.videoElement.onclick = () => {
+            if (this.audioElement != undefined && this.audioElement.paused) {
+                this.audioElement.play();
+            }
+            if (this.videoElement.paused) {
+                this.videoElement.play();
+            }
+        };
+        this.videoElement.onloadedmetadata = () => {
+            this.onVideoInitialized();
+        };
+        // set resize events to the windows if it is resized or its orientation is changed
+        window.addEventListener('resize', () => this.resizePlayerStyle(), true);
+        window.addEventListener('orientationchange', () => this.onOrientationChange());
+    }
+    setAudioElement(audioElement) {
+        this.audioElement = audioElement;
+    }
+    /**
+     * Sets up the video element with any application config and plays the video element.
+     * @returns A promise for if playing the video was successful or not.
+     */
+    play() {
+        this.videoElement.muted = this.config.isFlagEnabled(Config_1.Flags.StartVideoMuted);
+        this.videoElement.autoplay = this.config.isFlagEnabled(Config_1.Flags.AutoPlayVideo);
+        return this.videoElement.play();
+    }
+    /**
+     * @returns True if the video element is paused.
+     */
+    isPaused() {
+        return this.videoElement.paused;
+    }
+    /**
+     * @returns - whether the video element is playing.
+     */
+    isVideoReady() {
+        return this.videoElement.readyState !== undefined && this.videoElement.readyState > 0;
+    }
+    /**
+     * @returns True if the video element has a valid video source (srcObject).
+     */
+    hasVideoSource() {
+        return this.videoElement.srcObject !== undefined && this.videoElement.srcObject !== null;
+    }
+    /**
+     * Get the current context of the html video element
+     * @returns - the current context of the video element
+     */
+    getVideoElement() {
+        return this.videoElement;
+    }
+    /**
+     * Get the current context of the html video elements parent
+     * @returns - the current context of the video elements parent
+     */
+    getVideoParentElement() {
+        return this.videoElement.parentElement;
+    }
+    /**
+     * Set the Video Elements src object tracks to enable
+     * @param enabled - Enable Tracks on the Src Object
+     */
+    setVideoEnabled(enabled) {
+        // this is a temporary hack until type scripts video element is updated to reflect the need for tracks on a html video element
+        const videoElement = this.videoElement;
+        videoElement.srcObject
+            .getTracks()
+            .forEach((track) => (track.enabled = enabled));
+    }
+    /**
+     * An override for when the video has been initialized with a srcObject
+     */
+    onVideoInitialized() {
+        // Default Functionality: Do Nothing
+    }
+    /**
+     * On the orientation change of a window clear the timeout
+     */
+    onOrientationChange() {
+        clearTimeout(this.orientationChangeTimeout);
+        this.orientationChangeTimeout = window.setTimeout(() => {
+            this.resizePlayerStyle();
+        }, 500);
+    }
+    /**
+     * Resizes the player style based on the window height and width
+     * @returns - nil if requirements are satisfied
+     */
+    resizePlayerStyle() {
+        const videoElementParent = this.getVideoParentElement();
+        if (!videoElementParent) {
+            return;
+        }
+        this.updateVideoStreamSize();
+        if (videoElementParent.classList.contains('fixed-size')) {
+            this.onResizePlayerCallback();
+            return;
+        }
+        // controls for resizing the player
+        this.resizePlayerStyleToFillParentElement();
+        this.onResizePlayerCallback();
+    }
+    /**
+     * Resizes the player element to fill the parent element
+     */
+    resizePlayerStyleToFillParentElement() {
+        const videoElementParent = this.getVideoParentElement();
+        //Video is not initialized yet so set videoElementParent to size of parent element
+        const styleWidth = '100%';
+        const styleHeight = '100%';
+        const styleTop = 0;
+        const styleLeft = 0;
+        videoElementParent.setAttribute('style', 'top: ' +
+            styleTop +
+            'px; left: ' +
+            styleLeft +
+            'px; width: ' +
+            styleWidth +
+            '; height: ' +
+            styleHeight +
+            '; cursor: default;');
+    }
+    updateVideoStreamSize() {
+        if (!this.config.isFlagEnabled(Config_1.Flags.MatchViewportResolution)) {
+            return;
+        }
+        const now = new Date().getTime();
+        if (now - this.lastTimeResized > 300) {
+            const videoElementParent = this.getVideoParentElement();
+            if (!videoElementParent) {
+                return;
+            }
+            this.onMatchViewportResolutionCallback(videoElementParent.clientWidth, videoElementParent.clientHeight);
+            this.lastTimeResized = new Date().getTime();
+        }
+        else {
+            lib_pixelstreamingcommon_ue5_5_1.Logger.Info('Resizing too often - skipping');
+            clearTimeout(this.resizeTimeoutHandle);
+            this.resizeTimeoutHandle = window.setTimeout(() => this.updateVideoStreamSize(), 100);
+        }
+    }
+}
+exports.VideoPlayer = VideoPlayer;
+//# sourceMappingURL=VideoPlayer.js.map

package/dist/commonjs/VideoPlayer/VideoPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.js","sourceRoot":"","sources":["../../../src/VideoPlayer/VideoPlayer.ts"],"names":[],"mappings":"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"}