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