╔═══════════════════════════════════════════════════════════════╗
║                                                               ║
║    🎥   S C R E E N R E C O R D E R   P R O                  ║
║           全 端 螢 幕 錄 影 工 具 P r o                        ║
║                                                               ║
║         ▸ 本機擷取 ‧ 雙軌混音 ‧ 子母攝影機 ‧ 隱私保護        ║
║                                                               ║
╚═══════════════════════════════════════════════════════════════╝

螢幕錄影工具 Pro (Screenrecorder)

本工具為免安裝的純前端網頁應用程式，能夠直接在瀏覽器中進行高畫質的螢幕錄影與混合錄音。

🗺️ 功能架構地圖 (Functional Map)

線上螢幕錄影工具 Pro (Screenrecorder)
├── 1. 畫面擷取來源核心 (Display Render)
│   ├── 整個電腦螢幕桌面 (全螢幕擷取)
│   ├── 特定應用程式視窗 (鎖定擷取某軟體)
│   └── 特定瀏覽器分頁 (單一網頁隔離擷取)
├── 2. 雙軌錄音混音引擎 (Audio Mixing)
│   ├── 系統聲音 (電腦內部發音)
│   └── 麥克風收音 (外部語音旁白)
├── 3. 特效與合成渲染面 (Canvas Composting)
│   └── 子母畫面網路攝影機 (PiP Webcam)
│       └── 支援全畫面自由拖曳與即時渲染
├── 4. 中控與進度系統 (Control Panel)
│   ├── 錄音狀態狀態機指示 (待錄/進行中/暫停)
│   ├── 大字元精確計時器
│   └── 錄製中斷點控制 (暫停 / 繼續)
└── 5. 輸出打包系統 (Export System)
    ├── 本機端記憶體即時暫存
    ├── 瀏覽器原生影片回放預覽
    └── MP4 / WebM 高畫質實體檔匯出 (一鍵下載)

【功能地圖詳細介紹】

• 畫面擷取來源核心：是系統的眼睛，透過不同的捕捉層級（全螢幕、單一視窗、網頁），讓您能夠確保錄影時不會錄到無關緊要的私人對話窗或通知。
• 雙軌錄音混音引擎：內建了兩個獨立的聲道抓取點，自動將從電腦裡發出來的聲音（如您正在播放的影片），以及您嘴巴講話的聲音（麥克風）在前端運算混合在一起，不需要額外剪輯軟體疊加聲音。
• 特效與合成渲染面：這是一個極具技術含量的特點。開啟攝影機後，攝影機視窗浮現於頁面，您可以隨意拖拉位移它，而系統後台具有一個隱形的 Canvas 畫布，會即時的把您的螢幕與攝影機「疊加畫在一起」才送去錄影。
• 中控與輸出系統：讓使用者保有對時間、暫停階段的掌控權，並且強調檔案是存在記憶體中，錄影完畢後由瀏覽器親自產出 MP4 / WebM，保證資料不經任何伺服器。

---

🌟 核心特色

1. 100% 本地端運行 (Local Only)：純前端實作，不依賴任何後端伺服器，您的錄影檔案與畫面絕對不會外流，確保最高等級的隱私安全。
2. 免安裝隨開即用：只須使用現代瀏覽器開啟 index.html 即可使用。

🛠 詳細功能與介紹

1. 多元畫面擷取模式 (Display Surface Mode)

支援多種不同情境的錄製範圍，包含：

• 整個螢幕桌面：錄製整個電腦畫面（包含工作列等）。
• 特定應用程式視窗：僅錄製某個被打開的軟體畫面（例如 PowerPoint 簡報），保護其他視窗隱私。
• 特定瀏覽器分頁：僅錄製當前瀏覽器中的某個指定分頁。

2. 專業級雙軌混音

• 錄製系統麥克風：可以錄下使用者說話的聲音（支援旁白解說）。
• 錄製系統聲音：能夠側錄電腦本身發出的聲音（如背景音樂、會議中的其他人的聲音）。注意：部分作業系統及瀏覽器錄製系統音訊時有其原生限制。

