HLS Stats

This feature is still in Beta. To know more or report any issues, feel free to reach out to us over Discord.

@100ms-live/hls-stats is a simple library that provides easy to use APIs for acquiring stats for your HLS Stream.


Initializing is very simple. Just initialize Hls.js and pass that reference as well as a video element to HLSStatsand you are already done.

import Hls from 'hls.js'; /** * Initialize Hls.js and attach the video element. */ const hlsUrl = 'http://my-domain/stream.m3u8'; const hlsInstance = new Hls(); hlsInstance.loadSource(hlsUrl); hlsInstance.attachMedia(videoEl); /** * initialize HlsStats */ const hlsStats = new HlsStats(hlsInstance, videoEl);

Subscribing to Stats

hlsStats have a subscribe function which takes two parameter. a callbackFn and an interval in ms. The interval tells how frequent you want hls-stats to report back to you. Default is 2000ms.

const unsubscribe = hlsStats.subscribe((state) => { // ... });

the subscribe() also returns a reference to unsubscribe() function which could later be used to unsubscribe from your subscription

Exposed Stats

hls-stats currently exposes the following stats

bandwidthEstimateThe current bandwidth, as seen by the playerbits per secondUse this to show the current network speed of the user
bitrateserver indicated bitrate of current layer of HLS streambits per secondUse to know the bitrate required for current layer
bufferedDurationbuffered duration from the current positionmsThis can be used to show how much data is buffered from the current location (forward buffer)
distanceFromLiveEdgeThe distance from the live edgemsUsed to know currently buffered duration ahead
droppedFramesThe number of dropped frames till nowUsed to calculate the total number of dropped frames
videoSize.width videoSize.heightThe width and height of the videopxUsed to know the resolution being played
watchDurationTotal duration watchedmsused to know the overall watch duration (not the stream length)

Have a suggestion? Recommend changes ->

Was this helpful?