MediaStream Image Capture API

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die MediaStream Image Capture API ist eine API zum Erfassen von Bildern oder Videos von einem fotografischen Gerät. Zusätzlich zur Erfassung von Daten ermöglicht sie auch das Abrufen von Informationen über die Geräteeigenschaften wie Bildgröße, Rote-Augen-Korrektur und ob es einen Blitz gibt und wie dieser derzeit eingestellt ist. Umgekehrt erlaubt die API, die Fähigkeiten innerhalb der vom Gerät erlaubten Grenzen zu konfigurieren.

MediaStream-Bilderfassungskonzepte und -verwendung

Der Prozess des Abrufens eines Bild- oder Videostreams erfolgt wie unten beschrieben. Der Beispielcode ist angepasst von Chrome's Image Capture examples.

Zuerst erhalten Sie eine Referenz zu einem Gerät, indem Sie MediaDevices.getUserMedia() aufrufen. Das folgende Beispiel sagt aus, dass jedes verfügbare Videogerät bereitgestellt werden soll, obwohl die Methode getUserMedia() erlaubt, spezifischere Fähigkeiten anzufordern. Diese Methode gibt ein Promise zurück, das mit einem MediaStream-Objekt aufgelöst wird.

js
navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  // Do something with the stream.
});

Als Nächstes isolieren Sie den visuellen Teil des Mediastreams. Dies geschieht durch Aufruf von MediaStream.getVideoTracks(). Dies gibt ein Array von MediaStreamTrack-Objekten zurück. Der untenstehende Code geht davon aus, dass das erste Element im MediaStreamTrack-Array das zu verwendende ist. Sie können die Eigenschaften der MediaStreamTrack-Objekte verwenden, um das benötigte auszuwählen.

js
const track = mediaStream.getVideoTracks()[0];

An diesem Punkt möchten Sie möglicherweise die Geräteeigenschaften einstellen, bevor Sie ein Bild erfassen. Das können Sie tun, indem Sie applyConstraints() auf dem Track-Objekt vornehmen, bevor Sie etwas anderes unternehmen.

js
let zoom = document.querySelector("#zoom");
const capabilities = track.getCapabilities();
// Check whether zoom is supported or not.
if (!capabilities.zoom) {
  return;
}
track.applyConstraints({ advanced: [{ zoom: zoom.value }] });

Schließlich übergeben Sie das MediaStreamTrack-Objekt an den ImageCapture()-Konstruktor. Obwohl ein MediaStream mehrere Arten von Tracks hält und verschiedene Methoden zum Abrufen dieser bietet, wird der ImageCapture-Konstruktor eine DOMException des Typs NotSupportedError auslösen, wenn MediaStreamTrack.kind nicht "video" ist.

js
let imageCapture = new ImageCapture(track);

Schnittstellen

ImageCapture Experimentell

Eine Schnittstelle zum Erfassen von Bildern von einem fotografischen Gerät, das durch einen gültigen MediaStreamTrack referenziert wird.

Spezifikationen

Specification
MediaStream Image Capture
# imagecaptureapi

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch