Görüntü Yakalama, hareketsiz görüntüler yakalamak ve kamera donanım ayarlarını yapılandırmak için kullanılan bir API'dir. Bu API, Android ve masaüstünde Chrome 59 sürümünde kullanılabilir. Ayrıca, bir ImageCapture çoklu dolgu kitaplığı da yayınladık.
API yakınlaştırma, parlaklık, kontrast, ISO ve beyaz dengesi gibi kamera özellikleri üzerinde kontrol sahibi olmanızı sağlar. Hepsinden önemlisi, Resim Yakalama mevcut bir cihaz kamerasının veya web kamerasının tam çözünürlük özelliklerine erişmenizi sağlar. Web'de fotoğraf çekmek için önceki tekniklerde, hareketsiz resimler için kullanılabilenden daha düşük çözünürlüklü video anlık görüntüleri kullanılıyordu.
Kaynak olarak MediaStreamTrack
bir ImageCapture
nesnesi oluşturulur. Bu durumda API'nin iki yakalama yöntemi (takePhoto()
ve grabFrame()
), ayrıca kameranın özelliklerini ve ayarlarını alma ve bu ayarları değiştirme yolları vardır.
İnşaat
Image Capture API, getUserMedia()
kaynağından alınan MediaStreamTrack
aracılığıyla kameraya erişim sağlar:
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);
}
Bu kodu Geliştirici Araçları konsolundan deneyebilirsiniz.
Çekim Yapın
Çekim iki şekilde yapılabilir: tam kare ve hızlı anlık görüntü. takePhoto()
, tek bir fotoğraf pozlamasının sonucu olan Blob
değerini döndürür. Bu fotoğraf indirilebilir, tarayıcı tarafından saklanabilir veya <img>
öğesinde görüntülenebilir. Bu yöntem, mevcut en yüksek fotoğraf makinesi çözünürlüğünü kullanır.
Örneğin:
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()
, canlı videonun anlık görüntüsü olan bir ImageBitmap
nesnesi döndürür. Bu nesne (örneğin), <canvas
> öğesi üzerinde çizilebilir ve ardından renk değerleri seçici olarak değiştirilmek üzere işlenebilir. ImageBitmap
öğesinin yalnızca video kaynağının çözünürlüğüne sahip olacağını unutmayın. Bu çözünürlük, genellikle kameranın sabit görüntü özelliklerinden daha düşüktür. Örneğin:
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));
Özellikler ve ayarlar
Yakalama ayarlarını değiştirmenin çeşitli yolları vardır. Bu değişiklikler, değişikliklerin MediaStreamTrack
öğesine mi yansıtılacağına yoksa yalnızca takePhoto()
tarihinden sonra mı görülebilir? Örneğin, zoom
düzeyindeki bir değişiklik hemen MediaStreamTrack
değerine uygulanır. Kırmızı göz azaltma, ayarlandığında yalnızca fotoğraf çekilirken uygulanır.
"Canlı" kamera özellikleri ve ayarları önizleme aracılığıyla değiştirilir
MediaStreamTrack
: MediaStreamTrack.getCapabilities()
, somut desteklenen özelliklerin yanı sıra aralıklar veya izin verilen değerler (ör. desteklenen yakınlaştırma aralığı veya izin verilen beyaz dengesi modları) içeren bir MediaTrackCapabilities
sözlük döndürür.
Buna karşılık olarak MediaStreamTrack.getSettings()
, somut geçerli ayarlarla bir MediaTrackSettings
döndürür. Yakınlaştırma, parlaklık ve flaş modu bu kategoriye aittir. Örneğin:
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;
}
"Canlı Olmayan" kamera özellikleri ve ayarları, ImageCapture
nesnesi aracılığıyla değiştirilir: ImageCapture.getPhotoCapabilities()
, "Canlı Olmayan" kamera özelliklerine erişim sağlayan bir PhotoCapabilities
nesnesi döndürür.
Benzer şekilde, ImageCapture.getPhotoSettings()
Chrome 61'den itibaren somut geçerli ayarlara sahip
PhotoSettings
nesnesi döndürür. Fotoğraf çözünürlüğü, kırmızı göz azaltma ve flaş modu (flaş hariç) bu bölüme aittir. Örneğin:
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));
Yapılandırma
"Canlı" kamera ayarları, önizlemenin MediaStreamTrack
applyConstraints()
kısıtlamaları aracılığıyla yapılandırılabilir. Örneğin:
var zoomSlider = document.querySelector('input[type=range]');
mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
.catch(error => console.error('Uh, oh, applyConstraints() error:', error));
"Canlı Olmayan" kamera ayarları, takePhoto()
ürününün isteğe bağlı PhotoSettings
sözlüğüyle yapılandırılır. Örneğin:
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));
Kamera özellikleri
Yukarıdaki kodu çalıştırırsanız grabFrame()
ve takePhoto()
sonuçlarının boyutları arasında fark göreceksiniz.
takePhoto()
yöntemi, kameranın maksimum çözünürlüğüne erişim sağlar.
grabFrame()
yalnızca oluşturucunun içindeki MediaStreamTrack
içinde bulunan bir sonraki kullanılabilir VideoFrame
işlemini alır, takePhoto()
ise MediaStream
işlemini kesintiye uğratır, kamerayı yeniden yapılandırır, fotoğrafı çeker (genellikle Blob
olur) ve ardından MediaStreamTrack
öğesini devam ettirir. Özetle bu, takePhoto()
hizmetinin kameranın tüm hareketsiz görüntü çözünürlüğü özelliklerine erişmesine olanak tanır. Önceden, "fotoğraf çekmek" yalnızca canvas
öğesinde drawImage()
çağrısı yapılarak ve kaynak olarak videodan yararlanılarak yapılabiliyordu (buradaki örneğe göre).
README.md bölümünde daha fazla bilgi bulabilirsiniz.
Bu demoda <canvas>
boyutları, video akışının çözünürlüğüne ayarlanır. <img>
öğesinin doğal boyutu ise kameranın maksimum sabit görüntü çözünürlüğüdür. CSS elbette her ikisinin de
görüntü boyutunu ayarlamak için kullanılır.
Hareketsiz resimler için mevcut kamera çözünürlüklerinin tamamı, PhotoCapabilities.imageHeight
ve imageWidth
için MediaSettingsRange
değerleri kullanılarak alınabilir ve ayarlanabilir. getUserMedia()
için minimum ve maksimum genişlik ve yükseklik kısıtlamalarının video için olduğunu unutmayın. Bunlar, (bahsedildiği gibi) hareketsiz resimlerin kamera özelliklerinden farklı olabilir. Diğer bir ifadeyle, getUserMedia()
uygulamasından kanvasa kaydederken cihazınızın tam çözünürlük özelliklerine erişemeyebilirsiniz. WebRTC çözünürlük kısıtlama demosu, çözünürlük için getUserMedia()
kısıtlamalarının nasıl ayarlanacağını gösterir.
Başka bir şey var mıydı?
Shape Detection API, Görüntü Yakalama ile iyi performans gösterir:
grabFrame()
,ImageBitmap
öğelerini birFaceDetector
veyaBarcodeDetector
öğesine aktarmak için tekrar tekrar çağrılabilir. Paul Kinlan'ın blog yayınında API hakkında daha fazla bilgi edinebilirsiniz.Kamera flaşına (cihaz ışığı)
PhotoCapabilities
konumundakiFillLightMode
üzerinden erişilebilir, ancak Torch modu (sürekli açık)MediaTrackCapabilities
içinde bulunabilir.
Demolar ve kod örnekleri
Destek
- Android ve masaüstünde Chrome 59.
- Deneysel Web Platformu özellikleri etkin haldeki Android ve masaüstü sürümlerinde 59 sürümünden önceki Chrome Canary sürümü.