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

Miguel Casas-Sanchez
X GitHub
Sam Dutton
François Beaufort
François Beaufort
GitHub

Resim Yakalama, hareketsiz görüntüler yakalamak ve kamera donanımını yapılandırmak için kullanılan bir API'dir Ayarlar'da devre dışı bırakabilirsiniz. Bu API, Android ve masaüstündeki Chrome 59 sürümünde kullanılabilir. Ayrıca ImageCapture polyfill kitaplığı yayınladı.

API; yakınlaştırma, parlaklık, parlaklık ve güvenlik gibi kontrast, ISO ve beyaz dengesi gibi. En iyi yanı da, Resim Yakalama özelliği, Mevcut cihaz kamerasının veya web kamerasının tam çözünürlük özellikleri. Web'de fotoğraf çekmeye yönelik önceki tekniklerde, video anlık görüntüleri, Bu resimler, hareketsiz resimlere kıyasla daha düşük çözünürlüktedir.

Kaynak olarak MediaStreamTrack ile bir ImageCapture nesnesi oluşturuldu. İlgili içeriği oluşturmak için kullanılan API'nin daha sonra takePhoto() ve grabFrame() olmak üzere iki yakalama yöntemi ve kameranın özelliklerini ve ayarlarını alıp bunları Ayarlar'da devre dışı bırakabilirsiniz.

Yol çalışması

Image Capture API, alınan bir MediaStreamTrack üzerinden kameraya erişim sağlar gönderen: 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);
}

Bu kodu Geliştirici Araçları konsolunda deneyebilirsiniz.

Fotoğraf çek

İki şekilde fotoğraf çekebilirsiniz: 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, Bunlar indirilebilir, tarayıcı tarafından depolanabilir veya bir <img> öğesine dokunun. Bu yöntemde, mevcut en yüksek fotoğraf makinesi çözünürlüğü kullanılı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(), bir ImageBitmap nesnesi, canlı videonun anlık görüntüsü döndürür. (örneğin) bir <canvas> ve sonra iş akışını renk değerlerini seçmeli şekilde değiştirme. ImageBitmap öğesinin yalnızca video kaynağının çözünürlüğüdür; bu değer genellikle kameranın çözünürlüğünden daha düşüktür. hareketsiz görüntü özellikleriyle donatılmıştı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 birkaç yolu vardır: yansıtılıp yansıtılmayacağını, MediaStreamTrack mi yoksa yalnızca takePhoto() tarihinden sonra görüldü. Örneğin, zoom seviyesindeki bir değişiklik anında MediaStreamTrack değerine yayılır. Kırmızı göz azaltma, ayarlandığında ise yalnızca fotoğraf çekilirken uygulanır.

"Yayında" kamera özellikleri ve ayarları önizleme aracılığıyla değiştirilir MediaStreamTrack: MediaStreamTrack.getCapabilities(), şunu döndürür: MediaTrackCapabilities özellikleri içeren ve izin verilen aralıkları içeren sözlük değerler, ör. desteklenen yakınlaştırma aralığı veya izin verilen beyaz dengesi modları. Buna karşılık MediaStreamTrack.getSettings(), MediaTrackSettings uyumlu hale getirebilirsiniz. Yakınlaştırma, parlaklık ve flaş modu bu kategori, ö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;
}

"Etkin Değil" kamera özellikleri ve ayarları ImageCapture nesnesi: ImageCapture.getPhotoCapabilities() şunu döndürür: PhotoCapabilities "Canlı Olmayan" öğesine erişim sağlayan nesne mevcut kamera olanaklarından yararlanmanız gerekir. Buna uygun olarak Chrome 61 sürümünden itibaren ImageCapture.getPhotoSettings() şunu döndürür: PhotoSettings somut akım ayarlarına sahip olacaktır. Fotoğraf çözünürlüğü, kırmızı göz azaltma ve flaş modu (fener hariç) bu bölümde yer alır. Ö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

"Yayında" Kamera ayarları önizleme aracılığıyla yapılandırılabilir MediaStreamTrack adlı çocuğun applyConstraints() cihazı kısıtlamalar , örneğin:

var zoomSlider = document.querySelector('input[type=range]');

mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
    .catch(error => console.error('Uh, oh, applyConstraints() error:', error));

"Etkin Değil" kamera ayarları, takePhoto() adlı cihazın isteğe bağlı PhotoSettings Sözlüğün her biri, ö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ç.

takePhoto() yöntemi, kameranın maksimum çözünürlüğüne erişim sağlar.

grabFrame(), MediaStreamTrack içinde bir sonraki müsait VideoFrame turunu gerçekleştiriyor oluşturma sırasında takePhoto(), MediaStream işlemini kesintiye uğratır. kamerayı yeniden yapılandırır, fotoğrafı çeker (genellikle sıkıştırılmış bir biçimde dolayısıyla Blob) oluşturur ve MediaStreamTrack öğesini devam ettirir. Bu, özünde tam resim çözünürlüğüne erişim izni veren takePhoto() kameranın özellikleri. Daha önce yalnızca "fotoğraf çekmek" mümkündü - bir canvas öğesinde drawImage() çağrılır, kaynak olarak video kullanılır ( burada bulabilirsiniz).

README.md bölümünde daha fazla bilgi bulabilirsiniz.

Bu demoda, <canvas> boyutları videonun çözünürlüğüne ayarlanır. <img> alanının doğal boyutu ise maksimum sabit görüntüdür. arka plan çözünürlüğüne sahip. Elbette CSS, reklamları ayarlamak için her ikisinin de boyutu.

Hareketsiz resimler için mevcut kamera çözünürlüklerinin tamamı alınıp ayarlanabilir PhotoCapabilities.imageHeight ve için MediaSettingsRange değerleri kullanılır. imageWidth. Bu öğeler için minimum ve maksimum genişlik ve yükseklik kısıtlamalarının getUserMedia() video içindir ve bunlar (konuştuğu gibi) kamera özellikleri kullanılabilir. Başka bir deyişle, Bir tuvale getUserMedia(). WebRTC çözüm kısıtlaması 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 Resim Yakalama ile iyi çalışır: Feed için grabFrame() tekrar tekrar çağrılabilir ImageBitmap'ları bir FaceDetector veya BarcodeDetector öğesine taşıyacak. Şu konu hakkında daha fazla bilgi edinin: Paul Kinlan'ın blog yayınından API.

  • Kamera flaşına (cihaz ışığı) şuradan erişilebilir: FillLightMode inç PhotoCapabilities ancak Flaş modu (sürekli yanıp sönen ışık) modunu şurada bulabilirsiniz: MediaTrackCapabilities.

Demolar ve kod örnekleri

Destek

  • Android ve masaüstünde Chrome 59.
  • Android ve masaüstü 59 öncesi Chrome Canary sürümü Deneysel Web Platformu özellikleri etkinleştirildiğinde.

Daha fazla bilgi