Image Capture ist eine API zur Aufnahme von Standbildern und zur Konfiguration der Kamerahardware. Einstellungen. Diese API ist in Chrome 59 für Android und Computer verfügbar. Außerdem haben wir hat eine ImageCapture-Polyfill-Bibliothek veröffentlicht.
Die API ermöglicht die Steuerung von Kamerafunktionen wie Zoom, Helligkeit, Kontrast, ISO und Weißabgleich. Und das Beste ist: Mit der Bilderfassung können Sie und die volle Auflösung aller verfügbaren Kamera- oder Webcam-Funktionen nutzen. Bei früheren Techniken zum Aufnehmen von Fotos im Web wurden Video-Schnappschüsse verwendet, deren Auflösung niedriger ist als bei Standbildern.
Ein ImageCapture-Objekt wird mit einer MediaStreamTrack als Quelle erstellt. Die
Die API hat dann die beiden Erfassungsmethoden takePhoto() und grabFrame() sowie Möglichkeiten,
um die Funktionen und Einstellungen der Kamera abzurufen
Einstellungen.
Baustelle
Die Image Capture API erhält über ein abgerufenes MediaStreamTrack-Objekt Zugriff auf eine Kamera.
von 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);
}
Du kannst diesen Code in der Entwicklertools-Konsole ausprobieren.
Aufnehmen
Für die Aufnahme gibt es zwei Möglichkeiten: Vollbild und Quick Snapshot. takePhoto()
gibt Blob zurück, das Ergebnis einer einzelnen fotografischen Belichtung,
die heruntergeladen, vom Browser gespeichert oder in einem <img> angezeigt werden können.
-Elements. Bei dieser Methode wird die höchste verfügbare Kameraauflösung verwendet.
Beispiel:
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() gibt ein ImageBitmap-Objekt zurück, einen Snapshot des Live-Videos,
die (z. B.) auf einem <canvas> und dann aufbereitet,
Farbwerte selektiv ändern. Beachten Sie, dass ImageBitmap nur den Wert
der Videoquelle. Diese ist in der Regel niedriger als die
Standbildfunktionen nutzen können. Beispiel:
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));
Funktionen und Einstellungen
Es gibt verschiedene Möglichkeiten, die Aufnahmeeinstellungen zu ändern,
ob die Änderungen in MediaStreamTrack übernommen würden oder nur
gesehen nach takePhoto(). Beispielsweise wird eine Änderung des zoom-Levels sofort wirksam.
wird an die MediaStreamTrack weitergegeben, während die Red-Augen-Reduzierung, sofern festgelegt,
wird nur beim Aufnehmen des Fotos angewendet.
„Live“ Kamerafunktionen und -einstellungen werden über die Vorschau
MediaStreamTrack: MediaStreamTrack.getCapabilities() gibt Folgendes zurück:
MediaTrackCapabilities
mit den konkreten unterstützten Funktionen und den Bereichen oder zulässigen
Werte, z.B. unterstützten Zoombereich oder zulässigen Weißabgleichmodi.
Entsprechend gibt MediaStreamTrack.getSettings() den Fehlerwert
MediaTrackSettings
mit den konkreten aktuellen Einstellungen. Zoom, Helligkeit und Taschenlampe gehören zu
dieser Kategorie, zum Beispiel:
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;
}
„Nicht live“ Kamerafunktionen und -einstellungen werden über die
ImageCapture-Objekt: ImageCapture.getPhotoCapabilities() gibt einen
PhotoCapabilities
Objekt, das Zugriff auf „Nicht live“ bietet Kamerafunktionen verfügbar.
Entsprechend gilt ab Chrome 61, ImageCapture.getPhotoSettings()
gibt Folgendes zurück:
PhotoSettings
mit den konkreten aktuellen Einstellungen. Die Fotoauflösung, rote Augen
Reduktion und Blitzmodus (außer Taschenlampe) gehören zu diesem Abschnitt, z. B.:
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));
Konfigurieren
„Live“ Kameraeinstellungen können über die Vorschau konfiguriert werden.
applyConstraints() von MediaStreamTrack
Einschränkungen
, zum Beispiel:
var zoomSlider = document.querySelector('input[type=range]');
mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
.catch(error => console.error('Uh, oh, applyConstraints() error:', error));
„Nicht live“ Kameraeinstellungen werden mit den optionalen Funktionen von takePhoto() konfiguriert.
PhotoSettings
Wörterbuch zum Beispiel:
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));
Kamerafunktionen
Wenn Sie den obigen Code ausführen, werden Sie einen Unterschied in den Dimensionen zwischen den
grabFrame()- und takePhoto()-Ergebnisse.
Die Methode takePhoto() gewährt Zugriff auf die maximale Auflösung der Kamera.
grabFrame() zieht einfach den nächsten verfügbaren VideoFrame in der MediaStreamTrack
innerhalb des Renderer-Prozesses, während takePhoto() die MediaStream unterbricht.
konfiguriert die Kamera neu, nimmt das Foto auf (normalerweise in einem komprimierten Format,
daher Blob) und setzt dann MediaStreamTrack fort. Im Wesentlichen bedeutet dies,
dass takePhoto() Zugriff auf die volle Auflösung des Standbilds bietet
Funktionen der Kamera. Bisher war es nur möglich, ein Foto aufzunehmen. von
Aufrufen von drawImage() für ein canvas-Element unter Verwendung eines Videos als Quelle (gemäß
hier ein Beispiel).
Weitere Informationen finden Sie im Abschnitt zu README.md.
In dieser Demo sind die Abmessungen <canvas> auf die Auflösung des Videos festgelegt.
während die natürliche Größe von <img> das maximale Standbild ist.
Auflösung der Kamera. CSS wird natürlich verwendet, um
die Größe von beidem.
Für Standbilder lassen sich alle verfügbaren Kameraauflösungen abrufen und einstellen.
unter Verwendung der MediaSettingsRange-Werte für PhotoCapabilities.imageHeight und
imageWidth Beachten Sie, dass die Beschränkungen für die minimale und maximale Breite und Höhe für
getUserMedia() beziehen sich auf Videos, die (wie besprochen) von den
Kamerafunktionen für Standbilder. Mit anderen Worten: Möglicherweise können Sie
Greife auf die volle Auflösungsfunktion deines Geräts zu, wenn du
getUserMedia() zu einem Canvas. Demo zur WebRTC-Auflösungseinschränkung
zeigt, wie Sie getUserMedia()-Beschränkungen für die Auflösung festlegen.
Sonst noch etwas?
Die Shape Detection API funktioniert gut mit Bilderfassung:
grabFrame()kann wiederholt aufgerufen werden, umImageBitmaps zuFaceDetectoroderBarcodeDetectorändern. Weitere Informationen zum Die API aus dem Blogpost von Paul Kinlan.Der Zugriff auf den Kamerablitz (Geräteleuchte) ist über
FillLightModeinPhotoCapabilities, aber den Taschenlampenmodus (dauerhaft eingeschalteter Blitz) finden Sie in derMediaTrackCapabilities
Demos und Codebeispiele
Support
- Chrome 59 für Android und Computer
- Chrome Canary-Version auf Android-Geräten und Desktop-Computern vor Version 59 mit Experimentelle Webplattformfunktionen aktiviert.