Fotoğraf çekin ve kamera ayarlarını kontrol edin

Miguel Casas-Sanchez
Furkan
François Beaufort

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 bir FaceDetector veya BarcodeDetector öğ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 konumundaki FillLightMode ü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ü.

Daha fazla bilgi