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

package/{types → dist/types}/WebXR/WebXRController.d.ts

@@ -1,42 +1,42 @@
-/// <reference types="webxr" />
-import { WebRtcPlayerController } from '../WebRtcPlayer/WebRtcPlayerController';
-export declare class WebXRController {
-    private xrSession;
-    private xrRefSpace;
-    private gl;
-    private xrViewerPose;
-    private EPSILON;
-    private positionLocation;
-    private texcoordLocation;
-    private positionBuffer;
-    private texcoordBuffer;
-    private videoTexture;
-    private prevVideoWidth;
-    private prevVideoHeight;
-    private webRtcController;
-    private xrGamepadController;
-    private leftView;
-    private rightView;
-    private lastSentLeftEyeProj;
-    private lastSentRightEyeProj;
-    private lastSentRelativeLeftEyePos;
-    private lastSentRelativeRightEyePos;
-    onSessionStarted: EventTarget;
-    onSessionEnded: EventTarget;
-    onFrame: EventTarget;
-    constructor(webRtcPlayerController: WebRtcPlayerController);
-    xrClicked(): void;
-    onXrSessionEnded(): void;
-    initGL(): void;
-    initShaders(): void;
-    updateVideoTexture(): void;
-    initBuffers(): void;
-    onXrSessionStarted(session: XRSession): void;
-    areArraysEqual(a: Float32Array, b: Float32Array): boolean;
-    arePointsEqual(a: DOMPointReadOnly, b: DOMPointReadOnly): boolean;
-    sendXRDataToUE(): void;
-    onXrFrame(time: DOMHighResTimeStamp, frame: XRFrame): void;
-    private updateViews;
-    private render;
-    static isSessionSupported(mode: XRSessionMode): Promise<boolean>;
-}
+/// <reference types="webxr" />
+import { WebRtcPlayerController } from '../WebRtcPlayer/WebRtcPlayerController';
+export declare class WebXRController {
+    private xrSession;
+    private xrRefSpace;
+    private gl;
+    private xrViewerPose;
+    private EPSILON;
+    private positionLocation;
+    private texcoordLocation;
+    private positionBuffer;
+    private texcoordBuffer;
+    private videoTexture;
+    private prevVideoWidth;
+    private prevVideoHeight;
+    private webRtcController;
+    private xrGamepadController;
+    private leftView;
+    private rightView;
+    private lastSentLeftEyeProj;
+    private lastSentRightEyeProj;
+    private lastSentRelativeLeftEyePos;
+    private lastSentRelativeRightEyePos;
+    onSessionStarted: EventTarget;
+    onSessionEnded: EventTarget;
+    onFrame: EventTarget;
+    constructor(webRtcPlayerController: WebRtcPlayerController);
+    xrClicked(): void;
+    onXrSessionEnded(): void;
+    initGL(): void;
+    initShaders(): void;
+    updateVideoTexture(): void;
+    initBuffers(): void;
+    onXrSessionStarted(session: XRSession): void;
+    areArraysEqual(a: Float32Array, b: Float32Array): boolean;
+    arePointsEqual(a: DOMPointReadOnly, b: DOMPointReadOnly): boolean;
+    sendXRDataToUE(): void;
+    onXrFrame(time: DOMHighResTimeStamp, frame: XRFrame): void;
+    private updateViews;
+    private render;
+    static isSessionSupported(mode: XRSessionMode): Promise<boolean>;
+}

package/{types → dist/types}/pixelstreamingfrontend.d.ts

