Statistics & Performance - Storm JavaScript Library

In this guide, we’ll explain how to retrieve and interpret statistical data from the Storm JavaScript Library. This includes bandwidth measurements, buffer metrics, and real-time performance charts.

Bandwidth

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

• Current Bandwidth

  The average bandwidth usage currently measured, reported in bytes per second.

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

  
  
• Minimal Bandwidth

  The lowest measured bandwidth value recorded within the last 5 seconds.

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

  
  
• Max Bandwidth

  The highest measured bandwidth value recorded within the last 5 seconds.

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

  
  
• Bandwidth Stability Trend

  Indicates the current stability trend of the bandwidth. Possible values are:

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

  • 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).
  
  
• Bandwidth Stability Trend Duration

  Indicates the duration (in seconds) for which the current trend has been active.

                                  
  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 JavaScript Library allows full configuration of buffer size thresholds, playback start logic, buffering behavior, and even buffer trimming via playback acceleration.

• Buffer Size

  The current size of the buffer, in seconds.

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

  
  
• Buffer Stability Label

  Describes the current health of the buffer. Possible values are:

  • 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).

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

  
  
• Buffer Standard Deviation

  Standard deviation of recent buffer measurements. Lower values indicate a more stable buffer.

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

  
  

Performance Graphs

The Storm JavaScript Library can generate real-time charts to monitor buffer size, stability, and bandwidth consumption.

Available Graphs:

• Buffer Graph

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

                                  
  storm.createBufferGraph
                              

  
  
• Buffer Stability Graph

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

                                  
  storm.createBufferStabilityGraph
                              

  
  
• Bandwidth Graph

  Visualizes current bandwidth consumption (same as Current Bandwidth).

                                  
  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().

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

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