線上工具

FlowPick 除了瀏覽器擴充功能外，還提供了兩個獨立的線上工具頁面，無需安裝任何軟體即可下載串流媒體。這些工具與擴充功能共享相同的下載引擎，但執行在網頁環境中。

什麼時候用線上工具

線上工具是擴充功能的補充方案，適合以下場景：

與擴充功能的區別

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. 開始下載：點擊下載按鈕，工具會自動下載所有分片並合併

支援的清單類型

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 加密串流，工具會：

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 進行容器轉換

進度資訊

下載過程中即時顯示：

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

FMP4 支援

對於使用 FMP4（Fragmented MP4）封裝的 DASH 串流，下載器支援：

• 識別 urn:mpeg:dash:ffmpeg:2013 等 FMP4 識別碼
• 下載初始化分片（init segment）和媒體分片
• 使用 FFmpeg WASM 將 FMP4 分片重組為標準 MP4

加密支援

通用功能

儲存目錄選擇

兩個線上工具都支援 File System Access API 的目錄持久化功能：

1. 點擊「選擇儲存目錄」按鈕
2. 在彈出的系統對話框中選擇目標資料夾
3. 授權後，所有後續下載直接寫入該目錄
4. 目錄名稱顯示在介面上，可隨時清除或更換

技術實作：

• 使用 window.showDirectoryPicker() 取得目錄控制代碼
• 透過 handle.requestPermission({ mode: 'readwrite' }) 請求持久化權限
• 目錄名稱快取在 localStorage 中用於 UI 顯示
• 權限狀態透過 navigator.permissions.query() 靜默檢查

寫入策略優先級

下載引擎按以下優先級選擇檔案寫入方式：

錯誤處理

下載過程中可能遇到的錯誤及處理方式：

下載完成後

下載完成後提供以下操作：

• 複製路徑：將檔案儲存路徑複製到剪貼簿
• 下載另一個：重設狀態，準備下一次下載
• 清除儲存目錄：移除目錄授權

技術限制

線上工具與擴充功能版本相比存在以下限制：

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

典型使用場景

場景一：快速下載已知串流位址

取得 M3U8 URL → 開啟 /m3u8-downloader → 貼上 → 選擇畫質 → 下載

適合已經透過 F12 開發者工具取得串流位址的場景。參考 影片平台 — 手動取得 URL。

場景二：臨時設備下載

公共電腦 → 開啟 FlowPick 網站 → 貼上串流位址 → 下載到 USB 隨身碟

無需安裝任何軟體，適合公司電腦、學校機房、網咖等無法安裝擴充功能的環境。

場景三：批次下載多個串流

收集所有 M3U8 URL → 逐個在線上工具中下載 → 佇列自動管理

適合需要下載多個課程影片或系列影片的場景。參考 線上課程下載。

相關文件

• 安裝指南 — 瀏覽器擴充功能的安裝方法
• 使用指南 — 擴充功能和線上工具的完整操作指南
• 影片嗅探 — HLS/DASH 協定的偵測原理
• 格式轉換 — TS→MP4 轉封裝與 FFmpeg WASM
• 批次下載 — 多資源佇列管理
• 隱私與安全 — 本機處理，零資料上傳
• 下載引擎架構 — 並行下載與寫入策略
• 瀏覽器相容性 — FSA/StreamSaver 支援情況
• 影片平台下載 — 各平台串流位址取得方法
• 線上課程下載 — 課程影片批次下載
• 直播回放儲存 — 大檔案串流下載
• 常見問題排查 — CORS 錯誤等問題的診斷
• 已知問題 — 線上工具的已知限制