拍照及控制相機設定

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 可透過取得的 MediaStreamTrack 存取相機 來自 getUserMedia()：

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 和 MediaSettingsRange 的 imageWidth。請注意， getUserMedia() 適用於影片，但如上所述，這可能與 靜態圖片。也就是說，你可能無法 裝置的完整解析度功能， getUserMedia()到無框畫。WebRTC 解析度限制示範 說明如何設定解析度的 getUserMedia() 限制條件。

要繼續設定嗎？

示範與程式碼範例

支援

  • Android 版和電腦版 Chrome 59。
  • 搭載 Chrome Canary 及 Android 至 59 以下版本的 Chrome Canary 已啟用實驗性 Web Platform 功能。

瞭解詳情