Robienie zdjęć i kontrolowanie ustawień aparatu

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

Image Capture to interfejs API służący do robienia zdjęć i konfigurowania ustawień sprzętowych aparatu. Ten interfejs API jest dostępny w Chrome 59 na urządzeniach z Androidem i komputerach. Opublikowaliśmy też bibliotekę polyfill ImageCapture.

Interfejs API umożliwia kontrolę nad funkcjami aparatu, takimi jak powiększenie, jasność, kontrast, ISO czy balans bieli. A co najważniejsze, funkcja robienia zdjęć umożliwia korzystanie z pełnej rozdzielczości dostępnej w dowolnym aparacie i kamerze internetowej urządzenia. Wcześniejsze metody robienia zdjęć w internecie wykorzystywały zrzuty wideo, które mają niższą rozdzielczość niż w przypadku zdjęć.

Obiekt ImageCapture jest konstruowany z MediaStreamTrack jako źródłem. Interfejs API udostępnia 2 metody przechwytywania takePhoto() i grabFrame() oraz sposoby pobierania możliwości i ustawień kamery oraz ich zmiany.

W trakcie budowy

Interfejs Image Capture API uzyskuje dostęp do aparatu za pomocą interfejsu MediaStreamTrack uzyskanego z witryny 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);
}

Możesz wypróbować ten kod w konsoli Narzędzi deweloperskich.

Rejestruj

Przechwytywanie można robić na 2 sposoby: w trybie pełnego kadru i na szybkim slajdzie. takePhoto() zwraca wartość Blob, wynik pojedynczej ekspozycji zdjęcia, który można pobrać, zapisać w przeglądarce lub wyświetlić w elemencie <img>. W tej metodzie używana jest najwyższa dostępna rozdzielczość aparatu fotograficznego. Na przykład:

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() zwraca obiekt ImageBitmap, migawki transmisji na żywo, które można np. narysować na elemencie <canvas>, a następnie przetworzyć go w celu selektywnej zmiany wartości kolorów. Pamiętaj, że ImageBitmap będzie określać tylko rozdzielczość źródła wideo, która jest zwykle niższa niż rozdzielczość obrazu statycznego aparatu. Na przykład:

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));

Uprawnienia i ustawienia

Ustawieniami przechwytywania możesz manipulować na wiele sposobów w zależności od tego, czy zmiany zostaną odzwierciedlone w tabeli MediaStreamTrack, czy będą widoczne dopiero po takePhoto(). Na przykład zmiana poziomu zoom jest natychmiast stosowana do MediaStreamTrack, a redukcja efektu czerwonych oczu, jeśli jest ustawiona, jest stosowana tylko podczas robienia zdjęcia.

Funkcje i ustawienia kamery w trybie transmisji na żywo są zmieniane na podglądzie MediaStreamTrack: MediaStreamTrack.getCapabilities() zwraca słownik MediaTrackCapabilities z konkretnymi obsługiwanymi możliwościami i zakresami lub dozwolonymi wartościami, np. obsługiwany zakres powiększenia lub dozwolone tryby balansu bieli. W tym przypadku funkcja MediaStreamTrack.getSettings() zwraca MediaTrackSettings z konkretnymi bieżącymi ustawieniami. Do tej kategorii należą m.in. zoom, jasność i tryb latarki:

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;
}

Funkcje i ustawienia „nieaktywnych” kamer są modyfikowane za pomocą obiektu ImageCapture: ImageCapture.getPhotoCapabilities() zwraca obiekt PhotoCapabilities, który zapewnia dostęp do dostępnych funkcji kamery „nieaktywnych”. W związku z tym, od Chrome 61, ImageCapture.getPhotoSettings() zwraca obiekt PhotoSettings z konkretnymi bieżącymi ustawieniami. W tej sekcji należą między innymi rozdzielczość zdjęcia, redukcja efektu czerwonych oczu oraz tryb lampy błyskowej (z wyjątkiem latarki):

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));

Konfiguruję

Ustawienia kamery „Live” można skonfigurować za pomocą ograniczeń applyConstraints() w podglądzie, na przykład:MediaStreamTrack

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

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

Ustawienia kamery „Nieaktywne” są konfigurowane za pomocą opcjonalnego słownika PhotoSettings w takePhoto(), na przykład:

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));

Funkcje aparatu

Po uruchomieniu powyższego kodu zauważysz różnicę w wymiarach między wynikami grabFrame() i takePhoto().

Metoda takePhoto() zapewnia dostęp do maksymalnej rozdzielczości kamery.

grabFrame() po prostu ustawia następny dostępny element VideoFrame w procesie renderowania MediaStreamTrack, podczas gdy takePhoto() zakłóca działanie funkcji MediaStream, ponownie konfiguruje aparat, robi zdjęcie (zwykle w formacie skompresowanym, czyli Blob), a następnie wznawia pracę MediaStreamTrack. Oznacza to, że takePhoto() umożliwia korzystanie z pełnej rozdzielczości zdjęć robionych przez aparat. Wcześniej można było zrobić zdjęcie tylko przez wywołanie metody drawImage() w elemencie canvas i podanie filmu jako źródła (jak w tym przykładzie).

Więcej informacji znajdziesz w sekcji README.md.

W tej wersji demonstracyjnej wymiary <canvas> są ustawiane na rozdzielczość strumienia wideo, a naturalny rozmiar elementu <img> określa maksymalną rozdzielczość nieruchomych obrazów kamery. Do określania rozmiaru wyświetlania w obu tych miejscach służy oczywiście CSS.

Wszystkie dostępne rozdzielczości aparatu dla zdjęć można pobrać i ustawić za pomocą wartości MediaSettingsRange dla parametrów PhotoCapabilities.imageHeight i imageWidth. Pamiętaj, że ograniczenia minimalnej i maksymalnej szerokości i wysokości w polu getUserMedia() dotyczą filmów, które (co zostało już omówione) mogą różnić się od ograniczeń aparatu w przypadku zdjęć. Oznacza to, że podczas zapisywania elementów z getUserMedia() w obszarze roboczym możesz nie mieć dostępu do funkcji urządzenia w pełnej rozdzielczości. Prezentacja ograniczenia rozdzielczości WebRTC pokazuje, jak ustawić ograniczenia getUserMedia() rozwiązywania problemów.

Coś jeszcze?

  • Interfejs shape Detection API dobrze współpracuje z funkcją Image Capture. Komponent grabFrame() może być wywoływany wielokrotnie, aby przekazywać elementy ImageBitmap do FaceDetector lub BarcodeDetector. Więcej informacji o interfejsie API znajdziesz w poście na blogu Paula Kinlana.

  • lampę błyskową aparatu (lampa błyskowa urządzenia) można otworzyć za pomocą opcji FillLightMode w PhotoCapabilities, a tryb latarki (ciągła lampa błyskowa) – w MediaTrackCapabilities.

Prezentacje i przykłady kodu

Pomoc

  • Chrome 59 na urządzenia z Androidem i komputery.
  • Chrome Canary na Androida i komputery w wersji starszej niż 59 z włączonymi funkcjami eksperymentalnej platformy internetowej.

Więcej informacji