攝影機測試
測試攝影機裝置,即時預覽畫面、拍照截圖、查看裝置資訊
即時預覽
什麼是攝影機測試?
攝影機測試用來確認瀏覽器能否存取筆電內建攝影機、外接 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 重設。其他瀏覽器有類似的權限設定。授權後重新整理頁面即可。