CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-hls-js

JavaScript HLS client using MediaSourceExtension for smooth video stream playback

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

quality-control.mddocs/

Quality Control & Adaptive Bitrate

HLS.js provides comprehensive quality level management with automatic adaptive bitrate (ABR) selection and manual control options.

Capabilities

Quality Levels

Access available quality levels and current selection.

interface Hls {
  /** Available quality levels (read-only) */
  readonly levels: Level[];
  
  /** Current quality level index (-1 for auto) */
  currentLevel: number;
  
  /** Next quality level to be loaded */
  nextLevel: number;
  
  /** Quality level for loading segments */
  loadLevel: number;
  
  /** Next load level to be used */
  nextLoadLevel: number;
  
  /** First level index to use */
  firstLevel: number;
  
  /** Starting level for playback */
  startLevel: number;
  
  /** Whether auto level selection is enabled (read-only) */
  readonly autoLevelEnabled: boolean;
  
  /** Manual level setting (-1 if auto) (read-only) */
  readonly manualLevel: number;
}

Usage Examples:

const hls = new Hls();

// Wait for manifest to be parsed
hls.on(Hls.Events.MANIFEST_PARSED, () => {
  console.log("Available levels:", hls.levels.length);
  
  // Print all quality levels
  hls.levels.forEach((level, index) => {
    console.log(`Level ${index}: ${level.width}x${level.height} @ ${level.bitrate}bps`);
  });
  
  // Set manual quality level
  hls.currentLevel = 2; // Select level 2
  
  // Enable auto quality selection
  hls.currentLevel = -1;
  
  // Set starting level for future streams
  hls.startLevel = 1;
});

// Listen for quality level changes
hls.on(Hls.Events.LEVEL_SWITCHING, (event, data) => {
  console.log(`Switching to level ${data.level}`);
});

hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
  console.log(`Switched to level ${data.level}`);
});

Bandwidth Estimation

Monitor and control bandwidth estimation for ABR decisions.

interface Hls {
  /** Current bandwidth estimate in bps */
  bandwidthEstimate: number;
  
  /** Default EWMA bandwidth estimate (read-only) */
  readonly abrEwmaDefaultEstimate: number;
  
  /** Time to first byte estimate (read-only) */
  readonly ttfbEstimate: number;
}

Usage Examples:

const hls = new Hls();

// Monitor bandwidth changes
hls.on(Hls.Events.FRAG_LOADED, () => {
  console.log("Current bandwidth estimate:", hls.bandwidthEstimate, "bps");
  console.log("TTFB estimate:", hls.ttfbEstimate, "ms");
});

// Set initial bandwidth estimate
hls.bandwidthEstimate = 2000000; // 2 Mbps

// Access default estimate
console.log("Default estimate:", hls.abrEwmaDefaultEstimate);

ABR Controller Access

Access the adaptive bitrate controller for advanced operations.

class AbrController {
  /**
   * Reset the bandwidth estimator
   * @param abrEwmaDefaultEstimate - Optional default estimate override
   */
  resetEstimator(abrEwmaDefaultEstimate?: number): void;
}

Usage Example:

const hls = new Hls();

// Access ABR controller (after initialization)
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
  // Reset bandwidth estimator
  (hls as any).abrController?.resetEstimator(1000000); // Reset to 1 Mbps
});

Level Capping

Control level capping based on player dimensions.

interface Hls {
  /** Auto level capping based on player size */
  autoLevelCapping: number;
  
  /** Maximum HDCP level supported */
  maxHdcpLevel: HdcpLevel;
}

Usage Examples:

const hls = new Hls({
  // Cap levels based on player size
  capLevelToPlayerSize: true,
  // Cap levels on FPS drops
  capLevelOnFPSDrop: true
});

// Monitor level capping
console.log("Auto level capping:", hls.autoLevelCapping);

// Set HDCP level limit
hls.maxHdcpLevel = "TYPE-1";

Level Events

Quality level related events for monitoring ABR behavior.

// Level switching events
hls.on(Hls.Events.LEVEL_SWITCHING, (event, data: { level: number }) => {
  // Called when starting to switch to a new level
});

hls.on(Hls.Events.LEVEL_SWITCHED, (event, data: { level: number }) => {
  // Called when switch to new level is complete
});

hls.on(Hls.Events.LEVEL_LOADING, (event, data: { level: number, url: string }) => {
  // Called when starting to load a level playlist
});

hls.on(Hls.Events.LEVEL_LOADED, (event, data: { 
  level: number,
  details: LevelDetails,
  stats: LoadStats 
}) => {
  // Called when level playlist is loaded
});

hls.on(Hls.Events.LEVEL_UPDATED, (event, data: {
  level: number,
  details: LevelDetails
}) => {
  // Called when level playlist is updated (live streams)
});

Types

interface Level {
  /** Bitrate in bits per second */
  readonly bitrate: number;
  
  /** Video width in pixels */
  readonly width: number;
  
  /** Video height in pixels */  
  readonly height: number;
  
  /** Codec information string */
  readonly codecSet: string;
  
  /** Playlist URLs */
  readonly url: string[];
  
  /** Level details (after loading) */
  readonly details: LevelDetails | undefined;
  
  /** Frame rate */
  readonly frameRate: number | undefined;
  
  /** Video range (SDR, HDR10, etc.) */
  readonly videoRange: VideoRange | undefined;
  
  /** HDCP level requirement */
  readonly hdcpLevel: HdcpLevel | undefined;
}

interface LevelDetails {
  /** Total duration in seconds */
  readonly totalduration: number;
  
  /** Target duration for segments */
  readonly targetduration: number;
  
  /** Fragments in this level */
  readonly fragments: Fragment[];
  
  /** Live stream info */
  readonly live: boolean;
  
  /** Sequence number */
  readonly startSN: number;
  readonly endSN: number;
}

type HdcpLevel = "TYPE-0" | "TYPE-1" | null;

type VideoRange = "SDR" | "HDR10" | "HLG" | "HDR10+" | "DV";

docs

advanced.md

browser-support.md

core-player.md

error-handling.md

events.md

index.md

live-streaming.md

quality-control.md

tracks.md

tile.json