Online Tools

In addition to the browser extension, FlowPick provides two independent online tool pages that allow downloading streaming media without installing any software. These tools share the same download engine as the extension but run in a web environment.

When to Use Online Tools

Online tools are a supplementary solution to the extension, suitable for following scenarios:

Differences from Extension

M3U8/HLS Stream Downloader

Access path: /m3u8-downloader

Overview

M3U8 downloader specifically handles HLS (HTTP Live Streaming) streaming protocol. Supports both Master Playlist and Media Playlist manifest formats.

For detailed principles of HLS protocol (Master Playlist vs Media Playlist, segment structure, encryption mechanism), see Video Sniffing — HLS Streams.

Usage Flow

1. Get M3U8 URL: Obtain .m3u8 address from browser developer tools (Network panel) or third-party tools
2. Paste URL: Paste address into input field, tool will automatically parse manifest
3. Select quality: If Master Playlist, select target resolution from quality list
4. Configure parameters: Set concurrent thread count, output format, and filename
5. Start download: Click download button, tool will automatically download all segments and merge

Supported Manifest Types

Master Playlist (Multi-bitrate)

Contains multiple sub-streams of different qualities. After parsing, displays quality selector:

1080p · 5.2 Mbps · avc1.640028
720p · 2.8 Mbps · avc1.64001f
480p · 1.2 Mbps · avc1.64001e

After selecting a quality, tool will download corresponding Media Playlist and get segment list.

Media Playlist (Single-bitrate)

Directly contains TS segment list, no need to select quality. After parsing, directly displays segment count and estimated size.

Encryption Support

M3U8 downloader supports following encryption methods:

For AES-128 encrypted streams, tool will:

1. Parse #EXT-X-KEY tag to get key URI
2. Download key file
3. Use Web Crypto API (crypto.subtle.decrypt) to decrypt each segment in browser
4. Merge decrypted segments into final file

Segment Download & Merge

Download process is divided into three phases:

Phase 1: Parsing (0% ~ 5%)

• Download and parse M3U8 manifest
• Extract segment URI list
• Sample estimate total size

Phase 2: Download (5% ~ 85%)

• Multi-threaded concurrent segment download
• Real-time display of progress, speed, and estimated remaining time
• Auto-retry failed segments (up to 3 times, exponential backoff)

Phase 3: Merge (85% ~ 100%)

• Concatenate segments in order
• For TS format: Direct binary concatenation (fastest)
• For MP4 output: Use FFmpeg WASM for container conversion

Progress Information

Real-time display during download:

MPD/DASH Stream Downloader

Access path: /dash-downloader

Overview

DASH downloader handles MPEG-DASH streaming protocol. Unlike HLS, DASH streams' video and audio are usually separated and need to be downloaded separately then merged.

For detailed principles of DASH protocol (MPD structure, audio-video separation, FMP4 packaging), see Video Sniffing — DASH Streams.

Usage Flow

1. Get MPD URL: Obtain .mpd address from browser developer tools
2. Paste URL: Paste address into input field
3. Select quality: Select from parsed video stream list
4. Configure parameters: Set concurrent thread count and filename
5. Start download: Tool automatically downloads video and audio segments and merges them

MPD Manifest Parsing

DASH downloader uses mpd-parser library to parse MPD manifest, extracting following information:

• Period: Time period definition
• AdaptationSet: Media type grouping (video/audio)
• Representation: Specific quality/bitrate options
• SegmentTemplate / SegmentList: Segment URL pattern

Parsing results sorted by bitrate descending, display format:

1080p · 5.2 Mbps · avc1.640028
720p · 2.8 Mbps · avc1.64001f

Audio-Video Separate Processing

A key characteristic of DASH streams is that video and audio tracks are separated. Downloader processing flow:

1. Parse MPD, identify video and audio AdaptationSets
2. After user selects video quality, auto-match best audio stream (usually highest bitrate)
3. Parallel download of video segments and audio segments
4. Use FFmpeg WASM to merge video and audio into single MP4 file

Merge command equivalent to:

ffmpeg -f concat -i video_list.txt -f concat -i audio_list.txt \
  -c:v copy -c:a copy -movflags +faststart output.mp4

FMP4 Support

For DASH streams using FMP4 (Fragmented MP4) packaging, downloader supports:

• Identify FMP4 identifiers like urn:mpeg:dash:ffmpeg:2013
• Download init segments and media segments
• Use FFmpeg WASM to reassemble FMP4 segments into standard MP4

Encryption Support

Common Features

Save Directory Selection

Both online tools support File System Access API's directory persistence feature:

1. Click "Select Save Directory" button
2. Select target folder in system dialog that pops up
3. After authorization, all subsequent downloads write directly to that directory
4. Directory name displayed on interface, can be cleared or changed anytime

Technical Implementation:

• Use window.showDirectoryPicker() to get directory handle
• Request persistent permission via handle.requestPermission({ mode: 'readwrite' })
• Directory name cached in localStorage for UI display
• Permission status silently checked via navigator.permissions.query()

Write Strategy Priority

Download engine selects file writing method by following priority:

Error Handling

Errors that may be encountered during download and how they're handled:

After Download Completion

Following operations provided after download completion:

• Copy path: Copy file save path to clipboard
• Download another: Reset state, prepare for next download
• Clear save directory: Remove directory authorization

Technical Limitations

Online tools have following limitations compared to extension version:

1. Cross-origin restrictions: Browser same-origin policy may block downloading segments from certain CDNs. Extension version can bypass some restrictions via webRequest permissions
2. Referer validation: Some streaming servers require specific Referer headers, which online tools cannot customize
3. Service Worker dependency: StreamSaver write strategy requires Service Worker support, and requires page to set correct COEP/COOP headers
4. SharedArrayBuffer: FFmpeg WASM multi-threaded mode requires SharedArrayBuffer, which requires page to set Cross-Origin-Isolated header

FlowPick website has configured necessary security headers to support these features:

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

Typical Use Cases

Scenario 1: Quick Download of Known Stream Address

Get M3U8 URL → Open /m3u8-downloader → Paste → Select quality → Download

Suitable for scenarios where stream address has been obtained via F12 developer tools. Refer to Video Platforms — Manual URL Retrieval.

Scenario 2: Temporary Device Download

Public computer → Open FlowPick website → Paste stream address → Download to USB drive

No software installation needed, suitable for environments like company computers, school computer labs, internet cafes where extensions cannot be installed.

Scenario 3: Batch Download Multiple Streams

Collect all M3U8 URLs → Download each one in online tool → Queue auto-managed

Suitable for scenarios needing to download multiple course videos or series videos. Refer to Online Courses Download.

Related Documentation

• Installation Guide — Browser extension installation method
• Usage Guide — Complete operation guide for extension and online tools
• Video Sniffing — Detection principles for HLS/DASH protocols
• Format Conversion — TS→MP4 remuxing and FFmpeg WASM
• Batch Download — Multi-resource queue management
• Privacy & Security — Local processing, zero data upload
• Download Engine Architecture — Concurrent download and write strategies
• Browser Compatibility — FSA/StreamSaver support status
• Video Platform Downloads — Stream address retrieval methods for various platforms
• Online Courses Download — Course video batch download
• Live Replay Saving — Large file streaming download
• Common Issues Troubleshooting — Diagnosis of CORS errors and other issues
• Known Issues — Known limitations of online tools