瀏覽器螢幕錄影完整指南:免安裝軟體,開網頁就能錄(2026 台灣版)
為什麼你需要瀏覽器螢幕錄影工具
你想錄一段操作示範給同事看——但公司電腦不讓安裝任何軟體。
你用的是 Chromebook——ChromeOS 上幾乎沒有傳統桌面錄影程式。
你臨時要錄一段 Bug 重現影片——不想為了一次錄影花 10 分鐘下載安裝 OBS。
你在客戶的電腦上——不可能也不應該安裝任何第三方軟體。
這些場景有一個共通點:你需要錄螢幕,但不能或不想裝軟體。好消息是,現代瀏覽器(Chrome、Edge、Firefox、Safari)已經內建螢幕擷取 API(Screen Capture API + MediaRecorder API),讓「開一個網頁就能錄螢幕」變成現實。
瀏覽器螢幕錄影的底層原理
在介紹具體工具前,先理解瀏覽器螢幕錄影的技術基礎:
Screen Capture API
現代瀏覽器提供 getDisplayMedia() API,允許網頁在使用者授權後擷取螢幕內容:
- 整個螢幕:錄製所有視窗與桌面活動
- 單一視窗:只錄指定 App 的視窗
- 瀏覽器分頁:只錄某個瀏覽器分頁
使用者必須主動選擇要分享的內容並點擊「允許」——這代表沒有網站能偷偷錄你的螢幕。
MediaRecorder API
擷取到螢幕畫面後,瀏覽器用 MediaRecorder API 把畫面編碼成影片檔。支援的格式通常有:
- WebM(VP8/VP9 編碼)——Chrome 和 Firefox 的預設輸出
- MP4(H.264 編碼)——Safari 和部分新版 Chrome 支援
瀏覽器相容性
| 瀏覽器 | Screen Capture | MediaRecorder | 系統音訊錄製 | 評價 |
|---|---|---|---|---|
| Chrome 72+ | 支援 | 支援 | 支援(分頁音訊) | 最佳選擇 |
| Edge 79+ | 支援 | 支援 | 支援 | 與 Chrome 體驗一致 |
| Firefox 66+ | 支援 | 支援 | 不支援 | 可用但有限制 |
| Safari 13+ | 支援 | 支援 | 不支援 | 可用但有限制 |
推薦用 Chrome 或 Edge,因為它們對螢幕錄製的支援最完整,特別是系統音訊錄製功能。
方案一:CutFast 線上螢幕錄影工具(推薦)
CutFast 螢幕錄製工具 基於瀏覽器 API 構建,在原生 API 基礎上加入了大量實用功能。
核心功能
- 多種錄製模式:全螢幕、視窗、分頁、視訊鏡頭、螢幕 + 視訊鏡頭子母畫面
- 音訊錄製:系統音訊、麥克風,或兩者混合
- 即時預覽:錄製中可以看到視訊鏡頭畫面和錄製狀態
- 錄製計時器:顯示已錄時長
- 錄完即剪:錄完直接進 CutFast 編輯器做裁剪、壓縮等後製
- 本地處理:錄製的影片不會上傳到任何伺服器
使用步驟
- 開啟 CutFast 螢幕錄製器
- 選擇錄製模式(螢幕/視訊鏡頭/螢幕 + 視訊鏡頭)
- 選擇音訊來源(系統音訊/麥克風/兩者/無)
- 點擊「開始錄製」
- 在瀏覽器彈窗選擇要分享的內容(整個螢幕/視窗/分頁)
- 開始你的示範或操作
- 點擊「停止錄製」
- 預覽錄製結果,滿意就下載;需要編輯就直接進 CutFast 編輯器
CutFast 的優勢
錄製 + 編輯無縫銜接
錄完之後最常見的需求是什麼?裁掉開頭幾秒的準備畫面、去掉結尾的「哦我忘了關錄影」、把中間的誤操作剪掉。其他工具要先下載錄製檔再開另一個編輯工具;CutFast 錄完直接進編輯器,一氣呵成。
視訊鏡頭子母畫面
很多錄影場景需要同時顯示螢幕操作和講者的臉——產品示範、線上教學、Bug 回報說明。CutFast 支援螢幕 + 視訊鏡頭的子母畫面模式,視訊鏡頭畫面可放在任何角落。
如果只需要單獨錄視訊鏡頭(例如錄自我介紹),CutFast 也提供專門的 視訊鏡頭錄製工具。
隱私保護
CutFast 錄製的影片完全保存在本地瀏覽器中,不會上傳任何伺服器。對於錄製包含敏感資訊的螢幕內容(程式碼、公司內部系統、客戶資料),這點非常重要。
方案二:瀏覽器擴充功能
如果你不想開一個新網頁來錄,瀏覽器擴充是另一個選擇。
常見的錄影擴充
| 擴充名 | 瀏覽器 | 免費額度 | 特色 | 限制 |
|---|---|---|---|---|
| Loom | Chrome, Edge | 25 支影片,每支 5 分鐘 | 錄完自動上傳產生分享連結 | 免費版有浮水印,影片存在 Loom 伺服器 |
| Screencastify | Chrome | 每支影片 5 分鐘 | 簡單易用 | 免費版有浮水印和時長限制 |
| Awesome Screenshot | Chrome, Firefox | 基本錄影免費 | 截圖 + 錄影二合一 | 進階功能要付費 |
| Nimbus Screenshot | Chrome, Firefox | 基本功能免費 | 功能齊全 | 介面較複雜 |
擴充的優缺點
優點:
- 安裝後隨時可用,不用另開網頁
- 部分擴充(如 Loom)可以自動產生分享連結,方便協作
- 整合在瀏覽器內,一鍵開始錄製
缺點:
- 多數免費版有浮水印或時長限制
- 影片通常上傳到擴充提供商的伺服器(隱私風險)
- 需要安裝擴充(某些公司電腦可能不允許)
- 編輯功能通常很有限,需要另外找編輯工具
- 擴充更新可能帶來穩定性問題
適用情境
瀏覽器擴充最適合需要快速錄製並分享連結的協作場景——例如遠距工作時用 Loom 錄一段操作說明傳給同事。但如果你需要編輯錄製內容、控制檔案大小、或在意隱私,CutFast 是更好的選擇。
方案三:OBS Studio(桌面替代方案)
雖然本文聚焦瀏覽器錄影,但有些場景確實需要桌面級的錄影能力。OBS Studio 是免費開源的桌面錄影/直播工具,功能極強。
OBS 的優勢
- 完全免費開源,無浮水印,無限制
- 極有彈性的錄製設定:可以精確控制解析度、影格率、編碼器、位元率等所有參數
- 多場景/多來源:可以疊加多個影片源、圖片、文字
- 直播功能:可以同時錄製和推流到 Twitch、YouTube 等
- 外掛生態:大量社群外掛擴充功能
OBS 的限制
- 必須下載安裝(約 100~200 MB)
- 學習曲線陡峭——介面對新手不友善,設定項目非常多
- Chromebook 不支援——需要 Windows、macOS 或 Linux
- 公司電腦可能無法安裝——需要管理員權限
- 沒有內建編輯功能——錄完要另外找影片編輯工具
什麼時候選 OBS
| 場景 | 選 OBS 還是瀏覽器錄影 | 原因 |
|---|---|---|
| 需要長時間錄製(1 小時 +) | OBS | 更穩定,資源管理更好 |
| 需要同時直播 | OBS | 瀏覽器工具不支援推流 |
| 需要多來源疊加(多個視訊鏡頭) | OBS | 瀏覽器 API 有限 |
| 需要極致畫質控制 | OBS | 可以選任何編碼器和參數 |
| 快速錄一段短片(30 分鐘以內) | 瀏覽器錄影 | 不用安裝,開瀏覽器就能錄 |
| Chromebook 或受限裝置 | 瀏覽器錄影 | 無法安裝 OBS |
| 錄完立刻要編輯和分享 | CutFast | 錄完即剪,一站搞定 |
三種方案對照
| 對比維度 | CutFast 線上錄影 | 瀏覽器擴充(如 Loom) | OBS Studio |
|---|---|---|---|
| 安裝需求 | 無 | 安裝擴充 | 安裝桌面應用程式 |
| Chromebook 支援 | 支援 | 部分支援 | 不支援 |
| 錄製畫質 | 高(取決於螢幕解析度) | 中~高 | 極高(可完全自訂) |
| 系統音訊 | 支援(Chrome/Edge) | 部分支援 | 支援 |
| 視訊鏡頭子母畫面 | 支援 | 部分支援 | 支援(需設定) |
| 錄後編輯 | 內建編輯器 | 有限或無 | 需另外用工具 |
| 隱私 | 本地處理 | 通常上傳伺服器 | 本地處理 |
| 免費額度 | 3 次/天,無浮水印 | 通常有浮水印或時長限制 | 完全免費 |
| 學習成本 | 低 | 低 | 高 |
| 適合長時間錄製 | 中等(受瀏覽器限制) | 受限 | 很好 |
| 直播功能 | 無 | 無 | 支援 |
錄影實用技巧
不管你選哪種工具,以下技巧都能幫你錄出更好的影片:
技巧 1:錄製前關通知
錄螢幕最尷尬的事之一就是錄到一半跳出 LINE 訊息或 Email 通知。錄製前:
- Windows:打開「專注輔助」(Focus Assist)
- macOS:打開「勿擾模式」(Do Not Disturb)
- 瀏覽器:關掉不必要的分頁,避免網頁彈窗通知
- 手機:關掉投影或同步通知
技巧 2:選對錄製區域
| 錄製目標 | 建議選擇 | 原因 |
|---|---|---|
| 示範某個網頁操作 | 瀏覽器分頁 | 只錄目標頁面,不會錄到其他內容 |
| 示範桌面軟體操作 | 應用視窗 | 只錄目標 App,不會錄到桌面其他內容 |
| 錄多個 App 的操作 | 整個螢幕 | 可在多個 App 間切換 |
| 只錄自己講解 | 僅視訊鏡頭 | 用 CutFast 的 視訊鏡頭錄製 |
重要提醒:錄製「整個螢幕」意味著所有桌面內容都會被擷取——包括通知、其他視窗內容。若涉及隱私,建議選「視窗」或「分頁」模式。
技巧 3:音訊設定
音訊品質往往比畫質更影響觀感。一段畫質普通但聲音清楚的影片,比畫質很好但聲音吵雜的影片體驗好得多。
麥克風選擇:
- 有外接麥克風(USB 麥、耳機麥),優先用
- 筆電內建麥克風通常效果普通,容易收到鍵盤聲和風扇噪音
- 錄製前測試麥克風,確認選了正確的輸入裝置
系統音訊:
- 若需要錄螢幕上播放的聲音(影片播放、軟體音效),記得開啟系統音訊擷取
- 在 Chrome/Edge 中,選錄「瀏覽器分頁」時會自動包含該分頁的音訊
- 選錄「整個螢幕」或「視窗」時,系統音訊要在錄製工具裡單獨開啟
同時錄麥克風和系統音訊:
- CutFast 支援同時錄麥克風和系統音訊,混合到同一個輸出檔
- 這對「一邊講解一邊操作軟體(含音效)」的情境非常有用
技巧 4:解析度與影格率
解析度:
- 瀏覽器錄影的解析度通常等於你的螢幕解析度
- 若螢幕是 4K 但最終影片只在 1080p 觀看,可以錄完用 CutFast 降解析度減小檔案
- 錄 UI 操作示範時,1080p 已足夠清晰
影格率:
- 一般操作示範和教學:30fps 綽綽有餘
- 遊戲錄製或需要呈現流暢動畫:考慮 60fps
- 瀏覽器錄影預設通常是 30fps,多數場景不用調整
技巧 5:多螢幕注意事項
如果你有多台螢幕:
- 選「整個螢幕」時,瀏覽器會讓你選錄哪一個螢幕
- 只能同時錄一個螢幕(瀏覽器 API 限制)
- 如果要在兩個螢幕間切換操作,建議把所有需要的視窗移到同一螢幕
- 或用 OBS 等桌面工具錄多個螢幕
技巧 6:錄完後的後製
一段原始錄影通常需要一些後製才能分享:
- 裁剪開頭結尾——去掉點擊「開始錄製」後的準備畫面和點擊「停止錄製」前的收尾
- 剪掉誤操作——中間有誤操作或等待時間可以剪掉
- 壓縮檔案——原始錄影檔通常比較大,壓縮後更方便分享
- 加字幕——錄影含講解時,加字幕提升可及性
CutFast 的優勢是這些後製可以在同一個工具中完成,不用切換。
特定場景錄影建議
產品示範/教學錄製
- 錄製前準備好操作流程,最好寫一個簡單腳本
- 用「瀏覽器分頁」或「視窗」模式,避免錄到無關內容
- 開視訊鏡頭子母畫面,增加親和力
- 語速適中,關鍵操作放慢
- 錄完用 CutFast 裁剪精華、加字幕
Bug 重現錄製
- 用「瀏覽器分頁」模式錄 Web 應用的 Bug
- 或用「視窗」模式錄桌面軟體的 Bug
- 錄製前打開瀏覽器的開發者工具(F12),讓 Console 的錯誤訊息一起被錄進去
- 保持簡潔——只錄重現步驟,不要錄無關操作
- 錄完用 CutFast 裁剪到只剩關鍵步驟
線上會議錄製
- 確認與會者同意錄製
- 用「視窗」模式錄會議 App 視窗(Google Meet、Teams、Zoom)
- 同時開系統音訊(擷取遠端與會者的聲音)和麥克風(擷取自己的聲音)
- 會議錄製通常較長,錄完可用 CutFast 的反白編輯模式提取關鍵討論
Chromebook 使用者錄影
Chromebook 使用者選擇有限——無法安裝傳統桌面錄影 App。瀏覽器線上錄影是最佳、幾乎是唯一的方案:
- 用 CutFast 螢幕錄製器
- Chrome 瀏覽器對 Screen Capture API 支援最好
- 注意 Chromebook 儲存空間通常有限,錄完要及時壓縮和清理
常見問題
Q:瀏覽器錄影畫質怎麼樣?
取決於螢幕解析度和瀏覽器編碼設定。在 1080p 螢幕上錄,輸出畫質通常接近原始螢幕解析度。文字清晰可讀、UI 元素完整,對絕大多數使用情境完全夠用。
Q:瀏覽器錄影最長能錄多久?
技術上沒有嚴格時長限制,但受制於:
- 瀏覽器記憶體:錄製越久佔記憶體越多。一般 30 分鐘內安全;超過 1 小時可能遇到記憶體問題
- 儲存空間:錄製的影片會暫存在瀏覽器記憶體,最後存到硬碟。確保有足夠硬碟空間
- 穩定性:長時間錄影建議用 OBS 等桌面工具,穩定性更好
Q:為什麼錄不到系統音訊?
系統音訊錄製在不同瀏覽器和作業系統上支援情況不同:
- Chrome/Edge + Windows:選錄「瀏覽器分頁」時會自動包含分頁音訊;選「整個螢幕」時可以勾選「分享系統音訊」
- Chrome/Edge + macOS:macOS 本身限制系統音訊擷取,可能需要額外的虛擬音訊驅動(如 BlackHole)
- Firefox/Safari:通常不支援系統音訊擷取
如果需要錄系統音訊但瀏覽器不支援,可以:
- 把要播放的內容在 Chrome 分頁打開,然後錄該分頁
- 用 OBS 等桌面工具
Q:錄影檔太大怎麼辦?
瀏覽器錄影的預設輸出通常是 WebM 格式,檔案可能比較大。解決方法:
Q:Mac 可以用嗎?
完全可以。CutFast 螢幕錄製在 Mac 的 Chrome/Edge/Safari 都能跑。若要錄系統音訊,Chrome/Edge 體驗最好(可能需要搭配 BlackHole 這類虛擬音訊驅動)。
Q:可以錄手機螢幕嗎?
瀏覽器的 Screen Capture API 主要針對桌面環境設計。在行動端:
- Android Chrome:部分支援,但體驗不如桌面
- iOS Safari:不支援網頁錄影
- 行動端錄影建議用系統內建錄影功能(iOS 的控制中心錄影、Android 的螢幕錄製)
Q:CutFast 錄影和 Loom 有什麼不同?
最大差別是隱私和分享模式:
- Loom:錄完自動上傳到 Loom 伺服器、產生分享連結,方便發給別人。適合團隊協作
- CutFast:錄完影片存在本地,不上傳任何伺服器。適合在意隱私或需要後製的場景
如果你的需求是「錄完快速產生連結發給同事」,Loom 體驗較好。如果是「錄完編輯後存本地或上傳自己的平台」,CutFast 更合適。
Q:學生可以免費用嗎?
可以。基礎錄影功能免費,每日 3 次剪輯額度對一般學生作業、報告演示都夠用。
Q:錄影會被網站偵測到嗎?
技術上,網站可以透過一些 JavaScript API 偵測到螢幕分享狀態(例如 Permissions API)。但是:
- 多數網站不會主動偵測
- 瀏覽器會在錄製期間顯示明確的錄製指示器(通常是紅色圖示)
- 錄製「分頁」模式對其他分頁的網站不可見
下一步:延伸閱讀
- 錄完想剪精華版,看 線上影片剪輯完整教學(台灣版)
- 想把錄影轉成 GIF 放說明文件,看 MP4/MOV 轉 GIF 完整教學(台灣版)
- 錄影檔要轉成其他格式,看 影片格式轉檔完整指南(台灣版)
總結
瀏覽器線上螢幕錄影已經從「湊合能用」進化到「好用夠用」的階段。對大多數日常錄影需求——錄一段操作示範、一個 Bug 重現、一段產品講解——完全不用下載安裝任何軟體。
推薦的工作流:
- 開啟 CutFast 螢幕錄製器
- 選擇錄製模式和音訊設定
- 完成錄製
- 在 CutFast 中直接裁剪、壓縮、下載
整個流程從開網頁到拿到最終影片檔,幾分鐘內完成。沒有軟體安裝、沒有註冊登入(基礎功能)、沒有檔案上傳——這就是瀏覽器線上錄影的魅力。