拍照及控制相機設定

Miguel Casas-Sanchez
Twitter GitHub
山姆杜頓
法蘭索瓦博福
François Beaufort
GitHub

圖片擷取 API 可用於擷取靜態圖片及調整相機硬體設定。Android 版和電腦版 Chrome 59 版提供這個 API。此外，我們也發布了 ImageCapture polyfill 程式庫。

這個 API 可讓您控制相機功能，例如縮放、亮度、對比、ISO 和白色平衡。最棒的是，「Image Capture」可讓您在任何裝置相機或網路攝影機中使用完整解析度的功能。先前在網路上拍照的技術使用了視訊快照，其解析度比靜態圖片低。

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 可用來設定兩者的顯示大小。

針對靜態圖片，您可以使用 PhotoCapabilities.imageHeight 和 imageWidth 的 MediaSettingsRange 值，取得及設定所有靜態圖片的可用相機解析度。請注意，getUserMedia() 的最小和最大寬度與高度限制適用於影片，如先前所述，可能與靜態圖片的相機功能不同。也就是說，將 getUserMedia() 儲存到畫布時，可能無法使用裝置的完整解析度功能。WebRTC 解析限制示範說明如何為解析度設定 getUserMedia() 限制。

要繼續設定嗎？

示範與程式碼範例

支援

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

瞭解詳情