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 sprzętu do obsługi aparatu. ustawieniach. Ten interfejs API jest dostępny w Chrome 59 na urządzeniach z Androidem i komputerach. oraz opublikowaliśmy bibliotekę polyfill ImageCapture.

Interfejs API umożliwia kontrolę nad funkcjami kamery, takimi jak zoom, jasność kontrast, czułość ISO i balans bieli. Najlepsze jest to, że funkcja robienia zdjęć umożliwia do możliwości wykorzystania pełnej rozdzielczości każdej dostępnej w urządzeniu kamery lub kamery internetowej. Wcześniejsze metody robienia zdjęć w internecie wykorzystywały zrzuty wideo, o niższej rozdzielczości dostępnej dla zdjęć.

Obiekt ImageCapture jest konstruowany z MediaStreamTrack jako źródłem. Interfejs API ma następnie 2 metody przechwytywania takePhoto() i grabFrame() oraz sposoby uzyskać dostęp do funkcji i ustawień kamery oraz je zmienić ustawieniach.

Roboty drogowe

Interfejs Image Capture API uzyskuje dostęp do aparatu za pomocą uzyskanego MediaStreamTrack od 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 Blob, wynik pojedynczej ekspozycji zdjęcia, które można pobrać, zapisać w przeglądarce lub wyświetlić w <img> . Ta metoda korzysta z najwyższej dostępnej rozdzielczości 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 (na przykład) narysować na <canvas> a potem przetworzone w celu wybiórczo zmienić wartości kolorów. Pamiętaj, że ImageBitmap będzie mieć tylko rozdzielczość źródła obrazu, która jest zwykle niższa niż nieruchomych obrazów. 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 zmieniać w zależności od czy zmiany zostaną uwzględnione w MediaStreamTrack, czy mogą zostać odnotowano po takePhoto(). Na przykład zmiana poziomu zoom jest natychmiastowa rozpowszechniony w MediaStreamTrack, a redukcja efektu czerwonych oczu po ustawieniu jest stosowana tylko podczas robienia zdjęcia.

„Aktywny” możliwości i ustawienia kamery są modyfikowane na podglądzie MediaStreamTrack: MediaStreamTrack.getCapabilities() zwraca błąd MediaTrackCapabilities. słownik z konkretnymi obsługiwanymi funkcjami i zakresami lub dozwolonymi wartości, np. obsługiwanego zakresu powiększenia lub dozwolonych trybów balansu bieli. Odpowiednia funkcja MediaStreamTrack.getSettings() zwraca błąd MediaTrackSettings. z konkretnymi bieżącymi ustawieniami. Tryby powiększenia, jasności i latarki należą do tę kategorię, na przykład:

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

„Niedostępny” możliwości i ustawienia kamery są modyfikowane przez Obiekt ImageCapture: ImageCapture.getPhotoCapabilities() zwraca błąd PhotoCapabilities. obiekt zapewniający dostęp do folderu „Nieopublikowane” dostępne funkcje aparatu. Od wersji Chrome 61 (ImageCapture.getPhotoSettings()) zwraca PhotoSettings. z konkretnymi bieżącymi ustawieniami. Rozdzielczość zdjęcia, efekt czerwonych oczu tryb redukcji i lampy błyskowej (z wyjątkiem latarki) należą do tej sekcji, na przykład:

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ę

„Aktywny” ustawienia aparatu można skonfigurować na podglądzie applyConstraints(), użytkownik: MediaStreamTrack ograniczenia , na przykład:

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

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

„Niedostępny” w ustawieniach kamery wybrano opcjonalny takePhoto() PhotoSettings. słownik, 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 tego kodu zauważysz różnicę w wymiarach Wyniki: grabFrame() i takePhoto().

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

grabFrame() ma następne wolne miejsce (VideoFrame) w MediaStreamTrack wewnątrz procesu renderowania, podczas gdy rozszerzenie takePhoto() przerywa działanie MediaStream, ponownie konfiguruje aparat, robi zdjęcie (zwykle w formacie skompresowanym, – Blob), a następnie wznowi działanie MediaStreamTrack. W skrócie oznacza to, że takePhoto() umożliwia dostęp do obrazu w pełnej rozdzielczości możliwości aparatu. Wcześniej można było zrobić tylko „zrobienie zdjęcia”. autor: wywołując drawImage() w elemencie canvas, używając filmu jako źródła (zgodnie z przykład tutaj).

Więcej informacji znajdziesz w sekcji README.md.

W tej wersji demonstracyjnej wymiary <canvas> są ustawione na rozdzielczość filmu. strumienia, natomiast naturalny rozmiar <img> to maksymalny rozmiar nieruchomych obrazów. i tak dalej. Oczywiście CSS służy do określania w obu przypadkach.

Możesz pobierać i ustawiać wszystkie rozdzielczości zdjęć z aparatu używając wartości MediaSettingsRange dla PhotoCapabilities.imageHeight i imageWidth Pamiętaj, że ograniczenia minimalnej i maksymalnej szerokości i wysokości dla getUserMedia() dotyczą filmów, które (zgodnie z rozmową) mogą się różnić od aparatów fotograficznych. Innymi słowy, być może nie uda Ci się korzystać z funkcji urządzenia w pełnej rozdzielczości podczas zapisywania getUserMedia(). Prezentacja ograniczenia rozdzielczości WebRTC pokazuje, jak ustawić ograniczenia rozdzielczości getUserMedia().

Coś jeszcze?

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 oraz Włączone funkcje eksperymentalnej platformy internetowej.

Więcej informacji