「圖片擷取」這個 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()
限制。
要繼續設定嗎?
Shape Detection API 可與圖片擷取搭配使用:您可以重複呼叫
grabFrame()
,將ImageBitmap
動態饋給FaceDetector
或BarcodeDetector
。如要進一步瞭解 API,請參閱 Paul Kinlan 的網誌文章。相機閃光燈 (裝置燈) 可透過
PhotoCapabilities
中的FillLightMode
存取,但可以到MediaTrackCapabilities
找到「Torch 模式」 (持續開啟閃光燈)。
示範與程式碼範例
支援
- Android 版和電腦版 Chrome 59。
- Android 版和電腦版 Chrome Canary 至 59 以下版本的 Chrome Canary,並啟用實驗性網路平台功能。