在线工具

无需安装浏览器扩展即可使用 FlowPick 的 M3U8/HLS 和 MPD/DASH 在线下载器：获取公开流地址、粘贴 URL、选择画质并在浏览器中下载。

FlowPick 除了浏览器扩展外，还提供了两个独立的在线工具页面，无需安装任何软件即可下载流媒体。这些工具与扩展共享相同的下载引擎，但运行在网页环境中。

什么时候用在线工具

在线工具是扩展的补充方案，适合以下场景：

场景推荐方式原因
日常浏览中随时下载浏览器扩展自动检测，一键下载
已有流地址，只想快速下载在线工具无需安装，打开即用
无法安装扩展的环境（公司电脑、公共设备）在线工具纯网页，无安装要求
需要批量下载多个已知 URL在线工具 + 批量下载逐个粘贴，队列管理
遇到 CORS 限制浏览器扩展扩展权限可绕过同源策略
如果不确定用哪种方式，优先安装扩展。在线工具适合"手头有流地址，不想装扩展"的临时场景。详见 安装指南。

与扩展的区别

特性浏览器扩展在线工具
自动检测媒体支持，页面加载时自动嗅探不支持，需手动粘贴 URL
安装要求需要安装扩展无需安装，打开网页即可
跨域限制扩展权限可绕过部分限制受浏览器同源策略约束
下载引擎相同相同
保存目录选择支持支持
适用场景日常浏览中的随时下载已有流 URL 的快速下载
在线工具和扩展使用完全相同的下载引擎（useStreamMerge），下载速度、合并逻辑、加密解密能力完全一致。唯一的区别在于媒体检测方式。

M3U8/HLS 流媒体下载器

访问路径：/m3u8-downloader

功能概述

M3U8 下载器专门处理 HLS（HTTP Live Streaming）流媒体协议。支持 Master Playlist 和 Media Playlist 两种清单格式。

关于 HLS 协议的详细原理（Master Playlist vs Media Playlist、分片结构、加密机制），请参阅 视频嗅探 — HLS 流。

使用流程

  1. 获取 M3U8 URL：从浏览器开发者工具（Network 面板）或第三方工具获取 .m3u8 地址
  2. 粘贴 URL：将地址粘贴到输入框中，工具会自动解析清单
  3. 选择画质：如果是 Master Playlist，从画质列表中选择目标分辨率
  4. 配置参数：设置并发线程数、输出格式和文件名
  5. 开始下载：点击下载按钮，工具会自动下载所有分片并合并
不知道如何获取 M3U8 地址？参考 视频平台 — 手动获取 URL 模式 中的 F12 开发者工具操作指南。

支持的清单类型

Master Playlist（多码率清单）

包含多个不同画质的子流。解析后显示画质选择器：

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

选择某个画质后，工具会下载对应的 Media Playlist 并获取分片列表。

Media Playlist（单码率清单）

直接包含 TS 分片列表，无需选择画质。解析后直接显示分片数量和预估大小。

加密支持

M3U8 下载器支持以下加密方式：

加密方式支持状态说明
AES-128 CBC完整支持自动获取密钥并解密分片
SAMPLE-AES不支持需要专用解码器
Clear Key不支持DRM 保护内容
Widevine / PlayReady不支持商业 DRM，无法解密

对于 AES-128 加密流，工具会：

  1. 解析 #EXT-X-KEY 标签获取密钥 URI
  2. 下载密钥文件
  3. 使用 Web Crypto API（crypto.subtle.decrypt）在浏览器中解密每个分片
  4. 将解密后的分片合并为最终文件
所有解密操作都在浏览器本地完成，密钥和分片数据不会上传到任何服务器。详见 隐私与安全。

分片下载与合并

下载流程分为三个阶段：

阶段一：解析（0% ~ 5%）

  • 下载并解析 M3U8 清单
  • 提取分片 URI 列表
  • 采样预估总大小

阶段二：下载（5% ~ 85%）

  • 多线程并发下载分片
  • 实时显示进度、速度和预计剩余时间
  • 自动重试失败的分片（最多 3 次，指数退避）

阶段三：合并（85% ~ 100%）

  • 将分片按顺序拼接
  • 对于 TS 格式：直接二进制拼接（最快）
  • 对于 MP4 输出：使用 FFmpeg WASM 进行容器转换
关于并发下载的底层实现（Worker Pool、重试策略、内存管理），请参阅 下载引擎架构。关于 TS→MP4 转封装的详细原理，请参阅 格式转换。

进度信息

下载过程中实时显示：

指标说明
进度百分比当前完成的分片数 / 总分片数
下载速度基于滑动窗口的实时速度估算
预计剩余时间根据当前速度和剩余分片数计算
已下载字节数累计下载的数据量

MPD/DASH 流媒体下载器

访问路径：/dash-downloader

功能概述

DASH 下载器处理 MPEG-DASH 流媒体协议。与 HLS 不同，DASH 流的视频和音频通常是分离的，需要分别下载后合并。

关于 DASH 协议的详细原理（MPD 结构、音视频分离、FMP4 封装），请参阅 视频嗅探 — DASH 流。

使用流程

  1. 获取 MPD URL：从浏览器开发者工具获取 .mpd 地址
  2. 粘贴 URL：将地址粘贴到输入框中
  3. 选择画质：从解析出的视频流列表中选择
  4. 配置参数：设置并发线程数和文件名
  5. 开始下载：工具自动下载视频和音频分片并合并

MPD 清单解析

DASH 下载器使用 mpd-parser 库解析 MPD 清单，提取以下信息：

  • Period：时间段定义
  • AdaptationSet：媒体类型分组（视频/音频）
  • Representation：具体的画质/码率选项
  • SegmentTemplate / SegmentList：分片 URL 模式

解析结果按码率降序排列，显示格式：

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

音视频分离处理

DASH 流的一个关键特征是视频和音频轨道分离。下载器处理流程：

  1. 解析 MPD，识别视频和音频 AdaptationSet
  2. 用户选择视频画质后，自动匹配最佳音频流（通常选最高码率）
  3. 并行下载视频分片和音频分片
  4. 使用 FFmpeg WASM 将视频和音频合并为单个 MP4 文件

合并命令等价于：

ffmpeg -f concat -i video_list.txt -f concat -i audio_list.txt \
  -c:v copy -c:a copy -movflags +faststart output.mp4
DASH 音视频合并使用了 FFmpeg WASM 引擎。关于 FFmpeg WASM 的加载机制、内存限制和性能优化，请参阅 格式转换 — FFmpeg WASM 引擎。

FMP4 支持

对于使用 FMP4（Fragmented MP4）封装的 DASH 流，下载器支持：

  • 识别 urn:mpeg:dash:ffmpeg:2013 等 FMP4 标识
  • 下载初始化分片（init segment）和媒体分片
  • 使用 FFmpeg WASM 将 FMP4 分片重组为标准 MP4

加密支持

加密方式支持状态
AES-128 CTR部分支持
Widevine不支持
PlayReady不支持
ClearKey不支持

通用功能

保存目录选择

两个在线工具都支持 File System Access API 的目录持久化功能：

  1. 点击"选择保存目录"按钮
  2. 在弹出的系统对话框中选择目标文件夹
  3. 授权后，所有后续下载直接写入该目录
  4. 目录名显示在界面上，可随时清除或更换

技术实现：

  • 使用 window.showDirectoryPicker() 获取目录句柄
  • 通过 handle.requestPermission({ mode: 'readwrite' }) 请求持久化权限
  • 目录名缓存在 localStorage 中用于 UI 显示
  • 权限状态通过 navigator.permissions.query() 静默检查
File System Access API 需要 Chrome 86+ 或 Edge 86+。如果你的浏览器不支持，会自动降级到 StreamSaver.js 或 Blob 下载。详见 浏览器兼容性。

写入策略优先级

下载引擎按以下优先级选择文件写入方式：

优先级策略内存占用适用条件
1File System Access API极低（流式写入）Chrome 86+、Edge 86+
2StreamSaver.js极低（流式写入）需要 Service Worker 支持
3Blob 下载等于文件大小兜底方案，有 1.5GB 上限
写入策略的详细对比和降级逻辑，请参阅 下载引擎架构 — 写入策略。

错误处理

下载过程中可能遇到的错误及处理方式：

错误类型原因处理方式
HTTP 403资源需要认证或 Referer 校验提示用户检查 URL 是否有效
HTTP 404分片已过期或 URL 错误提示用户重新获取流地址
CORS 错误跨域请求被服务器拒绝建议使用浏览器扩展版本
网络错误连接中断或超时自动重试 3 次
加密不支持遇到不支持的加密方式明确提示无法处理
DRM 保护内容受 DRM 保护提示用户该内容无法下载
遇到 CORS 错误是最常见的问题。此时建议安装 浏览器扩展，扩展可以绕过同源策略限制。更多排查方法请参阅 常见问题排查。

下载完成后

下载完成后提供以下操作：

  • 复制路径：将文件保存路径复制到剪贴板
  • 下载另一个：重置状态，准备下一次下载
  • 清除保存目录：移除目录授权

技术限制

在线工具与扩展版本相比存在以下限制：

  1. 跨域限制：浏览器同源策略可能阻止下载某些 CDN 上的分片。扩展版本通过 webRequest 权限可以绕过部分限制
  2. Referer 校验：部分流媒体服务器要求特定的 Referer 头，在线工具无法自定义
  3. Service Worker 依赖：StreamSaver 写入策略需要 Service Worker 支持，且要求页面设置正确的 COEP/COOP 头
  4. SharedArrayBuffer：FFmpeg WASM 多线程模式需要 SharedArrayBuffer，这要求页面设置 Cross-Origin-Isolated 头

FlowPick 网站已配置了必要的安全头以支持这些功能：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
关于 COEP/COOP 头的技术背景和浏览器兼容性，请参阅 浏览器兼容性 — 安全头要求。

典型使用场景

场景一：快速下载已知流地址

获取 M3U8 URL → 打开 /m3u8-downloader → 粘贴 → 选择画质 → 下载

适合已经通过 F12 开发者工具获取到流地址的场景。参考 视频平台 — 手动获取 URL。

场景二：临时设备下载

公共电脑 → 打开 FlowPick 网站 → 粘贴流地址 → 下载到 U 盘

无需安装任何软件，适合公司电脑、学校机房、网吧等无法安装扩展的环境。

场景三：批量下载多个流

收集所有 M3U8 URL → 逐个在在线工具中下载 → 队列自动管理

适合需要下载多个课程视频或系列视频的场景。参考 在线课程下载。

相关文档

搜索与筛选

FlowPick 弹出窗口里的 URL 搜索（模糊匹配与正则）、类型与大小筛选，以及如何组合它们快速定位资源。

浏览器兼容性

FlowPick 各功能在不同浏览器中的支持情况，包括 API 兼容性矩阵、降级策略和浏览器选择建议。