ImageCapture: grabFrame() Methode
Die grabFrame()-Methode des ImageCapture-Interfaces nimmt einen Schnappschuss des Live-Videos in einem MediaStreamTrack auf und gibt ein Promise zurück, das mit einem ImageBitmap aufgelöst wird, das den Schnappschuss enthält.
Syntax
grabFrame()
Parameter
Keine.
Rückgabewert
Ein Promise, das zu einem ImageBitmap-Objekt aufgelöst wird.
Ausnahmen
InvalidStateErrorDOMException-
Wird ausgelöst, wenn die
readyState-Eigenschaft desMediaStreamTrack, das im Konstruktor übergeben wird, nichtliveist. UnknownErrorDOMException-
Wird ausgelöst, wenn die Operation aus irgendeinem Grund nicht abgeschlossen werden kann.
Beispiele
Dieses Beispiel ist aus diesem einfachen Image Capture-Demo entnommen. Es zeigt, wie das von grabFrame() zurückgegebene Promise verwendet wird, um den zurückgegebenen Frame zu einem <canvas>-Element zu kopieren. Aus Einfachheitsgründen zeigt es nicht, wie das ImageCapture-Objekt instanziiert wird.
let grabFrameButton = document.querySelector("button#grabFrame");
let canvas = document.querySelector("canvas");
grabFrameButton.onclick = grabFrame;
function grabFrame() {
imageCapture
.grabFrame()
.then((imageBitmap) => {
console.log("Grabbed frame:", imageBitmap);
canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
canvas.getContext("2d").drawImage(imageBitmap, 0, 0);
canvas.classList.remove("hidden");
})
.catch((error) => {
console.error("grabFrame() error: ", error);
});
}
Spezifikationen
| Specification |
|---|
| MediaStream Image Capture # dom-imagecapture-grabframe |