@3dsource/angular-unreal-module 0.0.101-dev.1 → 0.0.101-dev.3

package/fesm2022/3dsource-angular-unreal-module.mjs

@@ -3581,14 +3581,6 @@ class InputService extends SubService {
                     };
                 }
             };
-            this.unQuantizeAndDenormalizeUnsigned = (x, y) => {
-                const normalizedX = x / 65536;
-                const normalizedY = y / 65536;
-                return {
-                    x: normalizedX * videoElement.clientWidth,
-                    y: normalizedY * videoElement.clientHeight,
-                };
-            };
             // Signed.
             this.normalizeAndQuantizeSigned = (x, y) => {
                 const normalizedX = x / (0.5 * videoElement.clientWidth);
@@ -3724,6 +3716,7 @@ class InputService extends SubService {
     }
     emitMouseDown(button, x, y) {
         const coord = this.normalizeAndQuantizeUnsigned(x, y);
+        console.log(button, coord);
         const Data = new DataView(new ArrayBuffer(6));
         Data.setUint8(0, MessageType.MouseDown);
         Data.setUint8(1, button);
@@ -5601,6 +5594,555 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-low-bandwidth-detector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FilterSettingsComponent], template: "@if (isReducedQuality() || isLowBandwidth()) {\n  <div\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n    class=\"lbm-indicator freeze-loader\"\n  >\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n        <path\n          fill=\"#85888E\"\n          d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n        />\n        <path\n          fill=\"#fff\"\n          fill-rule=\"evenodd\"\n          d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n\n    <div\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n      class=\"lbm-message\"\n    >\n      <p class=\"lbm-description\">\n        Fluid Interactivity Modes were disabled due to an unstable connection.\n\n        <button\n          (click)=\"openLBMDialog()\"\n          [attr.data-testid]=\"'learn-more-lbm'\"\n          type=\"button\"\n          class=\"lbm-learn-more\"\n        >\n          Learn more\n        </button>\n      </p>\n      <button\n        (click)=\"toggleIndicator(false)\"\n        [attr.data-testid]=\"'close-lbm-indicator'\"\n        type=\"button\"\n        class=\"lbm-close\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n}\n\n@if (isDevMode) {\n  <app-filter-settings />\n}\n", styles: [".freeze-loader,.lbm-indicator{--lbmPositionTop: 18px;--lbmPositionLeft: 18px;--lbmPositionRight: 18px;--lbmIndicatorSize: 36px;--lbmIndicatorBorderRadius: 8px;--lbmIndicatorCloseSize: 20px;--lbmPadding: 10px;--lbmTextSize: 13px;--lbmLineHeight: 20px;--lbmTextColor: #ffffff;--lbmBackgroundColor: rgba(17, 24, 39, .7);position:absolute;top:var(--lbmPositionTop);left:var(--lbmPositionLeft);z-index:10;display:flex;justify-content:center;align-items:flex-start;min-width:var(--lbmIndicatorSize);min-height:var(--lbmIndicatorSize);overflow:hidden}.freeze-loader.expanded,.lbm-indicator.expanded{--lbmPositionTop: 8px;--lbmPositionLeft: 8px;--lbmPositionRight: 8px;width:auto;max-width:calc(100% - var(--lbmPositionLeft) - var(--lbmPositionRight));padding:var(--lbmPadding);background:var(--lbmBackgroundColor);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--lbmIndicatorBorderRadius);gap:12px}.freeze-loader .lbm-icon,.lbm-indicator .lbm-icon{display:flex;width:var(--lbmIndicatorSize);height:var(--lbmIndicatorSize);padding:8px;color:#fff;background-color:var(--lbmBackgroundColor);border-radius:50%;flex-shrink:0;cursor:pointer}.freeze-loader .lbm-icon svg,.freeze-loader .lbm-icon img,.lbm-indicator .lbm-icon svg,.lbm-indicator .lbm-icon img{width:100%;height:100%}.freeze-loader .lbm-close,.lbm-indicator .lbm-close{position:absolute;top:0;right:0;width:var(--lbmIndicatorCloseSize);height:var(--lbmIndicatorCloseSize);background-color:transparent;border:none;padding:0;cursor:pointer}.freeze-loader .lbm-message,.lbm-indicator .lbm-message{position:relative;opacity:0;height:0;max-width:0;padding-right:24px;pointer-events:none;visibility:hidden;animation:closeMessage .3s forwards}.freeze-loader .lbm-message--open,.lbm-indicator .lbm-message--open{position:relative;visibility:visible;display:flex;align-items:center;align-self:center;pointer-events:all;gap:12px;max-width:fit-content;height:auto;opacity:1;animation:openMessage .3s forwards}.freeze-loader .lbm-description,.lbm-indicator .lbm-description{margin:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor)}.freeze-loader .lbm-learn-more,.lbm-indicator .lbm-learn-more{display:inline-flex;padding:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor);-webkit-text-decoration-line:underline;text-decoration-line:underline;background-color:transparent;border:none;cursor:pointer}.freeze-loader .lbm-learn-more:hover,.lbm-indicator .lbm-learn-more:hover{text-decoration:none}@keyframes openMessage{0%{opacity:0;max-width:0;height:0}10%{height:auto;max-width:fit-content}to{opacity:1;height:auto;max-width:fit-content}}@keyframes closeMessage{0%{opacity:1;max-width:fit-content}to{opacity:0;max-width:0}}\n"] }]
         }] });
 