@@ -1,22 +1,23 @@
-export { WebRtcPlayerController } from './WebRtcPlayer/WebRtcPlayerController';
-export { WebXRController } from './WebXR/WebXRController';
-export { Config, ControlSchemeType, Flags, NumericParameters, TextParameters, OptionParameters, FlagsIds, NumericParametersIds, TextParametersIds, OptionParametersIds, AllSettings } from './Config/Config';
-export { SettingBase } from './Config/SettingBase';
-export { SettingFlag } from './Config/SettingFlag';
-export { SettingNumber } from './Config/SettingNumber';
-export { SettingOption } from './Config/SettingOption';
-export { SettingText } from './Config/SettingText';
-export { PixelStreaming } from './PixelStreaming/PixelStreaming';
-export { AFKController as AfkLogic } from './AFK/AFKController';
-export { LatencyTestResults } from './DataChannel/LatencyTestResults';
-export { EncoderSettings, InitialSettings, WebRTCSettings } from './DataChannel/InitialSettings';
-export { AggregatedStats } from './PeerConnectionController/AggregatedStats';
-export { InputCoordTranslator, UntranslatedCoordUnsigned as UnquantizedAndDenormalizeUnsigned } from './Util/InputCoordTranslator';
-export { MessageDirection } from './UeInstanceMessage/StreamMessageController';
-export { CandidatePairStats } from './PeerConnectionController/CandidatePairStats';
-export { CandidateStat } from './PeerConnectionController/CandidateStat';
-export { DataChannelStats } from './PeerConnectionController/DataChannelStats';
-export { InboundAudioStats, InboundVideoStats } from './PeerConnectionController/InboundRTPStats';
-export { OutBoundVideoStats } from './PeerConnectionController/OutBoundRTPStats';
-export * from './Util/EventEmitter';
-export * from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
+export { WebRtcPlayerController } from './WebRtcPlayer/WebRtcPlayerController';
+export { WebXRController } from './WebXR/WebXRController';
+export { Config, ControlSchemeType, Flags, NumericParameters, TextParameters, OptionParameters, FlagsIds, NumericParametersIds, TextParametersIds, OptionParametersIds, AllSettings } from './Config/Config';
+export { SettingBase } from './Config/SettingBase';
+export { SettingFlag } from './Config/SettingFlag';
+export { SettingNumber } from './Config/SettingNumber';
+export { SettingOption } from './Config/SettingOption';
+export { SettingText } from './Config/SettingText';
+export { PixelStreaming } from './PixelStreaming/PixelStreaming';
+export { AFKController as AfkLogic } from './AFK/AFKController';
+export { LatencyTestResults } from './DataChannel/LatencyTestResults';
+export { EncoderSettings, InitialSettings, WebRTCSettings, PixelStreamingSettings } from './DataChannel/InitialSettings';
+export { AggregatedStats } from './PeerConnectionController/AggregatedStats';
+export { InputCoordTranslator, UntranslatedCoordUnsigned as UnquantizedAndDenormalizeUnsigned } from './Util/InputCoordTranslator';
+export { MessageDirection } from './UeInstanceMessage/StreamMessageController';
+export { CandidatePairStats } from './PeerConnectionController/CandidatePairStats';
+export { CandidateStat } from './PeerConnectionController/CandidateStat';
+export { DataChannelStats } from './PeerConnectionController/DataChannelStats';
+export { InboundAudioStats, InboundVideoStats } from './PeerConnectionController/InboundRTPStats';
+export { OutBoundVideoStats } from './PeerConnectionController/OutBoundRTPStats';
+export * from './DataChannel/DataChannelLatencyTestResults';
+export * from './Util/EventEmitter';
+export * from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';

package/package.json

