hls-browser-downloader

Browser-based HLS video downloader and MP4 generator powered by FFmpeg.wasm.

Download HLS streams directly in the browser from .m3u8 playlists, fetch video/audio segments, mux them into a final MP4, and optionally trigger automatic file download.

Supports:

• HLS master playlists
• Resolution selection
• TS video segments
• AAC audio segments
• FFmpeg MP4 muxing
• IndexedDB storage
• Blob output
• Automatic browser download

Features

• Pure browser environment
• No backend required
• FFmpeg.wasm powered
• Automatic MP4 generation
• Resolution selection support
• Works with HLS master playlists
• IndexedDB chunk storage
• TypeScript support
• ESM package
• Modern browser support

Install

npm install hls-browser-downloader

Usage

import {
  createDownloader
} from "hls-browser-downloader"

const result =
  await createDownloader(

    // HLS master playlist
    "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8",

    // Resolution
    "1920x1080",

    // Automatically download MP4
    false,

    // Output file name
    "movie"
  )

console.log(result)

Returned Value

{
  finalBlob,
  nameforblob
}

| Field | Type | Description | | ----------- | ------ | ------------------- | | finalBlob | Blob | Final generated MP4 | | nameforblob | string | Output file name |

Function Signature

createDownloader(
  manifest,
  resolution,
  localDownload,
  nameforblob
)

Arguments

| Argument | Type | Description | | ------------- | ------- | -------------------------- | | manifest | string | HLS master playlist URL | | resolution | string | Video quality to download | | localDownload | boolean | Automatically download MP4 | | nameforblob | string | Final output file name |

Example

await createDownloader(

  "master.m3u8",

  "1280x720",

  true,

  "movie"
)

Result:

movie.mp4

will automatically download through the browser download manager.

Create Video URL

const {
  finalBlob
} =
  await createDownloader(...)

const url =
  URL.createObjectURL(
    finalBlob
  )

video.src = url

Manual Download

const {
  finalBlob,
  nameforblob
} =
  await createDownloader(...)

const a =
  document.createElement("a")

a.href =
  URL.createObjectURL(
    finalBlob
  )

a.download =
  `${nameforblob}.mp4`

a.click()

IndexedDB Helper

Retrieve previously stored blobs from IndexedDB.

import {
  getFinalBlob
} from "hls-browser-downloader"

const blob =
  await getFinalBlob("video-key")

TypeScript Support

Built-in TypeScript typings included.

const result =
  await createDownloader(
    manifest,
    "1920x1080",
    false,
    "movie"
  )

result.finalBlob
result.nameforblob

Browser Support

Works in modern browsers supporting:

• Fetch API
• IndexedDB
• WebAssembly
• Blob
• URL.createObjectURL

Recommended browsers:

• Chrome
• Edge
• Brave
• Firefox

Important Notes

• Some HLS streams may use DRM or encrypted segments.
• DRM-protected streams are not supported.
• Large videos may consume significant browser memory/storage.
• FFmpeg.wasm initialization may take a few seconds on first load.

License

MIT

Repository

https://github.com/varadTheDeveloper/hls-browser-downloader