@stormstreaming/stormstreamer 0.9.1-beta.3 → 0.9.2-beta.0

package/dist/amd/index.js

@@ -4,8 +4,8 @@
  * contact@stormstreaming.com
  * https://stormstreaming.com
  *
- * Version: 0.9.1-beta.3
- * Version: 1/25/2025, 7:07:05 AM
+ * Version: 0.9.2-beta.0
+ * Version: 3/6/2025, 12:46:46 PM
  *
  * LEGAL NOTICE:
  * This software is subject to the terms and conditions defined in
@@ -372,10 +372,12 @@
         this._containerLogEnabled = false;
         this._enabledContainerTypes = [LogType.INFO, LogType.ERROR, LogType.SUCCESS, LogType.TRACE, LogType.WARNING];
         this._containerLogMonoColor = false;
+        this._stageController = true;
+        this._streamerController = true;
         this.parse(debugConfig);
       }
       parse(debugConfig) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
         this._debugConfig = debugConfig;
         if (this._debugConfig) {
           this._consoleLogEnabled = (_c = (_b = (_a = this._debugConfig) === null || _a === void 0 ? void 0 : _a.console) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : this._consoleLogEnabled;
@@ -385,6 +387,8 @@
           this._containerLogMonoColor = (_q = (_p = (_o = this._debugConfig) === null || _o === void 0 ? void 0 : _o.container) === null || _p === void 0 ? void 0 : _p.monoColor) !== null && _q !== void 0 ? _q : this._containerLogMonoColor;
           this._enabledContainerTypes = (_t = this.parseLogTypes((_s = (_r = this._debugConfig) === null || _r === void 0 ? void 0 : _r.container) === null || _s === void 0 ? void 0 : _s.logTypes)) !== null && _t !== void 0 ? _t : this._enabledContainerTypes;
           this._containerID = (_w = (_v = (_u = this._debugConfig) === null || _u === void 0 ? void 0 : _u.container) === null || _v === void 0 ? void 0 : _v.containerID) !== null && _w !== void 0 ? _w : this._containerID;
+          this._streamerController = (_y = (_x = this._debugConfig) === null || _x === void 0 ? void 0 : _x.streamerController) !== null && _y !== void 0 ? _y : this._streamerController;
+          this._stageController = (_0 = (_z = this._debugConfig) === null || _z === void 0 ? void 0 : _z.stageController) !== null && _0 !== void 0 ? _0 : this._stageController;
         }
       }
       parseLogTypes(logTypes) {
@@ -485,6 +489,12 @@
       set containerLogMonoColor(newValue) {
         this._containerLogMonoColor = newValue;
       }
+      get stageControllerDebug() {
+        return this._stageController;
+      }
+      get streamerControllerDebug() {
+        return this._streamerController;
+      }
       print(logger, force = false) {
         if (DebugData.PRINT_ON_STARTUP || force) {
           let consoleLogTypes = "";
@@ -876,6 +886,23 @@
           }
         }
       }
