ImageCapture: takePhoto() Methode

Die takePhoto()-Methode des ImageCapture-Interfaces macht eine Einzelaufnahme mithilfe des Videokameras, der eine MediaStreamTrack als Quelle verwendet. Sie 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 Blitzlichteinstellung des Aufnahmegeräts, eine der Optionen "auto", "off" oder "flash".

imageHeight

Die gewünschte Bildhöhe als Ganzzahl. Der Benutzeragent wählt den nächstliegenden Höhenwert zu dieser Einstellung, falls er nur diskrete Höhen unterstützt.

imageWidth

Die gewünschte Bildbreite als Ganzzahl. Der Benutzeragent wählt den nächstliegenden Breitenwert zu dieser Einstellung, falls er nur diskrete Breiten unterstützt.

redEyeReduction

Ein boolescher Wert, der angibt, ob die Rote-Augen-Reduktion verwendet werden soll, wenn sie verfügbar ist.

Rückgabewert

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

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn die readyState-Eigenschaft des in den Konstruktor übergebenen MediaStreamTrack nicht live ist.

UnknownError DOMException

Wird ausgelöst, wenn die Operation aus irgendeinem Grund nicht abgeschlossen werden kann.

Beispiele

Dieses Beispiel ist einem einfachen Bildaufnahme-Demo entnommen. Es zeigt, wie man das von takePhoto() zurückgegebene Promise verwendet, um den zurückgegebenen Blob in ein <img>-Element zu kopieren. Der Einfachheit halber zeigt es nicht, 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