ToolAct工具行動

攝影機測試

測試攝影機裝置,即時預覽畫面、拍照截圖、查看裝置資訊

未開始

即時預覽

開始測試後顯示攝影機畫面

什麼是攝影機測試?

攝影機測試用來確認瀏覽器能否存取筆電內建攝影機、外接 USB 攝影機或其他視訊輸入裝置,並即時顯示畫面。它適合在視訊會議、線上課程、遠端面試、直播、錄課與內容拍攝前使用,提前排查選錯裝置、權限被阻擋、黑畫面、解析度過低、光線不足等問題。工具會請求瀏覽器攝影機權限,顯示網頁實際能開啟的視訊串流,並可截取本機快照檢查清晰度與取景。它能協助確認裝置選擇、解析度、幀率、寬高比與基本畫質,但不能修復驅動或硬體故障。若沒有畫面,應再檢查系統隱私設定、是否被其他應用占用、線材連接與驅動狀態。

使用方式

使用方法

  1. 點選「開始測試」並允許瀏覽器使用鏡頭
  2. 觀察鏡頭即時預覽畫面
  3. 點選「拍照」擷取照片
  4. 可切換鏡頭或測試不同解析度

注意事項

  • 若預覽畫面未顯示,請檢查瀏覽器是否已授予鏡頭權限
  • 鏡頭是否正被其他應用程式使用
  • 是否已選擇正確的鏡頭裝置
  • 系統設定中鏡頭是否已停用

使用場景

在通話前驗證瀏覽器攝影機存取啟動攝影機以確認權限狀態、選定的 deviceId、即時預覽、實際解析度、幀率、寬高比和前後置模式。在面試、上課、直播或客服會議前,提前發現串流卡住、鏡頭錯誤或退回 640x480 的情況,是避免在其他參與者面前尷尬排錯的最低成本方式。
探測攝影機實際支援的解析度對 QVGA、VGA、720p、1080p、1440p 和 4K 執行內建檢查。頁面以明確的約束條件呼叫 getUserMedia 來測試每個解析度,標記瀏覽器和感測器是否接受,揭示規格表標榜 4K 但 UVC 描述符實際上限為 1080p 的情況。
擷取本地快照作為證據使用 Canvas drawImage API 從即時影片中拍攝 PNG 快照,下載有用的畫面並刪除不需要的。在記錄對焦錯誤、IR-cut 條紋、鏡頭變形、構圖問題或需要寄給廠商、製造商 RMA 表單或線上交易糾紛的硬體故障時很有幫助。
在前鏡頭、後鏡頭和外接攝影機之間切換當筆記型電腦同時有內建網路攝影機和外接 USB 或虛擬攝影機時,在攝影機選擇器中選擇不同的 deviceId,讓通話軟體可以指向正確的鏡頭而無需調整系統設定。OBS 虛擬攝影機、Elgato 擷取卡和 macOS 的 Continuity Camera 各自顯示為獨立裝置,頁面會呈現它們的標籤,讓你在開播前容易辨認是否選錯。
診斷黑畫面或卡住的預覽當預覽畫面變暗或凍結時,頁面會顯示 getUserMedia 的權限狀態、裝置標籤和套用的解析度。在假設感測器本身故障之前,先交叉檢查系統隱私設定、其他佔用攝影機的應用程式(Zoom、OBS、FaceTime)以及近期的 USB 或驅動變更,因為大多數黑畫面是由另一個程式獨佔裝置造成的。

技術原理

