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
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
Ausnahmen
InvalidStateError
DOMException
-
Wird ausgelöst, wenn die
readyState
-Eigenschaft desMediaStreamTrack
, das im Konstruktor übergeben wird, nichtlive
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.
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