拍照及控制相機設定

Miguel Casas-Sanchez
X GitHub
Sam Dutton
François Beaufort
François Beaufort
GitHub

「圖片擷取」這個 API 可用來擷取靜態相片，並調整相機硬體設定。適用於 Android 裝置和電腦的 Chrome 59 版本。此外，我們也發布了 ImageCapture polyfill 程式庫。

這個 API 可讓您控管縮放、亮度、對比、ISO 和白平衡等相機功能。最棒的是，圖片拍攝功能可讓你在任何可用的裝置相機或網路攝影機中，使用全解析度功能。之前在網路上拍照的技術是使用影片快照，解析度比靜態圖片低。

ImageCapture 物件是以 MediaStreamTrack 做為來源。API 隨後有兩個擷取方法 (takePhoto() 和 grabFrame()) 以及兩種擷取方法，可用來擷取相機功能和設定，以及變更這些設定。

建築

Image Capture API 透過從 getUserMedia() 取得的 MediaStreamTrack 存取相機：

navigator.mediaDevices.getUserMedia({video: true})
    .then(gotMedia)
    .catch(error => console.error('getUserMedia() error:', error));

function gotMedia(mediaStream) {
    const mediaStreamTrack = mediaStream.getVideoTracks()[0];
    const imageCapture = new ImageCapture(mediaStreamTrack);
    console.log(imageCapture);
}

您可以在開發人員工具控制台中試用這個程式碼。

擷取

擷取畫面的方式有兩種：完整頁框和快速快照。takePhoto() 會傳回 Blob，也就是單一相片曝光的結果，可供瀏覽器下載、儲存，或顯示在 <img> 元素中。這個方法會使用最高的攝影相機解析度。 例如：

const img = document.querySelector('img');
// ...
imageCapture.takePhoto()
    .then(blob => {
    img.src = URL.createObjectURL(blob);
    img.onload = () => { URL.revokeObjectURL(this.src); }
    })
    .catch(error => console.error('takePhoto() error:', error));

grabFrame() 會傳回 ImageBitmap 物件，也就是 即時影片的快照。舉例來說，您可以在 <canvas> 上繪製這種快照，然後進行後續處理以選擇性變更顏色值。請注意，ImageBitmap 只有影片來源的解析度，通常會低於相機的靜態圖片功能。例如：

const canvas = document.querySelector('canvas');
// ...
imageCapture.grabFrame()
    .then(imageBitmap => {
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    })
    .catch(error => console.error('grabFrame() error:', error));

功能和設定

擷取設定的方法有很多種，具體取決於變更是否會反映在 MediaStreamTrack 中，或只能顯示在 takePhoto() 之後。舉例來說，zoom 層級的變更會立即傳播至 MediaStreamTrack，而減少紅眼時，則只會在拍照時套用。

您可以透過預覽 MediaStreamTrack 處理「即時」相機功能和設定：MediaStreamTrack.getCapabilities() 會傳回 MediaTrackCapabilities 字典，其中包含具體支援的功能以及範圍或允許值，例如支援的縮放範圍或允許的白平衡模式。相對地，MediaStreamTrack.getSettings() 會傳回包含具體目前設定的 MediaTrackSettings。縮放、亮度和手電筒模式屬於這個類別，例如：

var zoomSlider = document.querySelector('input[type=range]');
// ...
const capabilities = mediaStreamTrack.getCapabilities();
const settings = mediaStreamTrack.getSettings();
if (capabilities.zoom) {
    zoomSlider.min = capabilities.zoom.min;
    zoomSlider.max = capabilities.zoom.max;
    zoomSlider.step = capabilities.zoom.step;
    zoomSlider.value = settings.zoom;
}

「非即時」相機功能和設定是透過 ImageCapture 物件來操控：ImageCapture.getPhotoCapabilities() 會傳回 PhotoCapabilities 物件，提供「非即時」可用相機功能的存取權。相對地，自 Chrome 61 版起，ImageCapture.getPhotoSettings() 會傳回包含具體目前設定的 PhotoSettings 物件。相片解析度、紅色眼睛縮減和閃光燈模式 (手電筒除外) 都屬於這個部分，例如：

var widthSlider = document.querySelector('input[type=range]');
// ...
imageCapture.getPhotoCapabilities()
    .then(function(photoCapabilities) {
    widthSlider.min = photoCapabilities.imageWidth.min;
    widthSlider.max = photoCapabilities.imageWidth.max;
    widthSlider.step = photoCapabilities.imageWidth.step;
    return imageCapture.getPhotoSettings();
    })
    .then(function(photoSettings) {
    widthSlider.value = photoSettings.imageWidth;
    })
    .catch(error => console.error('Error getting camera capabilities and settings:', error));

設定中

您可以透過預覽 MediaStreamTrack 的 applyConstraints() 限制調整「即時」相機設定，例如：

var zoomSlider = document.querySelector('input[type=range]');

mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
    .catch(error => console.error('Uh, oh, applyConstraints() error:', error));

「非即時」相機設定可透過 takePhoto() 的選用 PhotoSettings 字典設定，例如：

var widthSlider = document.querySelector('input[type=range]');
imageCapture.takePhoto({ imageWidth : widthSlider.value })
    .then(blob => {
    img.src = URL.createObjectURL(blob);
    img.onload = () => { URL.revokeObjectURL(this.src); }
    })
    .catch(error => console.error('Uh, oh, takePhoto() error:', error));

相機功能

如果您執行上述程式碼，會發現 grabFrame() 和 takePhoto() 結果在尺寸上存在差異。

takePhoto() 方法可存取相機的最高解析度。

grabFrame() 只會使用轉譯器程序中 MediaStreamTrack 中的下一個可用的 VideoFrame，而 takePhoto() 中斷 MediaStream，重新設定相機、拍照 (通常是以壓縮格式進行，因此是 Blob)，然後繼續執行 MediaStreamTrack。基本上，這表示 takePhoto() 可存取相機的完整靜態圖片解析度功能。先前您只能在 canvas 元素上呼叫 drawImage()，並使用影片做為來源來「拍照」(如這裡的範例所示)。

詳情請參閱 README.md 相關章節。

在此示範中，<canvas> 尺寸會設為影片串流的解析度，而 <img> 的自然大小則是相機的靜態圖片解析度上限。CSS 當然需要使用 CSS 設定兩者的顯示大小

只要使用 PhotoCapabilities.imageHeight 和 imageWidth 的 MediaSettingsRange 值，即可取得及設定靜態圖片的完整相機解析度。請注意，getUserMedia() 的最小和最大寬度和高度限制適用於影片，這可能與靜態圖片的相機功能不同 (如上所述)。換句話說，當裝置從 getUserMedia() 儲存至畫布時，可能無法使用完整解析度功能。WebRTC 解析度限制示範說明如何設定解析度的 getUserMedia() 限制。

要繼續設定嗎？

示範與程式碼範例

支援

  • Android 版和電腦版 Chrome 59。
  • Android 版和電腦版 Chrome Canary 至 59 以下版本的 Chrome Canary，並啟用實驗性網路平台功能。

瞭解詳情