線上螢幕錄影工具
錄製螢幕、視窗或標籤頁，支援錄音，一鍵下載影片
錄製預覽
什麼是線上螢幕錄影？
螢幕錄製工具可以直接在瀏覽器中錄製整個螢幕、某個應用程式視窗或單一瀏覽器分頁。依瀏覽器和權限支援情況，也可以同時錄入系統聲音和麥克風輸入，適合製作短教學、重現 Bug、展示產品流程、截取課程片段、做設計審查或提供客服說明。錄製前應確認是否會暴露私人視窗、通知、密碼、客戶資料或無關分頁，因為被選取的區域會被原樣記錄。處理過程在本地完成，錄製後可下載檔案，但畫質、音軌與可選來源會受瀏覽器和作業系統限制。
使用方法
使用方法
- 選擇要錄製的內容：整個螢幕、視窗或瀏覽器標籤
- 選擇音訊設定（可選）
- 點選「開始錄製」並選擇要分享的內容
- 完成後點選「停止錄製」
- 下載或預覽您的錄製內容
技巧
- 錄製前關閉不必要的通知
- 如需系統音訊，請選擇「瀏覽器標籤」並勾選「分享音訊」
- 您可以在錄製過程中暫停和恢復
- 使用穩定的網路連接以獲得最佳效果
使用場景
技術原理
錄製從 navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }) 開始，該方法返回一個 MediaStream，包含一條影片軌道（所選的螢幕、視窗或分頁）以及可選的一條音訊軌道（當瀏覽器和來源允許時）。使用者在系統原生選擇器對話框中選取錄製面，當使用者點選系統「停止共用」按鈕時串流自動結束，該按鈕會觸發軌道的 ended 事件，讓錄製器可以完成檔案處理。 編碼輸出由 MediaRecorder API 產生。容器和編解碼器的選擇透過 MediaRecorder.isTypeSupported() 對 video/webm;codecs=vp9,opus、video/webm;codecs=vp8,opus 以及 Safari 上的 video/mp4;codecs=avc1 等候選方案進行探測。ondataavailable 週期性觸發（或在停止時觸發），提供 Blob 片段，這些片段最終合併為使用已協商 mimeType 的單一 Blob。videoBitsPerSecond 和 audioBitsPerSecond 在畫質與檔案大小之間取得平衡，典型的 1080p 螢幕錄製在 4 Mbps VP9 下約為每分鐘 30 MB。 當同時需要系統音訊和麥克風時，頁面建立 AudioContext，將每個 MediaStreamTrack 包裝在 MediaStreamAudioSourceNode 中，透過 GainNode 混音到 MediaStreamAudioDestinationNode。合併後的音訊軌道在 MediaRecorder 啟動前替換原始串流，因此產生的 WebM 攜帶單一混合 Opus 軌道而非兩條獨立軌道。瀏覽器支援要求 Chrome 72+、Firefox 66+ 或 Safari 13+；較舊的瀏覽器要麼拒絕 getDisplayMedia，要麼忽略音訊約束。
- 擷取 API：navigator.mediaDevices.getDisplayMedia({ video, audio }) 返回 MediaStream；使用者在系統對話框中選取螢幕/視窗/分頁
- 編碼器：MediaRecorder 搭配 isTypeSupported() 優先探測 video/webm;codecs=vp9,opus，回退到 vp8 或 H.264/AVC1 的 MP4
- 分段輸出：ondataavailable 產生 Blob 片段，合併後包裝為已協商 mimeType 的 Blob
- 音訊混音：AudioContext + MediaStreamAudioSourceNode + GainNode + MediaStreamAudioDestinationNode 將系統音訊與麥克風合併為單一 Opus 軌道
- 串流結束觸發：影片軌道的 ended 事件在使用者點選瀏覽器的停止共用列時觸發，完成錄製
- 位元率控制：1080p 約 2.5-8 Mbps；4 Mbps VP9 大約每分鐘 30 MB
- 瀏覽器基線：Chrome 72+、Firefox 66+、Safari 13+；分頁音訊擷取僅在 Chromium 系瀏覽器的「共用分頁音訊」核取方塊下有效
範例
軟體教學，10 分鐘 1080p
來源：整個螢幕 (1920 x 1080)
音訊：僅麥克風
編碼：video/webm;codecs=vp9, opus
畫面更新率：30 fps
時長：10:00
輸出：tutorial.webm，約 190 MB
用途：產品操作說明、上傳至 LMS含系統音訊的 Bug 重現
來源：瀏覽器分頁 (Chrome)
音訊：系統音訊（在對話框中分享分頁音訊）
編碼：video/webm;codecs=vp8, opus
時長：0:45
輸出：bug-repro-2026-06-10.webm，7.2 MB
附加於：GitHub issue #1284線上會議片段，麥克風 + 系統音訊
來源：應用程式視窗 (Zoom)
音訊：系統 + 麥克風（同時錄製）
時長：3:20
輸出：meeting-snippet.webm，42 MB
說明：在 1:15 暫停以略過憑證輸入畫面後再繼續App Store 產品展示影片
來源：應用程式視窗 (1280 x 720)
音訊：無（靜音示範，後續加上字幕）
畫面更新率：30 fps，位元率：4 Mbps
時長：0:30
輸出：demo.mp4 (若支援 H.264) 或 .webm 備援
大小：約 15 MB，符合 App Store 預覽上限常見問題
螢幕錄影是怎麼運作的？
它使用瀏覽器的 MediaRecorder API，搭配 getDisplayMedia 取得的螢幕分享 MediaStream。瀏覽器會問你要分享什麼（整個螢幕／單一視窗／單一分頁），頁面把影格錄成記憶體中的影片 blob，停止後提供下載。沒有錄影伺服器、不上雲、不會上傳。
輸出的格式與編碼是什麼？
影片是 WebM 容器，影片使用 VP8 或 VP9（依瀏覽器支援而定），音訊使用 Opus。多數現代瀏覽器、影片剪輯軟體與播放器都能直接處理 WebM。要轉成 MP4，可下載後用 FFmpeg 在本機轉碼。
可以一起錄製系統音訊嗎？
部分瀏覽器與作業系統允許在 getDisplayMedia 期間擷取分頁音訊或系統音訊。Windows 上的 Chrome 限制最少；Safari 和 Firefox 較受限。麥克風（你的聲音）需要另外授權後才會被錄入。
最長能錄多久？
瓶頸是瀏覽器記憶體，因為錄影在停止前都放在 RAM 中。實務上限大約 10~60 分鐘，視解析度與位元率而定。要錄更久或要高品質的影片教學，桌面版的 OBS Studio 更合適—它會直接寫入硬碟，沒有記憶體上限。
錄影檔會被上傳到任何地方嗎？
不會。錄影檔留在你的瀏覽器中，下載時才把 WebM 檔存到你的裝置。只要你不主動分享，檔案就不會傳出去。
為什麼錄出來會卡或畫質差？
擷取畫面再重新編碼很吃 CPU。建議關掉其他應用程式、可能的話降低錄影解析度，並只錄單一視窗或分頁，而不是整個螢幕。支援的環境下硬體編碼（透過 WebCodecs API 的 h264）會有幫助，但目前還不普及。
可以在工具裡裁剪或編輯影片嗎？
本工具不行。請下載 WebM 檔，再用影片剪輯軟體（DaVinci Resolve、Shotcut、命令列的 FFmpeg）做裁剪、轉碼或加註解。