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ć elementyImageBitmap
doFaceDetector
lubBarcodeDetector
. 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
wPhotoCapabilities
, a tryb latarki (ciągła lampa błyskowa) – wMediaTrackCapabilities
.
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.