ImageCapture: takePhoto()-Methode

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

Die takePhoto()-Methode der ImageCapture-Schnittstelle macht eine einzelne Aufnahme mit dem Videogerät, das eine MediaStreamTrack liefert, und gibt ein Promise zurück, das mit einem Blob aufgelöst wird, der die Daten enthält.

Syntax

js
takePhoto()
takePhoto(photoSettings)

Parameter

photoSettings Optional

Ein Objekt, das Optionen für das aufzunehmende Foto festlegt. Die verfügbaren Optionen sind:

fillLightMode

Die Blitzeinstellung des Aufnahmegeräts, eine von "auto", "off", oder "flash".

imageHeight

Die gewünschte Bildhöhe als Ganzzahl. Der Benutzer-Agent wählt den nächstgelegenen Höhenwert zu dieser Einstellung, wenn er nur diskrete Höhen unterstützt.

imageWidth

Die gewünschte Bildbreite als Ganzzahl. Der Benutzer-Agent wählt den nächstgelegenen Breitenwert zu dieser Einstellung, wenn er nur diskrete Breiten unterstützt.

redEyeReduction

Ein boolean, das angibt, ob die Rote-Augen-Reduktion verwendet werden soll, falls verfügbar.

Rückgabewert

Ein Promise, das mit einem Blob aufgelöst wird.

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn die readyState-Eigenschaft des MediaStreamTrack, das im Konstruktor übergeben wird, nicht live ist.

UnknownError DOMException

Wird ausgelöst, wenn der Vorgang aus irgendeinem Grund nicht abgeschlossen werden kann.

Beispiele

Dieses Beispiel stammt aus diesem Simple Image Capture Demo. Es zeigt, wie das von takePhoto() zurückgegebene Promise verwendet wird, um den zurückgegebenen Blob in ein <img>-Element zu kopieren. Aus Gründen der Einfachheit wird nicht gezeigt, wie das ImageCapture-Objekt instanziiert wird.

js
let takePhotoButton = document.querySelector("button#takePhoto");
let canvas = document.querySelector("canvas");

takePhotoButton.onclick = takePhoto;

function takePhoto() {
  imageCapture
    .takePhoto()
    .then((blob) => {
      console.log("Took photo:", blob);
      img.classList.remove("hidden");
      img.src = URL.createObjectURL(blob);
    })
    .catch((error) => {
      console.error("takePhoto() error: ", error);
    });
}

Spezifikationen

Specification
MediaStream Image Capture
# dom-imagecapture-takephoto

Browser-Kompatibilität

BCD tables only load in the browser