@@ -1,23 +1,21 @@
 {
     "name": "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5",
-    "version": "0.2.1",
+    "version": "0.3.0",
     "description": "Frontend library for Unreal Engine 5.5 Pixel Streaming",
-    "main": "dist/lib-pixelstreamingfrontend.js",
-    "module": "dist/lib-pixelstreamingfrontend.esm.js",
-    "types": "types/pixelstreamingfrontend.d.ts",
+    "main": "dist/commonjs/pixelstreamingfrontend.js",
+    "module": "dist/esm/pixelstreamingfrontend.js",
+    "types": "dist/types/pixelstreamingfrontend.d.ts",
     "sideEffects": false,
     "scripts": {
-        "compile": "tsc --build --clean && tsc",
-        "build": "webpack --config webpack.prod.js",
-        "build-all": "cd ../../Common && npm install && npm run build && cd ../Frontend/library && npm link ../../Common && webpack --config webpack.prod.js",
-        "build-dev": "cd ../../Common && npm install && npm run build && cd ../Frontend/library && npm link ../../Common && webpack --config webpack.dev.js",
+        "compile": "tsc --project tsconfig.esm.json && tsc --project tsconfig.cjs.json",
+        "build": "npm run compile",
+        "build-all": "cd ../../Common && npm install && npm run build && cd ../Frontend/library && npm install && npm run build",
         "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
         "test": "jest --detectOpenHandles --coverage=true",
         "spellcheck": "cspell \"{README.md,.github/*.md,src/**/*.ts}\""
     },
     "devDependencies": {
         "@types/jest": "27.5.1",
-        "@types/webxr": "^0.5.1",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "cspell": "^4.1.0",
         "eslint": "^8.11.0",
@@ -27,14 +25,12 @@
         "jest-environment-jsdom": "27.5.1",
         "prettier": "3.3.3",
         "ts-jest": "27.1.5",
-        "ts-loader": "^9.4.2",
         "typedoc": "^0.23.24",
-        "typescript": "^4.9.4",
-        "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.1"
+        "typescript": "^4.9.4"
     },
     "dependencies": {
-        "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "^0.0.15",
+        "@types/webxr": "^0.5.1",
+        "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "^0.1.0",
         "sdp": "^3.1.0"
     },
     "repository": {

package/readme.md

@@ -11,5 +11,13 @@ See [lib-pixelstreamingfrontend-ui](/Frontend/implementations/typescript) for an
 - Opens a data channel connection sending and receiving custom data (in addition to input).
 
 ### Adding it to your project
-`npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.4`
+`npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.5`
 
+### How this library is built
+The NPM packages supports:
+- ES6 module usage
+- CommonJS usage
+- Type definitions
+- Source maps
+
+**Note:** The NPM package does not contain a minified/bundled output, this is up to the user to do this in their application.

package/src/Config/Config.ts

@@ -188,11 +188,77 @@ export class Config {
                 settings && Object.prototype.hasOwnProperty.call(settings, OptionParameters.StreamerId)
                     ? settings[OptionParameters.StreamerId]
                     : '',
-                [],
+                settings && Object.prototype.hasOwnProperty.call(settings, OptionParameters.StreamerId)
+                    ? [settings[OptionParameters.StreamerId]]
+                    : undefined,
                 useUrlParams
             )
         );
 
+        const getBrowserSupportedVideoCodecs = function (): Array<string> {
+            const browserSupportedCodecs: Array<string> = [];
+            // Try get the info needed from the RTCRtpReceiver. This is only available on chrome
+            if (!RTCRtpReceiver.getCapabilities) {
+                Logger.Warning(
+                    'RTCRtpReceiver.getCapabilities API is not available in your browser, defaulting to guess that we support H.264.'
+                );
+                browserSupportedCodecs.push(
+                    'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f'
+                );
+                return browserSupportedCodecs;
+            }
+
+            const matcher = /(VP\d|H26\d|AV1).*/;
+            const codecs = RTCRtpReceiver.getCapabilities('video').codecs;
+            codecs.forEach((codec) => {
+                const str = codec.mimeType.split('/')[1] + ' ' + (codec.sdpFmtpLine || '');
+                const match = matcher.exec(str);
+                if (match !== null) {
+                    browserSupportedCodecs.push(str);
+                }
+            });
+            return browserSupportedCodecs;
+        };
+
+        const getDefaultVideoCodec = function (): string {
+            const videoCodecs = getBrowserSupportedVideoCodecs();
+            // If only one option, then select that.
+            if (videoCodecs.length == 1) {
+                return videoCodecs[0];
+            } else if (videoCodecs.length > 0) {
+                const defaultCodec = videoCodecs[0];
+                for (const codec of videoCodecs) {
+                    if (codec.startsWith('H264')) {
+                        return codec;
+                    }
+                }
+                return defaultCodec;
+            }
+
+            Logger.Error('Could not find any reasonable video codec to assign as a default.');
+            return '';
+        };
+
+        const matchSpecifiedCodecToClosestSupported = function (specifiedCodec: string): string {
+            const browserSupportedCodecs: Array<string> = getBrowserSupportedVideoCodecs();
+
+            // Codec supplied in url param is an exact match for the browser codec.
+            // (e.g. H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f)
+            if (browserSupportedCodecs.includes(specifiedCodec)) {
+                return specifiedCodec;
+            }
+
+            // Try to match the start of whatever is passed into the url parameter with what the browser supports
+            for (const browserCodec of browserSupportedCodecs) {
+                if (browserCodec.startsWith(specifiedCodec)) {
+                    return browserCodec;
+                }
+            }
+
+            // If we weren't able to match, just return the codec as from the URL as-is.
+            return specifiedCodec;
+        };
+
         /**
          * Enum Parameters
          */
@@ -202,29 +268,12 @@ export class Config {
                 OptionParameters.PreferredCodec,
                 'Preferred Codec',
                 'The preferred codec to be used during codec negotiation',
-                'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f',
                 settings && Object.prototype.hasOwnProperty.call(settings, OptionParameters.PreferredCodec)
-                    ? [settings[OptionParameters.PreferredCodec]]
-                    : (function (): Array<string> {
-                          const browserSupportedCodecs: Array<string> = [];
-                          // Try get the info needed from the RTCRtpReceiver. This is only available on chrome
-                          if (!RTCRtpReceiver.getCapabilities) {
-                              browserSupportedCodecs.push('Only available on Chrome');
-                              return browserSupportedCodecs;
-                          }
-
-                          const matcher = /(VP\d|H26\d|AV1).*/;
-                          const codecs = RTCRtpReceiver.getCapabilities('video').codecs;
-                          codecs.forEach((codec) => {
-                              const str = codec.mimeType.split('/')[1] + ' ' + (codec.sdpFmtpLine || '');
-                              const match = matcher.exec(str);
-                              if (match !== null) {
-                                  browserSupportedCodecs.push(str);
-                              }
-                          });
-                          return browserSupportedCodecs;
-                      })(),
-                useUrlParams
+                    ? matchSpecifiedCodecToClosestSupported(settings[OptionParameters.PreferredCodec])
+                    : getDefaultVideoCodec(),
+                getBrowserSupportedVideoCodecs(),
+                useUrlParams,
+                matchSpecifiedCodecToClosestSupported
             )
         );
 