+/*
+ * Copyright (c) 2026.
+ * 3DSource.com. Sergii Karanda steve@3dsource.com. All Rights Reserved.
+ */
+class WebRtcPlayerService2 extends SubService {
+    constructor() {
+        super();
+        this.onDataChannelMessage$ = new Subject();
+        this.signallingSrv = inject(SignallingService);
+        this.videoService = inject(VideoService);
+        this.commandTelemetryService = inject(CommandTelemetryService);
+        this.cfg = {};
+        this.useMic = false;
+        this.forceTURN = false;
+        this.forceMonoAudio = false;
+        /** Whether the remote SDP has been applied to the current peer connection */
+        this.remoteDescriptionSet = false;
+        /** ICE candidates received before the remote description was set */
+        this.iceCandidateBuffer = [];
+        this.isReconnecting = this.store.selectSignal(unrealFeature.selectIsReconnecting);
+        this.init();
+        this.actions$.pipe(ofType(dropDC)).subscribe(() => this.dcClient?.close());
+        this.actions$.pipe(ofType(dropPC)).subscribe(() => this.pcClient?.close());
+    }
+    init() {
+        this.signallingSrv.onConfig$.subscribe((config) => {
+            this.videoService.create();
+            this.setConfig(config);
+        });
+        // Server-initiated offer: set remote description and respond with answer
+        this.signallingSrv.onOffer$.pipe(filter(Truthy)).subscribe((offer) => {
+            void this.handleServerOffer(offer);
+        });
+        // Answer to a client-initiated offer
+        this.signallingSrv.onWebRtcAnswer$
+            .pipe(filter(Truthy))
+            .subscribe((answer) => {
+            void this.handleServerAnswer(answer);
+        });
+        // ICE candidates — buffered until remote description is set
+        this.signallingSrv.onWebRtcIce$.subscribe((candidate) => {
+            this.commandTelemetryService.trackStopCommand('EXT-iceCandidate', true, {
+                multi: true,
+            });
+            if (this.remoteDescriptionSet) {
+                this.handleCandidateFromServer(candidate);
+            }
+            else {
+                this.iceCandidateBuffer.push(candidate);
+            }
+        });
+    }
+    /**
+     * Handles an SDP offer received from the server.
+     * Creates a new peer connection, applies the remote offer,
+     * then responds with an SDP answer.
+     *
+     * The DataChannel is NOT created here — the server creates it
+     * and we receive it via the `datachannel` event on the peer connection.
+     */
+    async handleServerOffer(offer) {
+        Logger.info('Received offer from server, creating answer');
+        try {
+            this.remoteDescriptionSet = false;
+            this.iceCandidateBuffer.length = 0;
+            if (!this.pcClient) {
+                this.setupPeerConnection(this.cfg);
+            }
+            // Offer already defines media transceivers — don't add extras
+            await this.pcClient.setRemoteDescription(offer);
+            this.remoteDescriptionSet = true;
+            this.flushIceCandidateBuffer();
+            await this.createAnswer(this.pcClient);
+        }
+        catch (e) {
+            Logger.error('Failed to handle server offer', e);
+            this.store.dispatch(disconnectStream({
+                reason: DisconnectReason.WebRTCError,
+                message: 'WebRTCError: Failed to handle server offer',
+            }));
+        }
+    }
+    /**
+     * Handles an SDP answer received from the server in response to our offer.
+     * Applies the remote description and flushes any buffered ICE candidates.
+     */
+    async handleServerAnswer(answer) {
+        Logger.info('Received answer from server');
+        try {
+            await this.pcClient?.setRemoteDescription(answer);
+            this.remoteDescriptionSet = true;
+            this.flushIceCandidateBuffer();
+        }
+        catch (e) {
+            Logger.error('Failed to set remote description from answer', e);
+        }
+    }
+    /** Drains buffered ICE candidates after the remote description has been set */
+    flushIceCandidateBuffer() {
+        for (const candidate of this.iceCandidateBuffer) {
+            this.handleCandidateFromServer(candidate);
+        }
+        this.iceCandidateBuffer.length = 0;
+    }
+    /**
+     * Creates a client-initiated WebRTC offer and sends it to the server.
+     * When the client offers, it also creates the DataChannel.
+     * Used for peer reconnection through the existing signaling connection.
+     */
+    async createWebRtcOffer() {
+        Logger.info('Creating client-initiated offer');
+        try {
+            this.remoteDescriptionSet = false;
+            this.iceCandidateBuffer.length = 0;
+            if (!this.pcClient) {
+                this.setupPeerConnection(this.cfg);
+            }
+            // Client offers: transceivers first, then DC, then offer
+            await this.setupTransceiversAsync(this.pcClient);
+            this.dcClient = this.createDataChannel(this.pcClient, 'UnrealDcConnection', { ordered: true });
+            await this.createOffer(this.pcClient);
+        }
+        catch (e) {
+            Logger.error('Failed to create WebRTC offer', e);
+            this.store.dispatch(disconnectStream({
+                reason: DisconnectReason.WebRTCError,
+                message: 'WebRTCError: Offer Error',
+            }));
+        }
+    }
+    /**
+     * Initializes a new RTCPeerConnection with event handlers.
+     * Transceivers are NOT added here — the caller is responsible for adding
+     * them at the correct point depending on the negotiation flow.
+     */
+    setupPeerConnection(config) {
+        this.closePC();
+        Logger.log('Creating new RTCPeerConnection with config');
+        this.pcClient = new RTCPeerConnection(config);
+        this.commandTelemetryService.trackStartCommand('EXT-Browser ICE gathering');
+        this.commandTelemetryService.trackStartCommand('EXT-Browser ICE connection');
+        this.commandTelemetryService.trackStartCommand('EXT-Signaling state change');
+        this.handlePeerConnectionEvents(this.pcClient);
+        this.disconnect$.pipe(take(1)).subscribe(() => {
+            this.closePC();
+        });
+    }
+    createDataChannel(pc, label, options) {
+        const datachannel = pc.createDataChannel(label, options);
+        return this.setupDataChannelCallbacks(datachannel);
+    }
+    handleCandidateFromServer(iceCandidate) {
+        try {
+            const candidate = new RTCIceCandidate(iceCandidate);
+            Logger.info('[Unreal ICE candidate]', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|');
+            // If forcing TURN, reject any candidates not relay
+            if (this.forceTURN) {
+                if (candidate.candidate.indexOf('relay') < 0) {
+                    Logger.warn('Dropping candidate because it was not TURN relay.', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|');
+                    return;
+                }
+            }
+            this.pcClient?.addIceCandidate(candidate).catch((e) => {
+                Logger.warn('Failed to add ICE candidate', e);
+            });
+        }
+        catch (e) {
+            Logger.error('Error handleCandidateFromServer', e);
+        }
+    }
+    /**
+     * Reorders the `m=video` line in the SDP so that payload types matching
+     * the given H.264 `profile-level-id` appear first, making the browser
+     * prefer that profile during codec negotiation.
+     *
+     * A `profile-level-id` is a 3-byte hex string (`XXYYZZ`) defined in
+     * RFC 6184 that encodes three H.264 parameters:
+     * - **Profile IDC** (`XX`) — the H.264 profile.
+     * - **Profile IOP** (`YY`) — constraint flags that further narrow the profile.
+     * - **Level IDC** (`ZZ`) — the level, which caps resolution/framerate/bitrate.
+     *
+     * ### H.264 profiles relevant to Unreal Engine Pixel Streaming
+     *
+     * | profile-level-id | Profile                    | Level | Notes                                        |
+     * |------------------|----------------------------|-------|----------------------------------------------|
+     * | `42001f`         | Baseline                   | 3.1   | No B-frames, low latency; legacy devices     |
+     * | `42e01f`         | Constrained Baseline       | 3.1   | Widest HW decode support; **recommended**    |
+     * | `4d001f`         | Main                       | 3.1   | B-frames + CABAC; better compression          |
+     * | `4d4028`         | Main                       | 4.0   | Up to 1080p60; common desktop target          |
+     * | `640028`         | High                       | 4.0   | Best quality/compression; most GPUs support   |
+     * | `64002a`         | High                       | 4.2   | Up to 1080p120 or 4K30                        |
+     * | `640033`         | High                       | 5.1   | Up to 4K60; requires modern HW                |
+     * | `640034`         | High                       | 5.2   | Up to 4K120; high-end HW only                 |
+     * | `6e001f`         | High 10                    | 3.1   | 10-bit color; limited browser support          |
+     * | `f4001f`         | High 4:4:4 Predictive      | 3.1   | Lossless capable; rare in browsers             |
+     *
+     * UE Pixel Streaming defaults to Constrained Baseline (`42e01f`) or High (`6400xx`)
+     * depending on engine version and `WebRTC.H264Profile` CVar.
+     *
+     * We prioritize `42e01f` because it guarantees hardware decoding on
+     * virtually all client devices (desktop, mobile, embedded), avoiding
+     * fallback to software decoding or negotiation of a higher profile
+     * that the client GPU may not accelerate.
+     */
+    prioritizeH264Profile(sdp, profileLevelId) {
+        const lines = sdp.split('\r\n');
+        const targetPts = [];
+        for (const line of lines) {
+            if (line.startsWith('a=fmtp:') &&
+                line.toLowerCase().includes(`profile-level-id=${profileLevelId}`)) {
+                const pt = line.split(':')[1]?.split(' ')[0];
+                if (pt)
+                    targetPts.push(pt);
+            }
+        }
+        if (targetPts.length === 0)
+            return sdp;
+        return lines
+            .map((line) => {
+            if (!line.startsWith('m=video'))
+                return line;
+            const parts = line.split(' ');
+            // parts: m=video <port> <proto> <pt1> <pt2> ...
+            const header = parts.slice(0, 3);
+            const pts = parts.slice(3);
+            const prioritized = [
+                ...targetPts.filter((pt) => pts.includes(pt)),
+                ...pts.filter((pt) => !targetPts.includes(pt)),
+            ];
+            return [...header, ...prioritized].join(' ');
+        })
+            .join('\r\n');
+    }
+    mungeSDP(sdp) {
+        let mungedSDP = this.prioritizeH264Profile(sdp, '42e01f');
+        mungedSDP = mungedSDP.replace(/(a=fmtp:\d+ .*level-asymmetry-allowed=.*)\r\n/gm, '$1;x-google-start-bitrate=10000;x-google-max-bitrate=100000\r\n');
+        // Set max bitrate to highest bitrate Opus supports
+        let audioSDP = 'maxaveragebitrate=510000;';
+        if (this.useMic) {
+            // Set the max capture rate to 48khz (so we can send high-quality audio from mic)
+            audioSDP += 'sprop-maxcapturerate=48000;';
+        }
+        // Force mono or stereo based on whether ?forceMono was passed or not
+        audioSDP += this.forceMonoAudio ? 'stereo=0;' : 'stereo=1;';
+        // Enable in-band forward error correction for opus audio
+        audioSDP += 'useinbandfec=1';
+        // We use the line 'useinbandfec=1' (which Opus uses) to set our Opus specific audio parameters.
+        mungedSDP = mungedSDP?.replace('useinbandfec=1', audioSDP);
+        return mungedSDP;
+    }
+    /**
+     * Closes existing PeerConnection and DataChannel, resets negotiation state.
+     */
+    closePC() {
+        if (this.pcClient) {
+            Logger.warn('Closing existing PeerConnection');
+        }
+        this.pcClient?.close();
+        this.pcClient = null;
+        if (this.dcClient) {
+            Logger.warn('Closing existing DataChannel');
+        }
+        this.dcClient?.close();
+        this.dcClient = null;
+        this.remoteDescriptionSet = false;
+        this.iceCandidateBuffer.length = 0;
+    }
+    canSend() {
+        return this.dcClient && this.dcClient.readyState === 'open';
+    }
+    send(data) {
+        if (this.canSend()) {
+            this.dcClient?.send(data);
+        }
+        else {
+            Logger.colored('black', 'yellow', `DataChannel connection not prepared or in state: ${this.dcClient?.readyState}`);
+            // Trigger peer reconnection if DC is not open and we're not already reconnecting
+            this.tryReconnectOnSendFailure();
+        }
+    }
+    /**
+     * Attempts to reconnect the peer when send fails due to DataChannel not being open.
+     * This handles cases where the DC connection is broken but no error events are fired.
+     */
+    tryReconnectOnSendFailure() {
+        // Skip if already reconnecting or signaling is not connected
+        if (this.isReconnecting()) {
+            Logger.info('[Reconnect] Already reconnecting, skipping duplicate attempt');
+            return;
+        }
+        if (!this.signallingSrv.isConnected()) {
+            Logger.warn('[Reconnect] Cannot reconnect: Signaling not connected');
+            return;
+        }
+        // Check if DC exists but is in a non-open state (closing, closed, or connecting stuck)
+        const dcState = this.dcClient?.readyState;
+        if (dcState && dcState !== 'open') {
+            Logger.warn(`[Reconnect] DataChannel in "${dcState}" state during send, initiating peer reconnection`);
+            this.store.dispatch(reconnectPeer({ attempt: 1, maxAttempts: 3, delay: 0 }));
+        }
+    }
+    /**
+     * Reconnects only the WebRTC peer connection without re-establishing signaling.
+     * Closes the current PeerConnection and creates a new client-initiated offer
+     * through the existing WebSocket connection.
+     * @returns true if reconnection was initiated, false if signaling is not connected
+     */
+    reconnectPeer() {
+        if (!this.signallingSrv.isConnected()) {
+            Logger.error('[Reconnect] Cannot reconnect peer: Signaling not connected');
+            return false;
+        }
+        if (!this.cfg || Object.keys(this.cfg).length === 0) {
+            Logger.error('[Reconnect] Cannot reconnect peer: No config available');
+            return false;
+        }
+        Logger.info('[Reconnect] Initiating peer reconnection');
+        // Close only the PeerConnection, keep WebSocket alive
+        this.closePC();
+        // Create a new WebRTC offer using the stored config
+        void this.createWebRtcOffer();
+        return true;
+    }
+    setConfig(parOptions = {}) {
+        const urlParams = new URLSearchParams(window.location.search);
+        //**********************
+        //Config setup
+        //**********************
+        this.cfg = { ...parOptions.peerConnectionOptions };
+        this.forceTURN = urlParams.has('ForceTURN');
+        if (this.forceTURN) {
+            Logger.info('Forcing TURN usage by setting ICE Transport Policy in peer connection config.');
+            this.cfg.iceTransportPolicy = 'relay';
+        }
+        this.cfg.bundlePolicy = urlParams.has('ForceMaxBundle')
+            ? 'max-bundle'
+            : 'balanced';
+        this.cfg.iceCandidatePoolSize = 1;
+        // When ?useMic check for SSL or localhost
+        const isLocalhostConnection = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+        const isHttpsConnection = location.protocol === 'https:';
+        if (this.useMic && !isLocalhostConnection && !isHttpsConnection) {
+            this.useMic = false;
+            Logger.error('Microphone access in the browser will not work if you are not on HTTPS or localhost. Disabling mic access.');
+            Logger.error("For testing you can enable HTTP microphone access Chrome by visiting chrome://flags/ and enabling 'unsafely-treat-insecure-origin-as-secure'");
+        }
+        this.setupPeerConnection(this.cfg);
+    }
+    handlePeerConnectionEvents(pcClient) {
+        fromEvent(pcClient, 'signalingstatechange')
+            .pipe(map$1(() => this.pcClient?.signalingState), takeUntil(this.disconnect$))
+            .subscribe((state) => {
+            Logger.info('[Signaling state change] |', state, '|');
+            this.commandTelemetryService.trackStopCommand('EXT-Signaling state change', true, { state, multi: true });
+        });
+        fromEvent(pcClient, 'iceconnectionstatechange')
+            .pipe(map$1(() => this.pcClient?.iceConnectionState), takeUntil(this.disconnect$))
+            .subscribe((state) => {
+            Logger.info('[Browser ICE connection] |', state, '|');
+            this.commandTelemetryService.trackStopCommand('EXT-Browser ICE connection', true, { state, multi: true });
+        });
+        fromEvent(pcClient, 'icegatheringstatechange')
+            .pipe(map$1(() => this.pcClient?.iceGatheringState), takeUntil(this.disconnect$))
+            .subscribe((state) => {
+            Logger.info('[Browser ICE gathering] |', state, '|');
+            this.commandTelemetryService.trackStopCommand('EXT-Browser ICE gathering', true, { state, multi: true });
+        });
+        fromEvent(pcClient, 'connectionstatechange')
+            .pipe(map$1(() => this.pcClient?.connectionState), takeUntil(this.disconnect$))
+            .subscribe((state) => {
+            Logger.info('[RTCPeerConnection state] |', state, '|');
+        });
+        fromEvent(pcClient, 'icecandidate')
+            .pipe(map$1((e) => e.candidate), filter(Truthy), tap$1((candidate) => Logger.info('[Browser ICE candidate]', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|')), takeUntil(this.disconnect$))
+            .subscribe((candidate) => this.signallingSrv.send({ type: 'iceCandidate', candidate }));
+        // When the server creates the DataChannel (server-offer flow),
+        // we receive it here via the 'datachannel' event
+        fromEvent(pcClient, 'datachannel')
+            .pipe(tap$1((e) => Logger.info(`[DATACHANNEL] Received remote DC: label="${e.channel.label}" id=${e.channel.id} protocol="${e.channel.protocol}" ordered=${e.channel.ordered}`)), map$1((e) => e.channel), takeUntil(this.disconnect$))
+            .subscribe((datachannel) => {
+            this.dcClient = this.setupDataChannelCallbacks(datachannel);
+        });
+        const onTrack$ = fromEvent(pcClient, 'track').pipe(takeUntil(this.disconnect$), filter((e) => !!e.track), tap$1((e) => Logger.info('Got track - ' +
+            e.track.kind +
+            ' id=' +
+            e.track.id +
+            ' readyState=' +
+            e.track.readyState)), share());
+        onTrack$
+            .pipe(filter((e) => e.track.kind === 'audio'), map$1((e) => e.streams[0]))
+            .subscribe((stream) => this.videoService.attachAudioStream(stream));
+        onTrack$
+            .pipe(filter((e) => e.track.kind === 'video'), map$1((e) => e.streams[0]), tap$1(() => Logger.info('Set video source from video track ontrack.')))
+            .subscribe((stream) => {
+            if (this.pcClient) {
+                this.videoService.attachVideoStream(stream, this.pcClient);
+            }
+        });
+    }
+    async setupTransceiversAsync(pc) {
+        const hasTransceivers = pc.getTransceivers().length > 0;
+        // Set up a transceiver for getting UE video
+        pc.addTransceiver('video', { direction: 'recvonly' });
+        // Set up a transceiver for sending mic audio to UE and receiving audio from UE
+        if (!this.useMic) {
+            pc.addTransceiver('audio', { direction: 'recvonly' });
+        }
+        else {
+            const audioSendOptions = this.useMic
+                ? {
+                    autoGainControl: false,
+                    channelCount: 1,
+                    echoCancellation: false,
+                    latency: 0,
+                    noiseSuppression: false,
+                    sampleRate: 48000,
+                    sampleSize: 16,
+                    volume: 1.0,
+                }
+                : false;
+            // Note using mic on android chrome requires SSL or chrome://flags/ "unsafely-treat-insecure-origin-as-secure"
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: false,
+                audio: audioSendOptions,
+            });
+            if (stream) {
+                if (hasTransceivers) {
+                    for (const transceiver of pc.getTransceivers()) {
+                        if (transceiver &&
+                            transceiver.receiver &&
+                            transceiver.receiver.track &&
+                            transceiver.receiver.track.kind === 'audio') {
+                            for (const track of stream.getTracks()) {
+                                if (track.kind && track.kind === 'audio') {
+                                    await transceiver.sender.replaceTrack(track);
+                                    transceiver.direction = 'sendrecv';
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    for (const track of stream.getTracks()) {
+                        if (track.kind && track.kind === 'audio') {
+                            pc.addTransceiver(track, { direction: 'sendrecv' });
+                        }
+                    }
+                }
+            }
+            else {
+                pc.addTransceiver('audio', { direction: 'recvonly' });
+            }
+        }
+    }
+    setupDataChannelCallbacks(datachannel) {
+        try {
+            Logger.log(`[DATACHANNEL] Setting up datachannel "${datachannel.label}" callbacks...`);
+            this.commandTelemetryService.trackStartCommand('EXT-DataChannel Connection');
+            // Inform browser we would like binary data as an ArrayBuffer (FF chooses Blob by default!)
+            datachannel.binaryType = 'arraybuffer';
+            fromEvent(datachannel, 'close')
+                .pipe(
+            // Only dispatch disconnect if not already reconnecting to avoid infinite loops
+            filter(() => !this.isReconnecting()), take(1))
+                .subscribe((e) => {
+                Logger.warn(`[DATACHANNEL] Data channel disconnected: ${datachannel.label}(${datachannel.id})`, e);
+                this.store.dispatch(disconnectStream({
+                    reason: DisconnectReason.DataChannelClosed,
+                    message: 'DataChannelClosed',
+                }));
+            });
+            fromEvent(datachannel, 'error')
+                .pipe(takeUntil(this.disconnect$))
+                .subscribe((e) => {
+                const message = `[DATACHANNEL] Data channel "${datachannel.label}" error. id:${datachannel.id}`;
+                Logger.error(message, e);
+            });
+            fromEvent(datachannel, 'open')
+                .pipe(tap$1(() => {
+                Logger.info(`[DATACHANNEL] Data channel "${datachannel.label}" connected. id:${datachannel.id}`);
+            }), takeUntil(this.disconnect$))
+                .subscribe(() => {
+                this.commandTelemetryService.trackStopCommand('EXT-DataChannel Connection');
+                this.onDataChannelConnected();
+            });
+            fromEvent(datachannel, 'message')
+                .pipe(
+            /* tap((e: MessageEvent) => {
+              const view = new Uint8Array(e.data);
+              Logger.info(
+                `[DATACHANNEL] Message received on "${datachannel.label}" id=${datachannel.id}, byteCode=${view[0]}, size=${view.byteLength}`,
+              );
+            }),*/
+            map$1((e) => e.data), takeUntil(this.disconnect$))
+                .subscribe((data) => this.onDataChannelMessage$.next(data));
+            return datachannel;
+        }
+        catch (e) {
+            Logger.warn('[DATACHANNEL] Datachannel setup caused an exception: ', e);
+            return null;
+        }
+    }
+    onDataChannelConnected() {
+        let statusMessage = 'Session connected, video stream starting.';
+        if (navigator.userAgent.includes('Firefox')) {
+            statusMessage +=
+                '\n If you are experiencing connection problems please try Google Chrome';
+        }
+        this.store.dispatch(dataChannelConnected({ statusMessage }));
+    }
+    /**
+     * Creates an SDP offer, applies SDP munging, sets it as local description,
+     * and sends it to the server via signaling.
+     * Transceivers already configure media directions, so deprecated
+     * offerToReceive* options are not used.
+     */
+    async createOffer(pcClient) {
+        try {
+            const offer = await pcClient.createOffer();
+            offer.sdp = this.mungeSDP(offer.sdp ?? '');
+            await pcClient.setLocalDescription(offer);
+            this.signallingSrv.send(offer);
+        }
+        catch {
+            Logger.error("Couldn't create offer");
+        }
+    }
+    /**
+     * Creates an SDP answer, applies SDP munging, sets it as local description,
+     * and sends it to the server via signaling.
+     */
+    async createAnswer(pcClient) {
+        try {
+            const answer = await pcClient.createAnswer();
+            answer.sdp = this.mungeSDP(answer.sdp ?? '');
+            await pcClient.setLocalDescription(answer);
+            this.signallingSrv.send(answer);
+        }
+        catch (e) {
+            Logger.error("Couldn't create answer", e);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebRtcPlayerService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebRtcPlayerService2 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebRtcPlayerService2, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 function provideAngularUnrealModule(config) {
     return makeEnvironmentProviders([
         provideState(commandsFeature),
@@ -5609,7 +6151,12 @@ function provideAngularUnrealModule(config) {
         ConsoleExtensionsService,
         InputService,
         VideoService,
-        WebRtcPlayerService,
+        {
+            provide: WebRtcPlayerService,
+            useClass: config?.newWebRtcConnector
+                ? WebRtcPlayerService2
+                : WebRtcPlayerService,
+        },
         RegionsPingService,
         FileReceiverService,
         FileHandlerService,