@3dsource/angular-unreal-module 0.0.188 → 0.0.189

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

@@ -3,7 +3,7 @@ import { input, output, ChangeDetectionStrategy, Component, inject, DestroyRef,
 import { NgTemplateOutlet, NgOptimizedImage, JsonPipe } from '@angular/common';
 import { createAction, props, createReducer, on, createFeature, createSelector, Store, provideState } from '@ngrx/store';
 import { Actions, ofType, createEffect, provideEffects } from '@ngrx/effects';
-import { Subject, skip, share, timer, of, take, defer, switchMap, from, throwError, Observable, EMPTY, retry, merge, timeout as timeout$1, repeat, BehaviorSubject, interval, map as map$1, takeUntil as takeUntil$1, fromEvent, tap as tap$1, throttleTime, delay, concat, debounceTime, mergeMap, startWith, takeWhile, NEVER, ignoreElements, scan, timestamp, pairwise, concatMap, animationFrameScheduler, shareReplay, firstValueFrom, asyncScheduler, filter as filter$1, withLatestFrom as withLatestFrom$1, Subscription, bufferTime, combineLatestWith } from 'rxjs';
+import { Subject, skip, share, timer, of, take, defer, switchMap, from, throwError, Observable, EMPTY, retry, merge, timeout as timeout$1, repeat, BehaviorSubject, interval, takeUntil as takeUntil$1, fromEvent, tap as tap$1, throttleTime, map as map$1, delay, concat, debounceTime, mergeMap, startWith, takeWhile, NEVER, ignoreElements, scan, timestamp, pairwise, concatMap, animationFrameScheduler, shareReplay, firstValueFrom, asyncScheduler, filter as filter$1, withLatestFrom as withLatestFrom$1, Subscription, bufferTime, combineLatestWith } from 'rxjs';
 import { UNREAL_CONFIG } from '@3dsource/angular-unreal-module/config';
 export { UNREAL_CONFIG } from '@3dsource/angular-unreal-module/config';
 import { tap, filter, takeUntil, catchError, map, timeout, finalize, first, switchMap as switchMap$1, distinctUntilChanged, withLatestFrom, exhaustMap, takeWhile as takeWhile$1, debounceTime as debounceTime$1, take as take$1, startWith as startWith$1 } from 'rxjs/operators';
@@ -2991,6 +2991,9 @@ class VideoService extends SubService {
         // would drop that emission, so the stats interval (and `setViewportReady`,
         // gated on `framesPerSecond`) would never start.
         this.videoTrack$ = new BehaviorSubject(null);
+        /** Bumped per attached peer connection: candidate-pair ids are only unique
+         *  inside one connection, so the epoch scopes the telemetry route ref. */
+        this.pcEpoch = 0;
         this.VideoEncoderQP = 0;
         this.aggregatedStats = {};
         /**
@@ -2999,7 +3002,7 @@ class VideoService extends SubService {
         this.videoStats$ = this.videoTrack$.pipe(
         // If videoTrack$ emits null, switch to EMPTY → the current interval is canceled.
         switchMap$1((track) => track
-            ? interval(250).pipe(map$1(() => track.pcClient), switchMap$1((pcClient) => from(this.getStats(pcClient))), filter(Truthy))
+            ? interval(250).pipe(switchMap$1(() => from(this.getStats(track.pcClient, track.pcEpoch))), filter(Truthy))
             : of(null)), filter(Truthy), share());
         this.destroyAbort = new AbortController();
         // Teardown is wired ONCE here instead of per `create()`. The per-create
@@ -3082,7 +3085,7 @@ class VideoService extends SubService {
             this.audio.srcObject = new MediaStream(audioTracks);
             this.playAudio(this.audio);
         }
-        this.videoTrack$.next({ stream, pcClient });
+        this.videoTrack$.next({ stream, pcClient, pcEpoch: ++this.pcEpoch });
         // Safari does not reliably honor the autoplay attribute when srcObject
         // is bound post-creation for a WebRTC MediaStream; trigger play()
         // explicitly and let safePlay() fall back if Safari refuses.
@@ -3165,7 +3168,7 @@ class VideoService extends SubService {
             signal: this.destroyAbort.signal,
         });
     }
-    async getStats(pcClient) {
+    async getStats(pcClient, pcEpoch = 0) {
         if (!pcClient || pcClient.connectionState === 'closed') {
             return null;
         }
@@ -3176,7 +3179,7 @@ class VideoService extends SubService {
             if (!this.video) {
                 return null;
             }
-            return this.generateAggregatedStatsFunction(stats);
+            return this.generateAggregatedStatsFunction(stats, pcEpoch);
         }
         catch (err) {
             // Handle InvalidStateError or any transient WebRTC errors gracefully
@@ -3187,8 +3190,10 @@ class VideoService extends SubService {
             throw err;
         }
     }
-    generateAggregatedStatsFunction(stats) {
+    generateAggregatedStatsFunction(stats, pcEpoch = 0) {
         const newStat = {};
+        let selectedPairId;
+        let flaggedPairId;
         // store each type of codec we can get stats on
         newStat.codecs = {};
         newStat.currentRoundTripTime = -1;
@@ -3197,7 +3202,9 @@ class VideoService extends SubService {
             if (report.type === 'inbound-rtp' && report.kind === 'video') {
                 this.applyInboundVideoReport(newStat, report);
             }
-            // Only read RTT from the *nominated* ICE candidate pair. The
+            // Fallback RTT for when no selected pair resolves —
+            // `applySelectedPair` overrides it with the selected pair's RTT.
+            // Only read it from the *nominated* ICE candidate pair. The
             // stats report contains multiple `candidate-pair` entries (one
             // per host/srflx/relay combination tried during ICE); only the
             // nominated pair carries a meaningful `currentRoundTripTime`,
@@ -3212,9 +3219,13 @@ class VideoService extends SubService {
                 Object.hasOwn(report, 'currentRoundTripTime')) {
                 newStat.currentRoundTripTime = report.currentRoundTripTime ?? 0;
             }
-            if (report.type === 'transport' &&
-                Object.hasOwn(report, 'selectedCandidatePairId')) {
-                this.applySelectedPair(newStat, stats, report.selectedCandidatePairId);
+            if (report.type === 'transport' && report.selectedCandidatePairId) {
+                selectedPairId = report.selectedCandidatePairId;
+            }
+            // Firefox reports no `transport` stats; its pre-standard `selected`
+            // flag marks the same pair and is used only when the transport is absent.
+            if (report.type === 'candidate-pair' && report.selected === true) {
+                flaggedPairId = report.id;
             }
             // Store mimetype of each codec
             if (Object.hasOwn(newStat, 'codecs') &&
@@ -3227,6 +3238,7 @@ class VideoService extends SubService {
                     .replace('audio/', '');
             }
         });
+        this.applySelectedPair(newStat, stats, selectedPairId ?? flaggedPairId, pcEpoch);
         this.applySessionTotals(newStat);
         this.aggregatedStats = newStat;
         return this.onAggregatedStats(newStat);
@@ -3268,24 +3280,37 @@ class VideoService extends SubService {
         }
     }
     /**
-     * Resolves the transport's selected candidate pair into the local/remote
-     * descriptors shown in the stats overlay. Silently skips when the pair (or
-     * either of its candidates) is missing from this report.
+     * Resolves the selected candidate pair into its route description, byte
+     * counters and RTT. Anything missing from this report stays unknown, and a
+     * malformed report never throws into the stats loop — the route is optional,
+     * playback is not.
      */
-    applySelectedPair(newStat, stats, selectedCandidatePairId) {
-        if (!selectedCandidatePairId) {
+    applySelectedPair(newStat, stats, pairId, pcEpoch) {
+        newStat.selectedPair = null;
+        if (!pairId) {
             return;
         }
-        const selectedPair = stats.get(selectedCandidatePairId);
-        if (!selectedPair) {
-            return;
+        try {
+            const pair = stats.get(pairId);
+            if (!pair) {
+                return;
+            }
+            newStat.selectedPair = {
+                ref: `${pcEpoch}:${pairId}`,
+                timestamp: finite(pair.timestamp),
+                bytesReceived: finite(pair.bytesReceived),
+                bytesSent: finite(pair.bytesSent),
+                local: candidateInfo(stats.get(pair.localCandidateId), true),
+                remote: candidateInfo(stats.get(pair.remoteCandidateId), false),
+            };
+            const rtt = finite(pair.currentRoundTripTime);
+            if (rtt !== undefined) {
+                newStat.currentRoundTripTime = rtt;
+            }
+        }
+        catch {
+            newStat.selectedPair = null;
         }
-        const local = stats.get(selectedPair.localCandidateId);
-        const remote = stats.get(selectedPair.remoteCandidateId);
-        newStat.selectedPair = {
-            local: { type: local?.candidateType, url: local?.url },
-            remote: { type: remote?.candidateType, url: remote?.url },
-        };
     }
     /** Per-session values that do not come from a single report. */
     applySessionTotals(newStat) {
@@ -3401,6 +3426,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 function pinBaseline(pinned, current) {
     return (pinned || current);
 }
+function finite(value) {
+    return typeof value === 'number' && Number.isFinite(value)
+        ? value
+        : undefined;
+}
+/**
+ * The route-relevant fields of one candidate. The address is uploaded for a
+ * relay candidate only — host / srflx addresses identify the user, a relay
+ * address identifies the TURN provider's region.
+ */
+function candidateInfo(candidate, isLocal) {
+    if (!candidate) {
+        return {};
+    }
+    const isRelay = candidate.candidateType === 'relay';
+    return {
+        type: candidate.candidateType,
+        protocol: candidate.protocol,
+        ...(isRelay
+            ? {
+                address: candidate.address ?? undefined,
+                port: finite(candidate.port),
+            }
+            : {}),
+        ...(isLocal
+            ? { url: candidate.url, relayProtocol: candidate.relayProtocol }
+            : {}),
+    };
+}
 /**
  * Whether a rejected `play()` was blocked by the browser autoplay policy.
  * Narrows an `unknown` rejection value without assuming it is an Error — a
@@ -6799,6 +6853,56 @@ class CounterWindow {
     }
 }
 
+/**
+ * Turns one `stream.sample` window of 250 ms stats reads into its route
+ * fields: the runs of reads that shared a selected pair, and the description
+ * of every pair this session has not described yet.
+ *
+ * One per session, because the described refs are that session's: the
+ * collector files each session separately, so every file must describe the
+ * routes it references.
+ *
+ * Only the reads that are there are reported. A read without a selected pair
+ * closes the run, and nothing is interpolated across it — the server sees the
+ * gap between two segments and keeps it unattributed.
+ */
+class RouteLog {
+    constructor() {
+        this.described = new Set();
+    }
+    take(samples) {
+        const routeSegments = [];
+        const routes = {};
+        let open = null;
+        for (const { aggregatedStats } of samples) {
+            const pair = aggregatedStats.selectedPair;
+            if (!pair) {
+                open = null;
+                continue;
+            }
+            const ts = pair.timestamp === undefined ? null : Math.round(pair.timestamp);
+            const rx = pair.bytesReceived ?? null;
+            const tx = pair.bytesSent ?? null;
+            if (open?.ref === pair.ref) {
+                open.ts[1] = ts;
+                open.rx[1] = rx;
+                open.tx[1] = tx;
+                continue;
+            }
+            open = { ref: pair.ref, ts: [ts, ts], rx: [rx, rx], tx: [tx, tx] };
+            routeSegments.push(open);
+            if (!this.described.has(pair.ref)) {
+                this.described.add(pair.ref);
+                routes[pair.ref] = { local: pair.local, remote: pair.remote };
+            }
+        }
+        return {
+            ...(routeSegments.length ? { routeSegments } : {}),
+            ...(Object.keys(routes).length ? { routes } : {}),
+        };
+    }
+}
+
 /**
  * Telemetry for the WebRTC stream lifecycle.
  *
@@ -7217,6 +7321,7 @@ class StreamStatusTelemetryService2 {
             seq: 0,
             sub,
             bytes: new CounterWindow(),
+            routes: new RouteLog(),
             qpBad: false,
             fpsLow: false,
             maxFpsTarget: UNLIMITED_REFERENCE_FPS,
@@ -7661,6 +7766,7 @@ class StreamStatusTelemetryService2 {
                 width: latest?.frameWidth,
                 height: latest?.frameHeight,
             },
+            ...s.routes.take(samples),
         });
         this.evaluateAnomalies(fps, qp);
     }
@@ -7922,7 +8028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /** Compact one side of an ICE candidate pair to `"type (url)"` or just
  *  `type` (host candidates have no URL). */
 function fmtCandidate(c) {
-    if (!c) {
+    if (!c?.type) {
         return null;
     }
     return c.url ? `${c.type} (${c.url})` : c.type;
@@ -8695,17 +8801,42 @@ class VideoStatsComponent {
             value: this.stats()?.aggregatedStats.VideoEncoderQP ?? 0,
         }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "videoQP" }] : /* istanbul ignore next */ []));
-        this.videoStatus = computed(() => {
+        /** What the window shows: the raw stats plus the few display-only values
+         *  derived here. Shared by the text rows and the graphs. */
+        this.view = computed(() => {
             const event = this.stats();
-            if (!this.isDevMode || !event) {
+            if (!event) {
                 return undefined;
             }
-            const data = {
-                ...event.aggregatedStats,
+            const stats = event.aggregatedStats;
+            const pair = stats.selectedPair;
+            const view = {
+                ...stats,
                 quality: event.quality,
+                MBytesReceived: typeof stats.bytesReceived === 'number'
+                    ? +(stats.bytesReceived / 1e6).toFixed(2)
+                    : undefined,
+                // Only the stable part of the route: counters, stats timestamp and ref
+                // change on every tick and would make the row jump.
+                selectedPair: pair && {
+                    local: {
+                        type: pair.local.type,
+                        protocol: pair.local.protocol,
+                        url: pair.local.url,
+                    },
+                    remote: { type: pair.remote.type, protocol: pair.remote.protocol },
+                },
             };
+            return view;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        this.videoStatus = computed(() => {
+            const view = this.view();
+            if (!this.isDevMode || !view) {
+                return undefined;
+            }
             return this.fields
-                .map((key) => ({ key, value: data[key] }))
+                .map((key) => ({ key, value: view[key] }))
                 .filter((r) => !this.elementsToShow().includes(r.key));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "videoStatus" }] : /* istanbul ignore next */ []));
@@ -8740,9 +8871,7 @@ class VideoStatsComponent {
                 Math.floor(Math.random() * 16777216)
                     .toString(16)
                     .padStart(6, '0'),
-            stat: computed(() => ({
-                value: this.stats()?.aggregatedStats[key],
-            })),
+            stat: computed(() => ({ value: this.view()?.[key] })),
         }));
         this.graphList = computed(() => this.graphListItems.filter((r) => this.elementsToShow().includes(r.key)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "graphList" }] : /* istanbul ignore next */ []));