Why this tutorial exists

Most "download this video" solutions fall into two buckets, and both are awkward:

1. Online parser websites — you paste your video link into someone else's server. That means handing over what you're watching, plus whatever metadata travels with the request.

2. Desktop clients — powerful, but they usually want an account, sometimes upload data, and often feel like more attack surface than you signed up for.

FlowPick takes a different route. It's an open-source downloader where all processing — sniffing, downloading, decrypting, merging, transcoding — happens in your browser via FFmpeg compiled to WebAssembly. Your media never leaves your machine. In this guide we'll go from zero to a running, customizable instance.

🔗 Source: https://github.com/ezwebtools/flowpick · Hosted tools: https://flowpick.net

Learning objectives

By the end of this tutorial you will be able to:

• Run FlowPick locally with pnpm dev

• Download an HLS (.m3u8) and a DASH (.mpd) stream

• Build and deploy the static (or Node) output

• Customize copy, engine behavior, and config

Background: HLS and DASH in 30 seconds

• HLS exposes a .m3u8 manifest listing small segments (usually .ts). Common for live streams.

• DASH exposes a .mpd manifest; video and audio typically arrive as separate .m4s tracks.

Neither is a single file — both are playlists of tiny segments. A downloader fetches every segment, decrypts if necessary, and stitches them into one file. FlowPick does exactly this, client-side.

What FlowPick is

FlowPick is a Nuxt 4 application with two product shapes that share one core engine:

1. A browser extension that monitors the active tab's network requests and lists detected media.

2. An online tool website with dedicated M3U8 and DASH downloaders.

It supports HLS, DASH, plain video/audio, and images. AES-128 encrypted HLS is decrypted in-browser with the Web Crypto API — the key is used locally and never uploaded.

Prerequisites

node -v   # v20.x+
pnpm -v

Step 1 — Clone and install

git clone https://github.com/ezwebtools/flowpick.git
cd flowpick
pnpm install

The postinstall hook runs nuxt prepare, which generates type declarations and the route manifest. The first install is slower than usual because of this — expected. If it's interrupted, recover with pnpm exec nuxt prepare.

Step 2 — Run locally

pnpm dev

Visit http://localhost:3000. Useful routes:

• /m3u8-downloader — HLS

• /dash-downloader — DASH

• /docs — documentation

• /blog — tutorials

If you'd rather not install anything yet, the hosted tools are available at https://flowpick.net/m3u8-downloader and https://flowpick.net/dash-downloader.

🔗 Live: https://flowpick.net · M3U8: https://flowpick.net/m3u8-downloader · DASH: https://flowpick.net/dash-downloader

Step 3 — Download your first stream

HLS

1. On a page serving .m3u8, open DevTools (F12) → Network, filter m3u8.

2. Play the video a few seconds so the manifest is requested.

3. Right-click the .m3u8 request → Copy link address.

4. Paste it into the M3U8 Downloader and click Parse.

5. Select a quality and click Start Download.

FlowPick downloads segments, decrypts (if AES-128), and merges. For MP4 it remuxes in-browser:

ffmpeg -i input.ts -c copy output.mp4

No re-encoding, no quality loss, no server round-trip.

DASH

Paste the .mpd URL into the DASH Downloader, pick video and audio tracks, and FlowPick merges A/V automatically — necessary because DASH keeps the two streams separate.

Step 4 — Build and deploy

pnpm build
pnpm preview

The default Nitro preset is cloudflare-pages-static, so the build outputs static assets in .output/. Deploy them to any static host (Cloudflare Pages, Netlify, Vercel, or your own cloud). For a Node server, set nitro.preset to node-server, rebuild, and run node .output/server/index.mjs.

Critical: the downloader routes emit two headers —

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

These enable cross-origin isolation, required for FFmpeg WASM multithreading (SharedArrayBuffer) and for StreamSaver large-file writes. Removing them degrades large downloads.

Step 5 — Customize

• Content: content/ holds Markdown/YAML, validated by Zod. Edit copy or add pages; changes are live on reload.

• Engine: app/composables/useStreamMerge.ts controls concurrency (default 2, range 1–8), retry (exponential backoff, max 3), and the write fallback chain.

• Config: nuxt.config.ts defines i18n (en / zh-Hans / zh-Hant / ja / ko), analytics env vars (NUXT_PUBLIC_GA_ID, NUXT_PUBLIC_CLARITY_ID), and the route headers.

The engine's input contract is small and explicit:

export interface StreamMergeOptions {
  segments: ArrayBuffer[] | AsyncGenerator<ArrayBuffer>
  totalSegments: number
  filename: string
  outputFormat?: 'mp4' | 'ts'
  onProgress?: (progress: StreamMergeProgress) => void
  signal?: AbortSignal
}

How the engine works

Two composables do the heavy lifting:

• useStreamMerge.ts — downloads segments with a Worker Pool (shared counter, so workers never idle), decrypts AES-128 via Web Crypto, concatenates (TS) or remuxes (MP4) via FFmpeg, then writes.

• useFFmpeg.ts — loads @ffmpeg/ffmpeg (WASM), detects multithreading, runs merge/remux.

The write strategy degrades gracefully:

Caveats

• DRM (Widevine, etc.) cannot be decoded — by design.

• Web tool is CORS-limited — if the stream server lacks cross-origin headers, use the extension.

• FFmpeg WASM is ~8 MB first load (cached after).

• Chrome/Edge give the best large-file experience; Safari uses Blob mode.

Download only content you're permitted to. Respect platform terms and local laws; keep files for personal/offline use.

Key takeaways

• FlowPick processes everything client-side — no uploads, no accounts.

• It handles HLS, DASH, audio, and images, with in-browser AES-128 decryption.

• Deployment is flexible: static host or Node server, both needing the COOP/COEP headers.

• The engine is small, typed, and easy to tweak.

Wrap-up

You now have the full loop: clone → run → download → build → deploy → customize. FlowPick is open source at https://github.com/ezwebtools/flowpick, and the hosted tools are ready at https://flowpick.net (M3U8: https://flowpick.net/m3u8-downloader, DASH: https://flowpick.net/dash-downloader).

If you found this useful, consider starring the repo and sharing it with a teammate who's tired of sketchy parser sites.