3. 子母畫面網路攝影機 (Draggable PiP Camera)

• 開啟網路攝影機（Webcam）後，會將您的即時人像以「子母畫面」覆蓋顯示於畫面上。
• 支援滑鼠自由拖曳（Draggable）：您可以隨意將攝影機畫面拖曳到畫面四個角落或是任何不遮擋核心簡報的位置。
• 內部採用 HTML5 Canvas 即時動態繪製與合成畫面，保證最終輸出的影片能完美包含您拖拉定位後的攝影機位置。

4. 完善的錄製狀態控制與下載

• 具備大型顯眼的計時器與狀態指示燈（等待設定 / 錄影中 / 已暫停 / 錄製完成）。
• 提供錄影中斷點控制：「暫停」與「繼續」，讓您不用一鏡到底。
• 錄影結束後自動打包成 WebM 或 MP4 格式，直接在介面最下方提供「下載影片檔」與「重新錄製」的功能，並能直接於頁面上預覽。

---

⚠️ 使用須知與限制 (Usage Notices)

由於本系統徹底依賴於瀏覽器前端渲染以保護隱私，故受限於用戶端電腦硬體與瀏覽器機制，使用前請悉知以下限制：

1. 錄影時間與記憶體限制：錄下的影像數據會暫存於您電腦的「記憶體 (RAM)」中。根據電腦記憶體大小，建議單趟錄影長度不要超過 1 到 2 小時。若時間過長，瀏覽器可能會因記憶體耗盡 (Out of Memory) 而閃退，導致檔案遺失。
2. Mac 系統聲音錄製限制：由於蘋果 macOS 對底層隱私權的保護政策極度嚴格，目前在 Mac 系統上錄製「整個螢幕」時，若要勾選「錄製系統聲音」，瀏覽器預設不支援直接擷取 Mac 的全域系統音軌（只能擷取如單次 Chrome 分頁的音軌）。若在 Mac 需要全電腦收音，需自行安裝如 BlackHole 等虛擬音效卡輔助工具。
3. 手機/平板裝置無效：iOS 與 Android 系統基於安全性，禁止網頁任意取得整個螢幕畫面，故無法在行動裝置上順利操作，請務必使用電腦版瀏覽器。

🔧 常見故障與排除 (Troubleshooting)

常見狀況	發生原因 / 解決方案
點擊開始錄影後毫無反應？	通常是被瀏覽器阻擋了。請確認網址列旁邊的「鎖頭」圖示，並同意「允許使用麥克風/攝影機」。
找不到要錄製的應用程式視窗？	部分軟體在背景「最小化」時無法被瀏覽器抓取。解答：請確保該 PowerPoint 或軟體視窗處於「開啟而非最小化」狀態再點擊錄影。
錄出來影片很模糊或破圖？	若您的電腦 CPU 負載過重，會導致編碼跟不上。解法：請關閉多餘的背景程式與分頁，讓瀏覽器獲得更多效能處理 Canvas 合成。
麥克風或系統聲錄不進去？	請確認您有勾選介面左側面板相對應的開關。請在系統設定中確認預設的麥克風不是處於靜音狀態。

---

🚀 如何使用

1. 使用 Google Chrome 或 Microsoft Edge 開啟目錄下的 index.html。
2. 於頁面左方設定面板，點擊下拉選單選擇「預設錄製模式」。
3. 依據需求點擊開關，啟用「錄製系統聲音」、「錄製麥克風」或是「開啟網路攝影機」。
4. 點擊畫面大大的藍色按鈕「開始擷取與錄製」，瀏覽器會跳出權限請求，請點選允許並選擇您要分享的螢幕範圍。
5. 錄製過程中，您可以隨時點選暫停或結束。
6. 結束錄影後，右下角會出現「下載影片檔」按鈕，點擊即可將影片存置您的裝置中。