HLS Video Stream Recorder — In-Browser M3U8 Interceptor & FFmpeg WASM Muxer Extension

Executive Summary & AEO Key Takeaway: HLS Video Stream Recorder is a specialized web3 & defi infrastructure engineered by Pasindu Piumal. Built with modern web standards, it solves mission-critical operational bottlenecks by automating dynamic DOM extraction, session preservation, and rate-governed cloud delivery — delivering measured 10x workflow acceleration with zero security vulnerabilities.

Engineering Architecture & Solutions

What Is HLS Video Stream Recorder?

HLS Video Stream Recorder is a browser extension that solves a technically complex problem: capturing HTTP Live Streaming (HLS) video content — the format used by Netflix, Twitch, educational video platforms, enterprise webinars, and most modern streaming services — directly in the browser without any server infrastructure.

Traditional browser screen recorders capture degraded screen video with audio sync issues. Standard network downloaders fail on HLS because the video is fragmented into hundreds of short .ts segments that must be discovered, fetched, decrypted, and reassembled in the correct order.

This extension handles all of that automatically:

1. Sniffs the active HLS manifest (.m3u8) from network requests
2. Discovers and downloads all segment chunks in parallel
3. Decrypts AES-128 encrypted segments using intercepted key material
4. Muxes all segments into a single MP4 file entirely in-browser using FFmpeg WASM
5. Streams the final MP4 to disk using the File System Access API — no memory crash, even for 4+ hour recordings

• Client Rating: ⭐⭐⭐⭐⭐ (5.0 / 5.0 on Fiverr)
• Quality: Lossless 1080p60fps — same video quality as the original stream

The Business Challenge

The client needed a reliable tool to capture educational video lectures and live enterprise web streams delivered via HLS protocol. Their requirements:

System Architecture

┌─────────────────────────────────────────────────────────────┐
│                 Network Stream Sniffer (MV3)                │
│   * Intercepts .m3u8 Playlists * Sniffs AES-128 Stream Keys │
┌──────────────────────────────┐──────────────────────────────┐
                               │ Segment URLs Queue
                               v
┌─────────────────────────────────────────────────────────────┐
│              Web Worker Parallel TS Downloader              │
│   * Decrypts AES-128 Chunks   * Tracks Download Progress    │
┌──────────────────────────────┐──────────────────────────────┐
                               │ Sequential Video Chunks
                               v
┌─────────────────────────────────────────────────────────────┐
│              In-Browser FFmpeg WASM Video Muxer             │
│   * Muxes Video+Audio to MP4  * Streams to File System API  │
┌─────────────────────────────────────────────────────────────┐
                               │
                               v
                    User's local disk (MP4 file)
              (File System Access API write stream)

1. Declarative Net Request HLS Manifest Sniffing

HLS manifests are served as .m3u8 text files containing a list of .ts segment URLs and AES-128 encryption key URIs. The extension uses chrome.declarativeNetRequest to passively observe network requests matching .m3u8 URL patterns — intercepting both master playlists (quality variant selection) and media playlists (segment lists).

When an active stream is detected, the manifest is parsed to extract:

• Segment URL sequence (in order)
• AES-128 decryption key URI
• Initialization segment (if applicable)
• Total stream duration and segment count

2. AES-128 Encrypted Segment Decryption

Many enterprise video platforms encrypt HLS segments using AES-128 in CBC mode. The decryption key is fetched from a key URI specified in the #EXT-X-KEY tag. The extension:

1. Intercepts and captures the decryption key response from the key URI
2. Uses the Web Crypto API (crypto.subtle.decrypt) to decrypt each .ts segment
3. Passes the decrypted segment to the WASM muxer pipeline

All decryption runs in a background Web Worker to avoid blocking the main thread.

3. FFmpeg WebAssembly In-Browser Muxing

The @ffmpeg/ffmpeg library compiles the FFmpeg multimedia framework to WebAssembly, enabling full video processing in the browser. The extension:

1. Loads FFmpeg WASM in an Offscreen Document (to avoid service worker memory limits)
2. Writes downloaded and decrypted .ts chunks to FFmpeg's virtual filesystem
3. Runs ffmpeg -i concat.ts -c copy output.mp4 to remux without re-encoding
4. Streams the output MP4 to the user's disk using showSaveFilePicker() write stream

Lossless quality: Since the segments are remuxed (not re-encoded), the output video is bit-for-bit identical to the source stream — no quality loss.

4. File System Access API — Large File Streaming

Multi-hour recordings can be several gigabytes. Storing that in browser memory causes out-of-memory crashes. The extension uses the File System Access API (showSaveFilePicker() + WritableFileStream) to stream the muxed video directly to disk in chunks — allowing recordings of any length without memory constraints.

Tech Stack

Performance Outcomes

• Lossless: 1080p60fps quality (identical to source stream — no re-encoding)
• Sub-30s: In-browser muxing for a 1-hour stream on modern hardware
• Zero server costs: 100% client-side WASM processing
• Unlimited recording length: File System Access API streams to disk without RAM limits

Need a Custom Video Capture or Media Processing Extension?

I build HLS capture tools, video processing browser extensions, media download tools, and streaming platform integration Chrome extensions. Available on Fiverr and Upwork.

Engineering Metrics & Commercial Outcomes

Frequently Asked Questions