@@ -506,7 +555,7 @@ export class Config {
                 'AFK timeout',
                 'The time (in seconds) it takes for the application to time out if AFK timeout is enabled.',
                 0 /*min*/,
-                600 /*max*/,
+                null /*max*/,
                 settings && Object.prototype.hasOwnProperty.call(settings, NumericParameters.AFKTimeoutSecs)
                     ? settings[NumericParameters.AFKTimeoutSecs]
                     : 120 /*value*/,
@@ -521,7 +570,7 @@ export class Config {
                 'AFK countdown',
                 'The time (in seconds) for a user to respond before the stream is ended after an AFK timeout.',
                 10 /*min*/,
-                180 /*max*/,
+                null /*max*/,
                 10 /*value*/,
                 useUrlParams
             )

package/src/Config/SettingNumber.ts

@@ -7,8 +7,8 @@ import { SettingBase } from './SettingBase';
  * A number setting object with a text label. Min and max limit the range of allowed values.
  */
 export class SettingNumber<CustomIds extends string = NumericParametersIds> extends SettingBase {
-    _min: number;
-    _max: number;
+    _min: number | null;
+    _max: number | null;
 
     id: NumericParametersIds | CustomIds;
     onChangeEmit: (changedValue: number) => void;
@@ -17,8 +17,8 @@ export class SettingNumber<CustomIds extends string = NumericParametersIds> exte
         id: NumericParametersIds | CustomIds,
         label: string,
         description: string,
-        min: number,
-        max: number,
+        min: number | null,
+        max: number | null,
         defaultNumber: number,
         useUrlParams: boolean,
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -65,7 +65,15 @@ export class SettingNumber<CustomIds extends string = NumericParametersIds> exte
      * @returns The clamped number.
      */
     public clamp(inNumber: number): number {
-        return Math.max(Math.min(this._max, inNumber), this._min);
+        if (this._min == null && this._max == null) {
+            return inNumber;
+        } else if (this._min == null) {
+            return Math.min(this._max, inNumber);
+        } else if (this._max == null) {
+            return Math.max(this._min, inNumber);
+        } else {
+            return Math.max(Math.min(this._max, inNumber), this._min);
+        }
     }
 
     /**

package/src/Config/SettingOption.ts

@@ -1,5 +1,6 @@
 // Copyright Epic Games, Inc. All Rights Reserved.
 
+import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
 import type { OptionParametersIds } from './Config';
 import { SettingBase } from './SettingBase';
 
@@ -11,6 +12,9 @@ export class SettingOption<CustomIds extends string = OptionParametersIds> exten
     onChangeEmit: (changedValue: string) => void;
     _options: Array<string>;
 
+    /* Transforms the url parameter value into something else, by default no transformation is made, the url param is returned as-is. */
+    _urlParamResolver: (urlParamValue: string) => string;
+
     constructor(
         id: OptionParametersIds | CustomIds,
         label: string,
@@ -19,16 +23,24 @@ export class SettingOption<CustomIds extends string = OptionParametersIds> exten
         options: Array<string>,
         useUrlParams: boolean,
         // eslint-disable-next-line @typescript-eslint/no-empty-function
+        defaultUrlParamResolver: (urlParamValue: string) => string = function (value: string) {
+            /* Return the string as-is by default */
+            return value;
+        },
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }
     ) {
         super(id, label, description, defaultTextValue, defaultOnChangeListener);
 
-        this.options = options;
+        this._urlParamResolver = defaultUrlParamResolver;
+
         const stringToMatch: string = this.hasURLParam(this.id)
-            ? this.getURLParam(this.id)
+            ? this._urlParamResolver(this.getURLParam(this.id))
             : defaultTextValue;
+
+        this.options = options ?? [stringToMatch];
         this.selected = stringToMatch;
         this.useUrlParams = useUrlParams;
     }
@@ -72,20 +84,26 @@ export class SettingOption<CustomIds extends string = OptionParametersIds> exten
      * @param value Selected option
      */
     public set selected(value: string) {
-        // A user may not specify the full possible value so we instead use the closest match.
-        // eg ?xxx=H264 would select 'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f'
-        let filteredList = this.options.filter((option: string) => option.indexOf(value) !== -1);
-        if (filteredList.length) {
-            this.value = filteredList[0];
+        if (value === undefined) {
             return;
         }
 
-        // A user has specified a codec with a fmtp string but this codec + fmtp line isn't available.
-        // in that case, just use the codec
-        filteredList = this.options.filter((option: string) => option.indexOf(value.split(' ')[0]) !== -1);
-        if (filteredList.length) {
-            this.value = filteredList[0];
-            return;
+        // If options contains the value, then set that as selected
+        if (this.options.includes(value)) {
+            this.value = value;
+        } else {
+            Logger.Error(
+                `Could not set "${value}" as the selected option for ${this.id} because it wasn't one of the options.`
+            );
         }
     }
+
+    /**
+     * Set the url parameter resolver to do some transformation to the string value
+     * that is extracted from the url parameters.
+     * @param urlParam A function that transforms the extracted url parameter string for this setting to something else.
+     */
+    public set urlParamResolver(value: (urlParam: string) => string) {
+        this._urlParamResolver = value;
+    }
 }

package/src/DataChannel/DataChannelLatencyTestController.ts

@@ -30,7 +30,7 @@ export class DataChannelLatencyTestController {
     callback: DataChannelLatencyTestResultCallback;
     records: Map<DataChannelLatencyTestSeq, DataChannelLatencyTestRecord>;
     seq: DataChannelLatencyTestSeq;
-    interval: NodeJS.Timer;
+    intervalHandle: number = undefined;
 
     constructor(sink: DataChannelLatencyTestSink, callback: DataChannelLatencyTestResultCallback) {
         this.sink = sink;
@@ -45,7 +45,7 @@ export class DataChannelLatencyTestController {
         }
         this.startTime = Date.now();
         this.records.clear();
-        this.interval = setInterval(
+        this.intervalHandle = window.setInterval(
             (() => {
                 if (Date.now() - this.startTime >= config.duration) {
                     this.stop();
@@ -59,9 +59,9 @@ export class DataChannelLatencyTestController {
     }
 
     stop() {
-        if (this.interval) {
-            clearInterval(this.interval);
-            this.interval = undefined;
+        if (this.intervalHandle) {
+            window.clearInterval(this.intervalHandle);
+            this.intervalHandle = undefined;
             this.callback(this.produceResult());
         }
     }
@@ -100,7 +100,7 @@ export class DataChannelLatencyTestController {
     }
 
     isRunning() {
-        return !!this.interval;
+        return !!this.intervalHandle;
     }
 
     receive(response: DataChannelLatencyTestResponse) {

package/src/PeerConnectionController/AggregatedStats.ts

@@ -19,8 +19,6 @@ type RTCStatsTypePS = RTCStatsType | 'stream' | 'media-playout' | 'track';
 export class AggregatedStats {
     inboundVideoStats: InboundVideoStats;
     inboundAudioStats: InboundAudioStats;
-    lastVideoStats: InboundVideoStats;
-    lastAudioStats: InboundAudioStats;
     candidatePairs: Array<CandidatePairStats>;
     DataChannelStats: DataChannelStats;
     localCandidates: Array<CandidateStat>;
@@ -28,7 +26,7 @@ export class AggregatedStats {
     outBoundVideoStats: OutBoundVideoStats;
     sessionStats: SessionStats;
     streamStats: StreamStats;
-    codecs: Map<string, string>;
+    codecs: Map<string, CodecStats>;
     transportStats: RTCTransportStats;
 
     constructor() {
@@ -38,7 +36,7 @@ export class AggregatedStats {
         this.outBoundVideoStats = new OutBoundVideoStats();
         this.sessionStats = new SessionStats();
         this.streamStats = new StreamStats();
-        this.codecs = new Map<string, string>();
+        this.codecs = new Map<string, CodecStats>();
     }
 
     /**
@@ -180,35 +178,39 @@ export class AggregatedStats {
     handleInBoundRTP(stat: InboundRTPStats) {
         switch (stat.kind) {
             case 'video':
-                // Need to convert to unknown first to remove an error around
-                // InboundVideoStats having the bitrate member which isn't found on
-                // the InboundRTPStats
-                this.inboundVideoStats = stat as unknown as InboundVideoStats;
-
-                if (this.lastVideoStats != undefined) {
+                // Calculate bitrate between stat updates
+                if (
+                    stat.bytesReceived > this.inboundVideoStats.bytesReceived &&
+                    stat.timestamp > this.inboundVideoStats.timestamp
+                ) {
                     this.inboundVideoStats.bitrate =
-                        (8 * (this.inboundVideoStats.bytesReceived - this.lastVideoStats.bytesReceived)) /
-                        (this.inboundVideoStats.timestamp - this.lastVideoStats.timestamp);
+                        (8 * (stat.bytesReceived - this.inboundVideoStats.bytesReceived)) /
+                        (stat.timestamp - this.inboundVideoStats.timestamp);
                     this.inboundVideoStats.bitrate = Math.floor(this.inboundVideoStats.bitrate);
                 }
-                this.lastVideoStats = { ...this.inboundVideoStats };
+
+                // Copy members from stat into `this.inboundVideoStats`
+                for (const key in stat) {
+                    (this.inboundVideoStats as any)[key] = (stat as any)[key];
+                }
                 break;
             case 'audio':
-                // Need to convert to unknown first to remove an error around
-                // InboundAudioStats having the bitrate member which isn't found on
-                // the InboundRTPStats
-                this.inboundAudioStats = stat as unknown as InboundAudioStats;
-
-                if (this.lastAudioStats != undefined) {
+                if (
+                    stat.bytesReceived > this.inboundAudioStats.bytesReceived &&
+                    stat.timestamp > this.inboundAudioStats.timestamp
+                ) {
                     this.inboundAudioStats.bitrate =
-                        (8 * (this.inboundAudioStats.bytesReceived - this.lastAudioStats.bytesReceived)) /
-                        (this.inboundAudioStats.timestamp - this.lastAudioStats.timestamp);
+                        (8 * (stat.bytesReceived - this.inboundAudioStats.bytesReceived)) /
+                        (stat.timestamp - this.inboundAudioStats.timestamp);
                     this.inboundAudioStats.bitrate = Math.floor(this.inboundAudioStats.bitrate);
                 }
-                this.lastAudioStats = { ...this.inboundAudioStats };
+                // Copy members from stat into `this.inboundAudioStats`
+                for (const key in stat) {
+                    (this.inboundAudioStats as any)[key] = (stat as any)[key];
+                }
                 break;
             default:
-                Logger.Info('Kind is not handled');
+                Logger.Error(`Kind should be audio or video, we got ${stat.kind} - that's unsupported.`);
                 break;
         }
     }
@@ -255,10 +257,7 @@ export class AggregatedStats {
 
     handleCodec(stat: CodecStats) {
         const codecId = stat.id;
-        const codecType = `${stat.mimeType.replace('video/', '').replace('audio/', '')}${
-            stat.sdpFmtpLine ? ` ${stat.sdpFmtpLine}` : ''
-        }`;
-        this.codecs.set(codecId, codecType);
+        this.codecs.set(codecId, stat);
     }
 
     handleSessionStatistics(