攝影機測試工具建立在 W3C Media Capture and Streams 規範之上,使用 navigator.mediaDevices.getUserMedia(constraints) 存取攝影機。constraints 參數是一個類 JSON 物件,可指定解析度(寬度、高度)、幀率、朝向模式和裝置 ID 的 ideal、exact、min 和 max 值。瀏覽器的約束求解器會將這些條件與攝影機韌體回報的 UVC(USB 視訊類別)描述符進行協商;當 exact 約束無法滿足時,呼叫會以 OverconstrainedError 拒絕——這就是解析度支援檢查器背後的機制,它用 { exact } 約束逐一探測每個解析度並標記失敗。 取得串流後,影片軌道會暴露 getSettings()(協商後實際套用的值)、getCapabilities()(硬體完整支援的範圍)和 getConstraints()(原始請求的內容)。套用的解析度、幀率、寬高比和朝向模式從 getSettings() 讀取並顯示。即時預覽透過將 video 元素的 srcObject 設為 MediaStream 來渲染;瀏覽器的媒體管線處理解碼、色彩空間轉換和 GPU 加速渲染,無需 JavaScript 像素操作。 靜態拍攝時,CanvasRenderingContext2D.drawImage(videoElement, 0, 0) 將當前解碼的影片影格快照到隱藏的 canvas 上,toDataURL('image/png') 將其序列化為 PNG 資料 URL。enumerateDevices() 列出所有可用的媒體輸入裝置——注意裝置標籤在使用者至少授予一次攝影機權限前為空字串,這是防指紋追蹤的措施。呼叫 track.stop() 會釋放攝影機硬體並關閉指示燈;設定 videoElement.srcObject = null 會中斷渲染管線。getUserMedia 需要安全上下文(HTTPS 或 localhost)並觸發按來源的權限提示;攝影機指示燈在作業系統層級強制執行,無法被頁面繞過。

  • 約束協商:瀏覽器求解器將 ideal/exact/min/max 值與 UVC 硬體描述符進行匹配——{ exact } 探測在感測器無法提供所請求解析度時會以 OverconstrainedError 失敗,這就是解析度支援網格的填充方式。
  • 軌道自省:getSettings() 回傳協商後實際套用的解析度、幀率、寬高比和 facingMode——當 USB 頻寬或感測器能力受限時,這些可能與請求的理想值不同。
  • enumerateDevices 隱私:裝置標籤在每個來源至少授予一次 getUserMedia 權限前為空字串——這是規範強制的反指紋措施,也意味著裝置選擇器在首次造訪時顯示通用名稱。
  • Canvas 靜態拍攝:drawImage() 將解碼後的影片影格從 GPU 合成器複製到 2D 像素緩衝區而不重新編碼;toDataURL('image/png') 再將其序列化為無損 PNG——影格從未離開瀏覽器記憶體。
  • 朝向模式:VideoFacingModeEnum 從 track.getSettings().facingMode 讀取('user' 為前鏡頭、'environment' 為後鏡頭、'left'/'right' 為外接鏡頭)——並非所有桌面 USB 攝影機都會回報方向,因此欄位可能顯示 'unknown'。
  • 串流生命週期:track.stop() 釋放攝影機硬體並關閉作業系統層級的指示燈;srcObject = null 中斷渲染管線——兩者都需要才能完全釋放裝置,讓其他應用程式可以取得。
  • 安全模型:getUserMedia 需要安全上下文(HTTPS 或 localhost)、觸發按來源的權限對話框,且攝影機指示燈在作業系統/核心層級強制執行——頁面無法繞過這三道門檻中的任何一道。

範例

基本測試流程

1. 點選「開始測試」並授予相機權限
2. 觀察即時預覽的清晰度、對焦與畫面更新率
3. 按下拍照鍵擷取一張測試畫面
4. 檢視裝置資訊(解析度、鏡頭方向、畫面更新率)
用途:在視訊會議、面試或直播前先行測試

解析度測試

1. 展開「支援的解析度」面板
2. 點選每個解析度旁的「測試」(如 1080p、720p、480p)
3. 確認硬體實際支援哪些解析度
4. 依使用情境選擇可穩定運作的最高解析度

多鏡頭切換

1. 開啟頂端的裝置下拉選單
2. 選擇不同的相機(前/後鏡頭、外接 webcam)
3. 比較畫質、色彩平衡與低光表現
4. 加入通話前確認所選裝置正確

常見問題

攝影機測試會檢查哪些項目?

包括瀏覽器是否能存取攝影機、可用解析度、即時預覽,以及基本的拍照功能(截取為圖片)。在視訊通話前用一下,可以確認選對了攝影機、畫面方向正確、曝光也合適。

為什麼我的攝影機沒有出現?

常見原因有幾種:瀏覽器需要授權使用攝影機(檢查網址列的權限圖示);其他應用程式正佔用攝影機(關閉 Zoom、Teams、OBS);作業系統的隱私設定封鎖了瀏覽器存取(檢查 Windows 隱私權 / macOS 攝影機權限);硬體開關關閉了攝影機。

可以切換前後鏡頭嗎?

如果你的裝置同時有前後鏡頭就可以。頁面透過 navigator.mediaDevices.enumerateDevices() 列出可用的攝影機,從下拉選單選擇即可。手機上,「user」是前鏡頭,「environment」是後鏡頭。

支援哪些解析度?

視攝影機和瀏覽器提供的範圍而定。常見的有 320×240、640×480、1280×720、1920×1080。解析度越高,需要的頻寬(即時通訊)和 CPU 也越多。頁面預設挑最高的,網路慢時請選低一點。

我的攝影機畫面會被上傳嗎?

不會。視訊串流在本地端渲染,截取的影格也保留在瀏覽器內。不過要留意,攝影機權限是以網域為單位授予的,所以本站開啟的任何分頁都能使用,直到你撤回為止。用完請關閉分頁。

為什麼畫面是鏡像的?

瀏覽器會把前鏡頭的即時預覽鏡像化,模擬大家熟悉的「照鏡子」效果。截取的快照不一定是鏡像,兩種畫面都檢查一下。CSS transform: scaleX(-1) 可以切換是否鏡像。

如果攝影機權限被永久拒絕怎麼辦?

在 Chrome 中,點選網址列的攝影機圖示 →「一律允許」。需要的話可以到 chrome://settings/content/camera 重設。其他瀏覽器有類似的權限設定。授權後重新整理頁面即可。