+      decoratedLog(text, scheme) {
+        const EMOJI_MAP = ["0️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟"];
+        const COLOR_SCHEMES = {
+          'dark-blue': '#4c9fee',
+          'dark-green': '#4bcb64',
+          'dark-orange': '#daa33a',
+          'dark-red': '#f86464',
+          'dark-pink': '#f864e8',
+          'dark-yellow': '#e1f864'
+        };
+        const id = this._stormStreamer.getStreamerID();
+        const keyCaps = id >= 0 && id < EMOJI_MAP.length ? EMOJI_MAP[id] : `[${id}]`;
+        const color = COLOR_SCHEMES[scheme];
+        if (!color) return;
+        const style = `background: black; color: ${color}; border: 1px solid ${color}; padding: 5px 5px 5px 0px`;
+        console.log(`%c 🎦️${keyCaps} ${text}`, style);
+      }
       error(objectName, message) {
         let output = this.logData(objectName, message);
         if (this._debugConfig.consoleLogEnabled) {
@@ -955,18 +982,6 @@
     Logger.SUCCESS_COLOR = "green";
     Logger.TRACE_COLOR = "black";
 
-    class ClientUser {
-      constructor() {
-        this.bandwidthCapabilities = 0;
-      }
-      setBandwidthCapabilities(newCapabilities) {
-        this.bandwidthCapabilities = newCapabilities;
-      }
-      getBandwidthCapabilities() {
-        return this.bandwidthCapabilities;
-      }
-    }
-
     class UserCapabilities {
       static hasWebSocketsSupport() {
         return window.WebSocket != null;
@@ -1761,6 +1776,7 @@
         this._isResizing = false;
         this._autoResizeEnabled = true;
         this._parentOriginalOverflow = '';
+        this._debug = false;
         this.onFullScreenChange = () => {
           if (document.fullscreenElement == null) {
             this.isInFullScreenMode = false;
@@ -1782,9 +1798,10 @@
         this.initialize();
       }
       initialize() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const containerID = (_d = (_c = (_b = (_a = this._main.getConfigManager()) === null || _a === void 0 ? void 0 : _a.getSettingsData()) === null || _b === void 0 ? void 0 : _b.getVideoData()) === null || _c === void 0 ? void 0 : _c.containerID) !== null && _d !== void 0 ? _d : null;
         this._scalingMode = (_f = (_e = this._main.getConfigManager()) === null || _e === void 0 ? void 0 : _e.getSettingsData().getVideoData().scalingMode) !== null && _f !== void 0 ? _f : ScalingType.FILL;
+        this._debug = (_h = (_g = this._main.getConfigManager()) === null || _g === void 0 ? void 0 : _g.getSettingsData().getDebugData().stageControllerDebug) !== null && _h !== void 0 ? _h : this._debug;
         this._videoContainer = document.createElement('div');
         this._videoContainer.setAttribute("id", "stormStreamer_" + this._main.getStreamerID());
         this._videoContainer.style.overflow = "hidden";
@@ -1830,10 +1847,12 @@
           tempParentElement = container;
         }
         if (tempParentElement === this._parentElement) {
+          if (this._debug) this._logger.decoratedLog("Attaching Failed (container is the same)", "dark-pink");
           this._logger.warning(this, "attachToParent :: container is the same");
           return false;
         }
         if (tempParentElement && this._videoContainer) {
+          if (this._debug) this._logger.decoratedLog("Attach To Parent: " + container + " (success)", "dark-pink");
           this._parentElement = tempParentElement;
           this._parentElement.appendChild(this._videoContainer);
           this._resizeObserver.observe(this._parentElement);
@@ -1847,13 +1866,13 @@
           this.handleResize();
           result = true;
         } else {
-          console.log("tempParentElement", tempParentElement);
-          console.log("this._videoContainer", this._videoContainer);
-          this._logger.warning(this, "attachToParent :: container was not found");
+          if (this._debug) this._logger.decoratedLog("Attach To Parent: " + container + " (failure - container not found)", "dark-pink");
+          this._logger.warning(this, "attachToParent :: container \"" + container + "\"+ was not found");
         }
         return result;
       }
       detachFromParent() {
+        if (this._debug) this._logger.decoratedLog("Detach From Parent", "dark-pink");
         let result = false;
         if (this._parentElement != null && this._videoContainer != null) {
           this._logger.info(this, "Detaching from parent: " + this._videoContainer);
@@ -2490,7 +2509,6 @@
           this._analyser.smoothingTimeConstant = 0.3;
           this._microphone.connect(this._analyser);
           this.startMonitoring();
-          console.log('SoundMeter: Successfully attached to new audio stream');
         } catch (error) {
           console.error('SoundMeter: Error during attach:', error);
           this.detach();
@@ -2524,7 +2542,6 @@
         }
         this._audioContext = null;
         this.clear();
-        console.log('SoundMeter: Successfully detached');
       }
       clear() {
         this._instant = 0;
@@ -2708,11 +2725,14 @@
     class StreamStatusInfo {
       constructor() {
         this._publishState = exports.PublishState.NOT_INITIALIZED;
-        this._videoBitrate = 0;
-        this._audioBitrate = 0;
+        this._videoPublishBitrate = 0;
+        this._audioPublishBitrate = 0;
+        this._currentBitrate = 0;
         this._audioFrameCount = 0;
         this._videoFrameCount = 0;
         this._frameRate = 0;
+        this._videoWidth = 0;
+        this._videoHeight = 0;
       }
       get publishState() {
         return this._publishState;
@@ -2720,17 +2740,23 @@
       set publishState(value) {
         this._publishState = value === "published" ? exports.PublishState.PUBLISHED : exports.PublishState.CONNECTED;
       }
-      get videoBitrate() {
-        return this._videoBitrate;
+      get videoPublishBitrate() {
+        return this._videoPublishBitrate;
+      }
+      set videoPublishBitrate(value) {
+        this._videoPublishBitrate = value;
       }
-      set videoBitrate(value) {
-        this._videoBitrate = value;
+      get audioPublishBitrate() {
+        return this._audioPublishBitrate;
       }
-      get audioBitrate() {
-        return this._audioBitrate;
+      set audioPublishBitrate(value) {
+        this._audioPublishBitrate = value;
       }
-      set audioBitrate(value) {
-        this._audioBitrate = value;
+      set currentBitrate(value) {
+        this._currentBitrate = value;
+      }
+      get currentBitrate() {
+        return this._currentBitrate;
       }
       get audioFrameCount() {
         return this._audioFrameCount;
@@ -2750,6 +2776,18 @@
       set frameRate(value) {
         this._frameRate = value;
       }
+      set videoWidth(value) {
+        this._videoWidth = value;
+      }
+      get videoWidth() {
+        return this._videoWidth;
+      }
+      set videoHeight(value) {
+        this._videoHeight = value;
+      }
+      get videoHeight() {
+        return this._videoHeight;
+      }
     }
 
     class WowzaStatusConnection extends AbstractSocket {
@@ -2809,11 +2847,15 @@
             case "STREAM_STATUS_RESPONSE":
               const streamStatusInfo = new StreamStatusInfo();
               streamStatusInfo.publishState = msgJSON.streamStatus;
-              streamStatusInfo.videoBitrate = msgJSON.videoBitrate;
-              streamStatusInfo.audioBitrate = msgJSON.audioBitrate;
+              streamStatusInfo.videoPublishBitrate = msgJSON.publishVideoBitrate;
+              streamStatusInfo.audioPublishBitrate = msgJSON.publishAudioBitrate;
               streamStatusInfo.videoFrameCount = msgJSON.videoFrameCount;
               streamStatusInfo.audioFrameCount = msgJSON.audioFrameCount;
               streamStatusInfo.frameRate = msgJSON.frameRate;
+              streamStatusInfo.videoWidth = msgJSON.videoWidth;
+              streamStatusInfo.videoHeight = msgJSON.videoHeight;
+              streamStatusInfo.currentBitrate = msgJSON.realBitrate;
+              console.log(streamStatusInfo);
               this._main.dispatchEvent("streamStatusUpdate", {
                 ref: this._main,
                 streamStatus: streamStatusInfo
@@ -2901,9 +2943,9 @@
       }
     }
 
-    class PlaybackController {
+    class StreamerController {
       constructor(main) {
-        var _a;
+        var _a, _b, _c;
         this._isWindowActive = true;
         this._peerConnectionConfig = {
           'iceServers': []
@@ -2934,12 +2976,14 @@
         this._restartTimerCount = 0;
         this._restartTimerMaxCount = 5;
         this._publishState = exports.PublishState.NOT_INITIALIZED;
+        this._publishTime = 0;
         this._inputDeviceState = exports.StreamerState.NOT_INITIALIZED;
         this._cameraState = exports.DeviceState.NOT_INITIALIZED;
         this._microphoneState = exports.DeviceState.NOT_INITIALIZED;
         this._publishTimer = 0;
         this._currentOrientation = ((_a = window.screen.orientation) === null || _a === void 0 ? void 0 : _a.type) || '';
         this._statusTimer = null;
+        this._debug = false;
         this.onDeviceStateChange = event => {
           var _a;
           const usedStreamKey = (_a = this._main.getConfigManager()) === null || _a === void 0 ? void 0 : _a.getStreamData().streamKey;
@@ -2948,13 +2992,13 @@
           }
         };
         this.handleOrientationChange = () => __awaiter(this, void 0, void 0, function* () {
-          var _b, _c;
+          var _d, _e;
           yield new Promise(resolve => setTimeout(resolve, 500));
-          const newOrientation = ((_b = window.screen.orientation) === null || _b === void 0 ? void 0 : _b.type) || '';
+          const newOrientation = ((_d = window.screen.orientation) === null || _d === void 0 ? void 0 : _d.type) || '';
           if (this._currentOrientation !== newOrientation) {
             this._logger.info(this, `Orientation changed from ${this._currentOrientation} to ${newOrientation}`);
             this._currentOrientation = newOrientation;
-            const streamKey = (_c = this._main.getConfigManager()) === null || _c === void 0 ? void 0 : _c.getStreamData().streamKey;
+            const streamKey = (_e = this._main.getConfigManager()) === null || _e === void 0 ? void 0 : _e.getStreamData().streamKey;
             this._publishState === exports.PublishState.PUBLISHED;
             this.closeWebRTCConnection();
             if (this._stream) {
@@ -3044,12 +3088,16 @@
           if (this._statusTimer == null) {
             if (this._statusConnection != null && usedStreamKey != null) {
               this._statusTimer = setInterval(() => {
-                var _a;
-                (_a = this._statusConnection) === null || _a === void 0 ? void 0 : _a.sendData('{"packetID":"STREAM_STATUS", "streamKey": "' + usedStreamKey + '"}');
+                this.requestStatusData();
               }, 1000);
             }
           }
         };
+        this.requestStatusData = () => {
+          var _a;
+          const usedStreamKey = this._main.getConfigManager().getStreamData().streamKey;
+          (_a = this._statusConnection) === null || _a === void 0 ? void 0 : _a.sendData('{"packetID":"STREAM_STATUS", "streamKey": "' + usedStreamKey + '"}');
+        };
         this.onStatusServerDisconnect = () => {
           if (this._statusTimer != null) clearInterval(this._statusTimer);
           this._statusTimer = null;
@@ -3058,7 +3106,6 @@
           const update = event.streamStatus;
           if (this._publishState == exports.PublishState.PUBLISHED && update.publishState != exports.PublishState.PUBLISHED) this.setPublishState(exports.PublishState.UNPUBLISHED);
           if (this._publishState == exports.PublishState.CONNECTED && update.publishState == exports.PublishState.PUBLISHED) this.setPublishState(exports.PublishState.PUBLISHED);
-          this._logger.info(this, "Stream Status Update :: VideoBitrate " + update.videoBitrate + " | AudioBitrate : " + update.audioBitrate + " | Video Frames: " + update.videoFrameCount + " | Audio Frames: " + update.audioFrameCount + " | FPS: " + update.frameRate);
         };
         this.onDescriptionSuccess = description => {
           var _a, _b, _c;
@@ -3106,6 +3153,7 @@
         this._logger = main.getLogger();
         this._mungeSDP = new MungeSDP();
         this._soundMeter = new SoundMeter(this._main);
+        this._debug = (_c = (_b = this._main.getConfigManager()) === null || _b === void 0 ? void 0 : _b.getSettingsData().getDebugData().streamerControllerDebug) !== null && _c !== void 0 ? _c : this._debug;
         this.initialize();
       }
       initialize() {
@@ -3271,16 +3319,18 @@
         }
       }
       publish(streamKey) {
-        this._logger.warning(this, "Publishing: " + streamKey);
+        if (this._statusTimer != null) clearInterval(this._statusTimer);
         if (this._main.getConfigManager().getStreamData().streamKey == streamKey && this._publishState == exports.PublishState.CONNECTED) {
           this._logger.warning(this, "Already published!");
           return false;
         }
+        if (this._main.getConfigManager().getStreamData().streamKey != null) this.unpublish();
         this._main.getConfigManager().getStreamData().streamKey = streamKey;
         if (!this.isStreamReady(true, true)) {
           this._logger.warning(this, "Cannot publish - stream not ready (missing video or audio track)");
           return false;
         }
+        if (this._debug) this._logger.decoratedLog("Publishing: " + streamKey, "dark-red");
         this._logger.info(this, "Publish: " + streamKey);
         this.closeWebRTCConnection();
         this._main.dispatchEvent("publish", {
@@ -3291,10 +3341,13 @@
         return true;
       }
       unpublish() {
+        if (this._debug) this._logger.decoratedLog("Unpublish", "dark-red");
         if (this._statusConnection != null) {
           this._statusConnection.destroy();
           this._statusConnection = null;
-          if (this._statusTimer != null) clearInterval(this._statusTimer);
+        }
+        if (this._statusTimer != null) {
+          clearInterval(this._statusTimer);
           this._statusTimer = null;
         }
         clearTimeout(this._publishTimer);
@@ -3857,13 +3910,18 @@
       }
       setPublishState(newState) {
         if (this._publishState == newState) return;
+        if (this._debug) this._logger.decoratedLog("Publish State: " + newState, "dark-blue");
         this._logger.info(this, "Publish State: " + newState);
+        if (newState == exports.PublishState.PUBLISHED) this._publishTime = new Date().getTime();
         this._publishState = newState;
         this._main.dispatchEvent("publishStateChange", {
           ref: this._main,
           state: this._publishState
         });
       }
+      getPublishTime() {
+        return this._publishState == exports.PublishState.PUBLISHED ? this._publishTime : 0;
+      }
       setInputDeviceState(newState) {
         if (this._inputDeviceState == newState) return;
         this._inputDeviceState = newState;
@@ -3990,6 +4048,7 @@
           clearInterval(this._statusTimer);
           this._statusTimer = null;
         }
+        this._main.getConfigManager().getStreamData().streamKey = null;
         this.closeWebRTCConnection();
         this.stopCameraStream();
         this.setPublishState(exports.PublishState.STOPPED);
@@ -4199,7 +4258,7 @@
         };
         this.onMessage = event => {
           var _a;
-          (_a = this._main.getPlaybackController()) === null || _a === void 0 ? void 0 : _a.onSocketMessage(event.data);
+          (_a = this._main.getStreamerController()) === null || _a === void 0 ? void 0 : _a.onSocketMessage(event.data);
         };
         this._main = main;
         this._logger = main.getLogger();
@@ -4236,17 +4295,297 @@
       }
     }
 
+    class StatsController {
+      constructor(main) {
+        this._publishVideoWidth = 0;
+        this._publishVideoHeight = 0;
+        this._publishVideoBitrate = 0;
+        this._publishAudioBitrate = 0;
+        this._currentBitrate = 0;
+        this._currentFPS = 0;
+        this._deliveredVideoFrames = 0;
+        this._deliveredAudioFrames = 0;
+        this.onStreamStatsUpdate = event => {
+          this._publishVideoWidth = event.streamStatus.videoWidth;
+          this._publishVideoHeight = event.streamStatus.videoHeight;
+          this._currentBitrate = event.streamStatus.currentBitrate;
+          this._publishVideoBitrate = event.streamStatus.videoPublishBitrate;
+          this._publishAudioBitrate = event.streamStatus.audioPublishBitrate;
+          this._currentFPS = event.streamStatus.frameRate;
+          this._deliveredVideoFrames = event.streamStatus.videoFrameCount;
+          this._deliveredAudioFrames = event.streamStatus.audioFrameCount;
+        };
+        this._main = main;
+        this._logger = main.getLogger();
+        this._logger.info(this, "Creating new StatsController");
+        this.initialize();
+      }
+      initialize() {
+        this._main.addEventListener("streamStatusUpdate", this.onStreamStatsUpdate, false);
+      }
+      get deliveredVideoFrames() {
+        return this._deliveredVideoFrames;
+      }
+      get deliveredAudioFrames() {
+        return this._deliveredAudioFrames;
+      }
+      get currentFPS() {
+        return this._currentFPS;
+      }
+      get publishVideoWidth() {
+        return this._publishVideoWidth;
+      }
+      get publishVideoHeight() {
+        return this._publishVideoHeight;
+      }
+      get currentBitrate() {
+        return this._currentBitrate;
+      }
+      get publishVideoBitrate() {
+        return this._publishVideoBitrate;
+      }
+      get publishAudioBitrate() {
+        return this._publishAudioBitrate;
+      }
+    }
+
+    class GraphDrawer {
+      constructor(containerIdOrElement, valueRanges, colors, lineWidth = 1) {
+        this._currentX = 0;
+        this._isFullyDrawn = false;
+        this._lastTimestamp = null;
+        this._isTimemarkLine = false;
+        this._borderWidth = 1;
+        if (colors.length !== valueRanges.length + 1) {
+          throw new Error(`Colors array must have exactly ${valueRanges.length + 1} elements (one more than valueRanges)`);
+        }
+        for (let i = 1; i < valueRanges.length; i++) {
+          if (valueRanges[i] <= valueRanges[i - 1]) {
+            throw new Error('ValueRanges must be in ascending order');
+          }
+        }
+        const hexColorRegex = /^#[0-9A-Fa-f]{6}$/;
+        if (!colors.every(color => hexColorRegex.test(color))) {
+          throw new Error('All colors must be in valid hex format (e.g., #FF0000)');
+        }
+        let container;
+        if (typeof containerIdOrElement === 'string') {
+          const foundElement = document.getElementById(containerIdOrElement);
+          if (!foundElement) {
+            throw new Error(`Container element with id ${containerIdOrElement} not found`);
+          }
+          container = foundElement;
+        } else {
+          container = containerIdOrElement;
+        }
+        const containerRect = container.getBoundingClientRect();
+        this._width = Math.floor(containerRect.width);
+        this._height = Math.floor(containerRect.height);
+        this._effectiveWidth = this._width - this._borderWidth * 2;
+        this._effectiveHeight = this._height - this._borderWidth * 2;
+        this._canvas = document.createElement('canvas');
+        container.appendChild(this._canvas);
+        const context = this._canvas.getContext('2d', {
+          willReadFrequently: true
+        });
+        if (!context) {
+          throw new Error('Failed to get canvas context');
+        }
+        this._ctx = context;
+        this._valueRanges = [0, ...valueRanges];
+        this._colors = colors;
+        this._lineWidth = lineWidth;
+        this._canvas.width = this._width;
+        this._canvas.height = this._height;
+        this._canvas.style.width = `${this._width}px`;
+        this._canvas.style.height = `${this._height}px`;
+        this.clear();
+      }
+      drawBorder() {
+        this._ctx.strokeStyle = '#000000';
+        this._ctx.lineWidth = this._borderWidth;
+        this._ctx.strokeRect(this._borderWidth / 2, this._borderWidth / 2, this._width - this._borderWidth, this._height - this._borderWidth);
+      }
+      clear() {
+        this._ctx.clearRect(0, 0, this._width, this._height);
+        this._ctx.fillStyle = this._colors[0];
+        this._ctx.fillRect(this._borderWidth, this._borderWidth, this._effectiveWidth, this._effectiveHeight);
+        this.drawBorder();
+        this._isFullyDrawn = false;
+        this._currentX = this._borderWidth;
+        this._lastTimestamp = null;
+        this._isTimemarkLine = false;
+      }
+      getColorIndices(value) {
+        for (let i = 0; i < this._valueRanges.length - 1; i++) {
+          if (value >= this._valueRanges[i] && value <= this._valueRanges[i + 1]) {
+            return {
+              lowerIndex: i,
+              upperIndex: i + 1
+            };
+          }
+        }
+        return {
+          lowerIndex: this._valueRanges.length - 2,
+          upperIndex: this._valueRanges.length - 1
+        };
+      }
+      calculateHeightRatio(value, lowerBound, upperBound) {
+        return (value - lowerBound) / (upperBound - lowerBound);
+      }
+      shiftCanvasLeft(shiftAmount) {
+        const imageData = this._ctx.getImageData(this._borderWidth + shiftAmount, this._borderWidth, this._effectiveWidth - shiftAmount, this._effectiveHeight);
+        this._ctx.fillStyle = this._colors[0];
+        this._ctx.fillRect(this._borderWidth, this._borderWidth, this._effectiveWidth, this._effectiveHeight);
+        this._ctx.putImageData(imageData, this._borderWidth, this._borderWidth);
+        this.drawBorder();
+      }
+      applyOverlayEffect(baseColor, overlayOpacity = 0.5) {
+        const r = parseInt(baseColor.slice(1, 3), 16);
+        const g = parseInt(baseColor.slice(3, 5), 16);
+        const b = parseInt(baseColor.slice(5, 7), 16);
+        const overlayChannel = base => {
+          const normalized = base / 255;
+          let result;
+          if (normalized <= 0.5) {
+            result = 2 * normalized * 1;
+          } else {
+            result = 1 - 2 * (1 - normalized) * (1 - 1);
+          }
+          return Math.round(result * 255 * overlayOpacity + base * (1 - overlayOpacity));
+        };
+        const newR = overlayChannel(r);
+        const newG = overlayChannel(g);
+        const newB = overlayChannel(b);
+        const toHex = n => {
+          const hex = n.toString(16);
+          return hex.length === 1 ? '0' + hex : hex;
+        };
+        return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+      }
+      addEntry(value) {
+        value = Math.round(value * 100) / 100;
+        const currentTime = Date.now();
+        if (this._lastTimestamp === null) {
+          this._lastTimestamp = currentTime;
+          this._isTimemarkLine = false;
+        } else {
+          const timeDiff = currentTime - this._lastTimestamp;
+          if (timeDiff >= 1000) {
+            this._isTimemarkLine = true;
+            this._lastTimestamp = currentTime;
+          } else {
+            this._isTimemarkLine = false;
+          }
+        }
+        const drawWidth = this._isTimemarkLine ? 1 : this._lineWidth;
+        if (!this._isFullyDrawn && this._currentX >= this._width - this._borderWidth) {
+          this._isFullyDrawn = true;
+        }
+        if (this._isFullyDrawn) {
+          this.shiftCanvasLeft(drawWidth);
+          this.drawLine(this._width - this._borderWidth - drawWidth, value, drawWidth);
+        } else {
+          this.drawLine(this._currentX, value, drawWidth);
+          this._currentX += drawWidth;
+        }
+      }
+      drawLine(x, value, width) {
+        const {
+          lowerIndex,
+          upperIndex
+        } = this.getColorIndices(value);
+        const ratio = this.calculateHeightRatio(value, this._valueRanges[lowerIndex], this._valueRanges[upperIndex]);
+        let lowerColor = this._colors[lowerIndex];
+        let upperColor = this._colors[upperIndex];
+        if (this._isTimemarkLine) {
+          lowerColor = this.applyOverlayEffect(lowerColor, 0.3);
+          upperColor = this.applyOverlayEffect(upperColor, 0.3);
+        }
+        const upperHeight = Math.round(this._effectiveHeight * ratio);
+        const lowerHeight = this._effectiveHeight - upperHeight;
+        this._ctx.fillStyle = lowerColor;
+        this._ctx.fillRect(x, this._height - this._borderWidth - lowerHeight, width, lowerHeight);
+        this._ctx.fillStyle = upperColor;
+        this._ctx.fillRect(x, this._borderWidth, width, upperHeight);
+      }
+      clearGraph() {
+        this._currentX = this._borderWidth;
+        this._isFullyDrawn = false;
+        this._lastTimestamp = null;
+        this._isTimemarkLine = false;
+        this.clear();
+      }
+      destroy() {
+        if (this._canvas.parentNode) {
+          this._canvas.parentNode.removeChild(this._canvas);
+        }
+      }
+    }
+
+    class BitrateGraph {
+      constructor(main, container) {
+        this.onStreamStatsUpdate = event => {
+          var _a;
+          (_a = this._graph) === null || _a === void 0 ? void 0 : _a.addEntry(event.streamStatus.currentBitrate);
+        };
+        this._main = main;
+        this._object = container;
+        this._main.addGraph(this);
+      }
+      start() {
+        if (this._graph != null) stop();
+        const valueRanges = [1000000, 2000000, 3000000, 5000000, 6000000, 7000000];
+        const colors = ['#000000', '#0a3980', '#2793dd', '#3bc39c', '#c3df3e', '#f89539', '#f83f3f'];
+        this._graph = new GraphDrawer(this._object, valueRanges, colors);
+        this._main.addEventListener("streamStatusUpdate", this.onStreamStatsUpdate);
+        return this;
+      }
+      stop() {
+        this._main.removeEventListener("streamStatusUpdate", this.onStreamStatsUpdate);
+        if (this._graph != null) this._graph.destroy();
+        this._graph = null;
+        return this;
+      }
+    }
+
+    class FPSGraph {
+      constructor(main, container) {
+        this.onStreamStatsUpdate = event => {
+          var _a;
+          (_a = this._graph) === null || _a === void 0 ? void 0 : _a.addEntry(event.streamStatus.frameRate);
+        };
+        this._main = main;
+        this._object = container;
+        this._main.addGraph(this);
+      }
+      start() {
+        if (this._graph != null) stop();
+        const valueRanges = [25, 26, 27, 28, 29, 30];
+        const colors = ['#000000', '#0a3980', '#2793dd', '#3bc39c', '#c3df3e', '#f89539', '#f83f3f'];
+        this._graph = new GraphDrawer(this._object, valueRanges, colors);
+        this._main.addEventListener("streamStatusUpdate", this.onStreamStatsUpdate);
+        return this;
+      }
+      stop() {
+        this._main.removeEventListener("streamStatusUpdate", this.onStreamStatsUpdate);
+        if (this._graph != null) this._graph.destroy();
+        this._graph = null;
+        return this;
+      }
+    }
+
     class StormStreamer extends EventDispatcher {
       constructor(streamConfig, autoInitialize = false) {
         super();
         this.DEV_MODE = true;
-        this.STREAMER_VERSION = "0.9.1-beta.3";
-        this.COMPILE_DATE = "1/25/2025, 7:07:04 AM";
+        this.STREAMER_VERSION = "0.9.2-beta.0";
+        this.COMPILE_DATE = "3/6/2025, 12:46:45 PM";
         this.STREAMER_BRANCH = "Experimental";
         this.STREAMER_PROTOCOL_VERSION = 1;
         this._initialized = false;
         if (typeof window === 'undefined' || !window.document || !window.document.createElement) {
-          console.error(`StormLibrary Creation Error - No "window" element in the provided context!`);
+          console.error(`StormStreamer Creation Error - No "window" element in the provided context!`);
           return;
         }
         if (this.DEV_MODE && !('StormStreamerArray' in window)) {
@@ -4260,12 +4599,13 @@
       }
       initialize() {
         if (this._isRemoved) return;
-        if (this._configManager == null) throw Error("Stream Config was not provided for this library! A properly configured object must be provided through the constructor or via the setConfig method before using the initialize() method.");
+        if (this._configManager == null) throw Error("Stream Config was not provided for this streamer! A properly configured object must be provided through the constructor or via the setConfig method before using the initialize() method.");
         this._storageManager = new StorageManager(this);
         this._stageController = new StageController(this);
         this._networkController = new NetworkController(this);
-        this._playbackController = new PlaybackController(this);
-        this._clientUser = new ClientUser();
+        this._streamerController = new StreamerController(this);
+        this._statsController = new StatsController(this);
+        this._graphs = [];
         this._initialized = true;
         this.dispatchEvent("streamerReady", {
           ref: this
@@ -4300,22 +4640,6 @@
         var _a, _b;
         return (_b = (_a = this._networkController) === null || _a === void 0 ? void 0 : _a.getConnection().isConnectionActive()) !== null && _b !== void 0 ? _b : false;
       }
-      attachToContainer(container) {
-        var _a, _b;
-        let result = false;
-        if (this._initialized) return (_b = (_a = this._stageController) === null || _a === void 0 ? void 0 : _a.attachToParent(container)) !== null && _b !== void 0 ? _b : false;
-        return result;
-      }
-      detachFromContainer() {
-        var _a, _b;
-        let result = false;
-        if (this._initialized) return (_b = (_a = this._stageController) === null || _a === void 0 ? void 0 : _a.detachFromParent()) !== null && _b !== void 0 ? _b : false;
-        return result;
-      }
-      getContainer() {
-        var _a, _b;
-        return (_b = (_a = this._stageController) === null || _a === void 0 ? void 0 : _a.getParentElement()) !== null && _b !== void 0 ? _b : null;
-      }
       mute() {
         if (this._stageController != null) {
           if (this._stageController.getScreenElement() != null) {
@@ -4360,69 +4684,89 @@
       }
       getCameraList() {
         var _a, _b;
-        return (_b = (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.getCameraList()) !== null && _b !== void 0 ? _b : [];
+        return (_b = (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.getCameraList()) !== null && _b !== void 0 ? _b : [];
       }
       getMicrophoneList() {
         var _a, _b;
-        return (_b = (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.getMicrophoneList()) !== null && _b !== void 0 ? _b : [];
+        return (_b = (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.getMicrophoneList()) !== null && _b !== void 0 ? _b : [];
       }
       setCamera(cameraID) {
         var _a;
-        (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.selectCamera(cameraID);
+        (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.selectCamera(cameraID);
       }
       setMicrophone(microphoneID) {
         var _a;
-        (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.selectMicrophone(microphoneID);
+        (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.selectMicrophone(microphoneID);
       }
       getCurrentCamera() {
-        return this._playbackController.getCurrentCamera();
+        return this._streamerController.getCurrentCamera();
       }
       getCurrentMicrophone() {
-        return this._playbackController.getCurrentMicrophone();
+        return this._streamerController.getCurrentMicrophone();
       }
       muteMicrophone(microphoneState) {
         var _a;
-        (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.muteMicrophone(microphoneState);
+        (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.muteMicrophone(microphoneState);
       }
       isMicrophoneMuted() {
         var _a, _b;
-        return (_b = (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.isMicrophoneMuted()) !== null && _b !== void 0 ? _b : false;
+        return (_b = (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.isMicrophoneMuted()) !== null && _b !== void 0 ? _b : false;
       }
       getPublishState() {
         var _a, _b;
-        return (_b = (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.getPublishState()) !== null && _b !== void 0 ? _b : exports.PublishState.NOT_INITIALIZED;
+        return (_b = (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.getPublishState()) !== null && _b !== void 0 ? _b : exports.PublishState.NOT_INITIALIZED;
+      }
+      getPublishTime() {
+        var _a, _b;
+        return (_b = (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.getPublishTime()) !== null && _b !== void 0 ? _b : 0;
       }
       publish(streamKey) {
         var _a, _b;
-        return (_b = (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.publish(streamKey)) !== null && _b !== void 0 ? _b : false;
+        return (_b = (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.publish(streamKey)) !== null && _b !== void 0 ? _b : false;
       }
-      getStreamerState() {
+      getInputDeviceState() {
         var _a, _b;
-        return (_b = (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.getInputDeviceState()) !== null && _b !== void 0 ? _b : exports.StreamerState.NOT_INITIALIZED;
+        return (_b = (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.getInputDeviceState()) !== null && _b !== void 0 ? _b : exports.StreamerState.NOT_INITIALIZED;
       }
       getCamerState() {
         var _a, _b;
-        return (_b = (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.getCamerState()) !== null && _b !== void 0 ? _b : exports.DeviceState.NOT_INITIALIZED;
+        return (_b = (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.getCamerState()) !== null && _b !== void 0 ? _b : exports.DeviceState.NOT_INITIALIZED;
       }
       getMicrophoneState() {
         var _a, _b;
-        return (_b = (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.getMicrophoneState()) !== null && _b !== void 0 ? _b : exports.DeviceState.NOT_INITIALIZED;
+        return (_b = (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.getMicrophoneState()) !== null && _b !== void 0 ? _b : exports.DeviceState.NOT_INITIALIZED;
       }
       clearSavedDevices() {
         var _a;
-        return (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.clearSavedDevices();
+        return (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.clearSavedDevices();
       }
       messSavedDevices() {
         var _a;
-        return (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.messSavedDevices();
+        return (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.messSavedDevices();
       }
       isStreamReady() {
         var _a, _b;
-        return (_b = (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.isStreamReady()) !== null && _b !== void 0 ? _b : false;
+        return (_b = (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.isStreamReady()) !== null && _b !== void 0 ? _b : false;
       }
       unpublish() {
         var _a;
-        (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.unpublish();
+        (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.unpublish();
+      }
+      attachToContainer(container) {
+        var _a, _b;
+        let result = false;
+        if (this._initialized) return (_b = (_a = this._stageController) === null || _a === void 0 ? void 0 : _a.attachToParent(container)) !== null && _b !== void 0 ? _b : false;
+        return result;
+      }
+      detachFromContainer() {
+        var _a, _b;
+        let result = false;
+        if (this._initialized) return (_b = (_a = this._stageController) === null || _a === void 0 ? void 0 : _a.detachFromParent()) !== null && _b !== void 0 ? _b : false;
+        return result;
+      }
+      getContainer() {
+        var _a, _b;
+        return (_b = (_a = this._stageController) === null || _a === void 0 ? void 0 : _a.getParentElement()) !== null && _b !== void 0 ? _b : null;
       }
       setSize(width, height) {
         if (this._initialized) this._stageController.setSize(width, height);else {
@@ -4500,6 +4844,22 @@
           }
         });
       }
+      createFPSGraph(container) {
+        return new FPSGraph(this, container);
+      }
+      createBitrateGraph(container) {
+        return new BitrateGraph(this, container);
+      }
+      addGraph(newGraph) {
+        if (this._graphs != null) this._graphs.push(newGraph);
+      }
+      stopAllGraphs() {
+        if (this._graphs != null && this._graphs.length > 0) {
+          for (let i = 0; i < this._graphs.length; i++) {
+            this._graphs[i].stop();
+          }
+        }
+      }
       enterFullScreen() {
         if (this._initialized && this._stageController) this._stageController.enterFullScreen();
       }
@@ -4510,6 +4870,13 @@
         if (this._initialized && this._stageController) return this._stageController.isFullScreenMode();
         return false;
       }
+      getStreamKey() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.getConfigManager()) === null || _a === void 0 ? void 0 : _a.getStreamData()) === null || _b === void 0 ? void 0 : _b.streamKey) !== null && _c !== void 0 ? _c : null;
+      }
+      getStatsController() {
+        return this._statsController;
+      }
       getStreamerID() {
         return this._streamerID;
       }
@@ -4522,8 +4889,8 @@
       getNetworkController() {
         return this._networkController;
       }
-      getPlaybackController() {
-        return this._playbackController;
+      getStreamerController() {
+        return this._streamerController;
       }
       getStageController() {
         return this._stageController;
@@ -4550,21 +4917,21 @@
       start() {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-          return (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.start();
+          return (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.start();
         });
       }
       stop() {
         var _a;
-        return (_a = this._playbackController) === null || _a === void 0 ? void 0 : _a.stop();
+        return (_a = this._streamerController) === null || _a === void 0 ? void 0 : _a.stop();
       }
       destroy() {
         var _a, _b, _c, _d;
-        this._logger.warning(this, "Destroying library instance, bye, bye!");
+        this._logger.warning(this, "Destroying streamer instance, bye, bye!");
         if (this.DEV_MODE && 'StormStreamerArray' in window) window.StormStreamerArray[this._streamerID] = null;
         this._initialized = false;
         this._isRemoved = true;
         (_b = (_a = this._networkController) === null || _a === void 0 ? void 0 : _a.getConnection()) === null || _b === void 0 ? void 0 : _b.destroy();
-        (_c = this._playbackController) === null || _c === void 0 ? void 0 : _c.destroy();
+        (_c = this._streamerController) === null || _c === void 0 ? void 0 : _c.destroy();
         (_d = this._stageController) === null || _d === void 0 ? void 0 : _d.destroy();
         this.removeAllEventListeners();
       }