概述

ImageCapture API 是 Web API 的一部分，允許網頁應用直接訪問和控制設備攝像頭，實現高質量的圖像捕獲功能。該 API 提供了比傳統的?getUserMedia()?更精細的控制能力，支持設置分辨率、白平衡、曝光等參數。

核心特性

1. 高質量圖像捕獲

• 支持高分辨率圖像捕獲
• 可配置圖像格式和質量
• 支持連拍模式

2. 精細參數控制

• 曝光控制
• 白平衡調節
• 對焦設置
• ISO 感光度調節
• 縮放控制

3. 實時預覽

• 實時攝像頭預覽
• 參數實時調整
• 狀態監控

API 結構

ImageCapture 構造函數

const imageCapture = new ImageCapture(mediaStreamTrack);

主要方法

1. takePhoto()

// 基本用法
const blob = await imageCapture.takePhoto();// 帶參數用法
const blob = await imageCapture.takePhoto({imageWidth: 1920,imageHeight: 1080,fillLightMode: "auto",redEyeReduction: true,
});

2. grabFrame()

// 獲取當前幀
const imageBitmap = await imageCapture.grabFrame();

3. getCapabilities()

// 獲取設備能力
const capabilities = imageCapture.getCapabilities();

4. getSettings()

// 獲取當前設置
const settings = imageCapture.getSettings();

5. applyConstraints()

// 應用約束條件
await imageCapture.applyConstraints({imageWidth: 1920,imageHeight: 1080,exposureMode: "manual",exposureTime: 1000,
});

參數配置詳解

圖像尺寸參數

• imageWidth: 圖像寬度（像素）
• imageHeight: 圖像高度（像素）
• imageQuality: 圖像質量（0.0-1.0）

曝光參數

• exposureMode: 曝光模式（’auto’, ‘manual’）
• exposureTime: 曝光時間（微秒）
• exposureCompensation: 曝光補償

白平衡參數

• whiteBalanceMode: 白平衡模式（’auto’, ‘manual’）
• colorTemperature: 色溫（開爾文）

對焦參數

• focusMode: 對焦模式（’auto’, ‘manual’）
• focusDistance: 對焦距離

其他參數

• fillLightMode: 補光模式
• redEyeReduction: 紅眼消除
• zoom: 縮放比例

完整示例

基礎實現

async function initImageCapture() {try {// 獲取媒體流const stream = await navigator.mediaDevices.getUserMedia({video: {width: { ideal: 1920 },height: { ideal: 1080 },},});// 創建 ImageCapture 實例const videoTrack = stream.getVideoTracks()[0];const imageCapture = new ImageCapture(videoTrack);// 獲取設備能力const capabilities = imageCapture.getCapabilities();console.log("設備能力:", capabilities);// 設置參數await imageCapture.applyConstraints({imageWidth: 1920,imageHeight: 1080,imageQuality: 0.8,});return imageCapture;} catch (error) {console.error("初始化失敗:", error);}
}

拍照功能

async function takePhoto(imageCapture) {try {const blob = await imageCapture.takePhoto({imageWidth: 1920,imageHeight: 1080,fillLightMode: "auto",redEyeReduction: true,});// 創建預覽const url = URL.createObjectURL(blob);const img = document.createElement("img");img.src = url;document.body.appendChild(img);return blob;} catch (error) {console.error("拍照失敗:", error);}
}

實時預覽

async function startPreview(imageCapture) {const video = document.querySelector("video");// 獲取媒體流并播放const stream = await navigator.mediaDevices.getUserMedia({ video: true });video.srcObject = stream;video.play();// 定期獲取幀setInterval(async () => {try {const imageBitmap = await imageCapture.grabFrame();// 處理幀數據processFrame(imageBitmap);} catch (error) {console.error("獲取幀失敗:", error);}}, 100);
}

錯誤處理

常見錯誤類型

1. NotSupportedError: 設備不支持請求的功能
2. NotAllowedError: 用戶拒絕權限
3. NotFoundError: 找不到指定的媒體設備
4. NotReadableError: 設備被占用

錯誤處理示例

async function handleImageCapture() {try {const imageCapture = await initImageCapture();const photo = await takePhoto(imageCapture);} catch (error) {switch (error.name) {case "NotSupportedError":console.error("設備不支持此功能");break;case "NotAllowedError":console.error("需要攝像頭權限");break;default:console.error("未知錯誤:", error);}}
}

最佳實踐

1. 權限管理

• 始終檢查用戶權限
• 提供清晰的權限說明
• 處理權限拒絕情況

2. 性能優化

• 根據設備能力調整參數
• 避免頻繁的參數調整
• 合理設置圖像質量

3. 用戶體驗

• 提供實時預覽
• 顯示加載狀態
• 提供錯誤反饋

4. 兼容性處理

// 檢查 API 支持
if ("ImageCapture" in window) {// 使用 ImageCapture API
} else {// 降級到 getUserMediaconsole.warn("ImageCapture API 不支持，使用降級方案");
}

瀏覽器支持

• Chrome: 56+
• Firefox: 不支持
• Safari: 不支持
• Edge: 79+

注意事項

1. HTTPS 要求: 在生產環境中必須使用 HTTPS
2. 權限要求: 需要用戶明確授權攝像頭權限
3. 設備限制: 不同設備的支持能力不同
4. 性能考慮: 高分辨率圖像處理可能影響性能

總結

ImageCapture API 為 Web 應用提供了強大的圖像捕獲能力，通過精細的參數控制，可以實現專業級的圖像捕獲功能。雖然瀏覽器支持有限，但在支持的瀏覽器中，它提供了比傳統方法更強大的功能和更好的用戶體驗。

?Web 圖像捕獲革命：ImageCapture API 全面解析與實戰指南 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享