Fotos aufnehmen und Kameraeinstellungen anpassen

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

Image Capture ist eine API zum Aufnehmen von Standbildern und Konfigurieren von Kameraeinstellungen. Diese API ist in Chrome 59 für Android und Desktop verfügbar. Außerdem haben wir eine ImageCapture-Polyfill-Bibliothek veröffentlicht.

Mit der API können Kamerafunktionen wie Zoom, Helligkeit, Kontrast, ISO und Weißabgleich gesteuert werden. Das Beste daran: Mit der Bildaufnahme können Sie auf die volle Auflösung jeder verfügbaren Gerätekamera oder Webcam zugreifen. Bisherige Methoden zum Aufnehmen von Fotos im Web haben Videomomentaufnahmen verwendet, die eine geringere Auflösung als die für Standbilder verfügbare Auflösung haben.

Ein ImageCapture-Objekt wird mit einem MediaStreamTrack als Quelle erstellt. Die API bietet dann zwei Erfassungsmethoden, takePhoto() und grabFrame(), sowie Möglichkeiten, die Funktionen und Einstellungen der Kamera abzurufen und diese Einstellungen zu ändern.

Baustelle

Die Image Capture API greift über ein MediaStreamTrack, das von getUserMedia() abgerufen wird, auf eine Kamera zu:

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

Sie können diesen Code in der Entwicklertools-Konsole ausprobieren.

Aufnehmen

Die Aufnahme kann auf zwei Arten erfolgen: als Vollbild und als Schnappschuss. takePhoto() gibt ein Blob zurück, das Ergebnis einer einzelnen fotografischen Belichtung, das heruntergeladen, vom Browser gespeichert oder in einem <img>-Element angezeigt werden kann. Bei dieser Methode wird die höchstmögliche Auflösung der Kamera 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, ein Snapshot von Live-Video, das (z. B.) auf einem <canvas gezeichnet und dann nachbearbeitet werden kann, um Farbwerte selektiv zu ändern. Das ImageBitmap hat nur die Auflösung der Videoquelle, die in der Regel niedriger ist als die Auflösung der Kamera für Standbilder. 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

Je nachdem, ob die Änderungen in MediaStreamTrack widergespiegelt werden oder erst nach takePhoto() sichtbar sind, gibt es verschiedene Möglichkeiten, die Aufnahmeeinstellungen zu ändern. Eine Änderung des zoom-Pegels wird beispielsweise sofort auf MediaStreamTrack übertragen, während die Rote-Augen-Korrektur, sofern aktiviert, erst beim Aufnehmen des Fotos angewendet wird.

„Live“-Kamerafunktionen und ‑einstellungen werden über die Vorschau manipuliert. MediaStreamTrack: MediaStreamTrack.getCapabilities() gibt ein MediaTrackCapabilities-Dictionary mit den konkreten unterstützten Funktionen und den Bereichen oder zulässigen Werten zurück, z. B. unterstützter Zoombereich oder zulässige Weißabgleichsmodi. Entsprechend gibt MediaStreamTrack.getSettings() ein MediaTrackSettings mit den konkreten aktuellen Einstellungen zurück. Zu dieser Kategorie gehören beispielsweise Zoom, Helligkeit und Taschenlampenmodus:

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 das ImageCapture-Objekt manipuliert: ImageCapture.getPhotoCapabilities() gibt ein PhotoCapabilities-Objekt zurück, das Zugriff auf die verfügbaren „Nicht-Live“-Kamerafunktionen bietet. Entsprechend gibt ImageCapture.getPhotoSettings() ab Chrome 61 ein PhotoSettings-Objekt mit den konkreten aktuellen Einstellungen zurück. Dazu gehören beispielsweise die Fotoauflösung, die Funktion zur Reduzierung roter Augen und der Blitzmodus (außer Taschenlampe):

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 VorschauMediaStreamTrackapplyConstraints()eingeschränkt werden, z. B.:

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

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

„Non-Live“-Kameraeinstellungen werden mit dem optionalen PhotoSettings-Wörterbuch von takePhoto() konfiguriert, z. B.:

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 bei den Dimensionen zwischen den Ergebnissen von grabFrame() und takePhoto() feststellen.

Die Methode takePhoto() bietet Zugriff auf die maximale Auflösung der Kamera.

grabFrame() nimmt einfach das nächste verfügbare VideoFrame im MediaStreamTrack im Renderer-Prozess auf, während takePhoto() den MediaStream unterbricht, die Kamera neu konfiguriert, das Foto aufnimmt (normalerweise in einem komprimierten Format, daher das Blob) und dann den MediaStreamTrack fortsetzt. Das bedeutet, dass takePhoto() Zugriff auf die volle Auflösung der Kamera für Standbilder hat. Bisher war es nur möglich, ein Foto aufzunehmen, indem drawImage() für ein canvas-Element aufgerufen wurde und ein Video als Quelle verwendet wurde (siehe Beispiel).

Weitere Informationen finden Sie im Abschnitt README.md.

In dieser Demo sind die <canvas>-Abmessungen auf die Auflösung des Videostreams festgelegt, während die natürliche Größe des <img> der maximalen Standbildauflösung der Kamera entspricht. CSS wird natürlich verwendet, um die Anzeigegröße beider Elemente festzulegen.

Die verfügbaren Kameraauflösungen für Standbilder können mit den MediaSettingsRange-Werten für PhotoCapabilities.imageHeight und imageWidth abgerufen und festgelegt werden. Die Mindest- und Höchstwerte für Breite und Höhe für getUserMedia() gelten für Videos, die sich (wie bereits erwähnt) von den Kamerafunktionen für Standbilder unterscheiden können. Das bedeutet, dass Sie möglicherweise nicht auf die volle Auflösung Ihres Geräts zugreifen können, wenn Sie Inhalte von getUserMedia() auf einer Arbeitsfläche speichern. In der WebRTC-Demoseite für Auflösungseinschränkungen wird gezeigt, wie getUserMedia()-Einschränkungen für die Auflösung festgelegt werden.

Sonst noch etwas?

Demos und Codebeispiele

Support

  • Chrome 59 für Android und Desktop-Computer
  • Chrome Canary auf Android und Desktop vor Version 59 mit aktivierten Funktionen der experimentellen Webplattform.

Weitere Informationen