Statistics & Performance - Storm JS Player Core

Bandwidth

Bandwidth metrics refer to the currently measured throughput used by the player to download audio and video data. The following parameters are available:

1. Current Bandwidth - The average bandwidth usage currently measured, reported in bytes per second.

   Current bandwidth

   javascript

   Copy

   let currBandwidth = storm?.getBandwidthMeter()?.currentBandwidth ?? "0";
   

2. Minimal Bandwidth - The lowest measured bandwidth value recorded within the last 5 seconds.

   Minimal bandwidth

   javascript

   Copy

   let minBandwidth = storm?.getBandwidthMeter()?.minBandwidth ?? "0";
   

3. Max Bandwidth - The highest measured bandwidth value recorded within the last 5 seconds.

   Max bandwidth

   javascript

   Copy

   let maxBandwidth = storm?.getBandwidthMeter()?.maxBandwidth ?? "0";
   

4. Bandwidth Stability Trend - Indicates the current stability trend of the bandwidth.

   Bandwidth stability trend

   javascript

   Copy

   let bwStabilityTrendLabel = storm?.getBandwidthAnalyser()?.currentTrend;
   

   Possible values:

   • stable – the connection is stable with no issues.
   • rising – stability is improving.
   • falling – stability is declining.
   • unknown – stability cannot be determined (e.g., no stream is playing).

5. Bandwidth Stability Trend Duration - Indicates the duration (in seconds) for which the current trend has been active.

   Trend duration

   javascript

   Copy

   let bwStabilityTrendDuration = storm?.getBandwidthAnalyser()?.trendDuration ?? 0;
   

Buffer

The buffer represents the amount of preloaded audio-video data, measured in seconds, available on the user's device. A safe buffer is typically around 200–300 milliseconds. Storm JS Player Core allows full configuration of buffer size thresholds, playback start logic, buffering behavior, and even buffer trimming via playback acceleration.

1. Buffer Size - The current size of the buffer, in seconds.

   Buffer size

   javascript

   Copy

   let bufferSize = storm?.getBufferAnalyser()?.bufferSize ?? "0";
   

2. Buffer Stability Label - Describes the current health of the buffer.

   Possible values:

   • good – buffer is within optimal thresholds.
   • medium – buffer is slightly outside the recommended thresholds.
   • bad – buffer significantly deviates from optimal thresholds.
   • unknown – buffer state is unknown (e.g., no stream is active).
   Buffer stability

   javascript

   Copy

   let bufferStabilityLabel = storm?.getBufferAnalyser()?.stability ?? "unknown";
   

3. Buffer Standard Deviation - Standard deviation of recent buffer measurements. Lower values indicate a more stable buffer.

   Buffer deviation

   javascript

   Copy

   let bufferStabilityDev = storm?.getBufferAnalyser()?.bufferDeviation ?? 0;
   

Performance Graphs

The Storm JS Player Core can generate real-time charts to monitor buffer size, stability, and bandwidth consumption.

Available Graphs:

1. Buffer Graph - Visualizes the buffer size (same as Buffer Size described above).

   Buffer graph

   javascript

   Copy

   storm.createBufferGraph
   

2. Buffer Stability Graph - Shows buffer stability over time (same as Buffer Stability Label).

   Buffer stability graph

   javascript

   Copy

   storm.createBufferStabilityGraph
   

3. Bandwidth Graph - Visualizes current bandwidth consumption (same as Current Bandwidth).

   Bandwidth graph

   javascript

   Copy

   storm.createBandwidthGraph
   

Drawing Graphs

To render a graph, attach it to a DOM element with defined dimensions (width and height), set the refresh interval in milliseconds, and call the start() method. To stop the graph and its internal timer, use stop().

Graph usage example

javascript

Copy

const graph1 = storm.createBufferGraph("graph1", 50).start();

// Later, to stop the graph:
graph1.stop();