ImageCapture: grabFrame() Methode
Die grabFrame() Methode des ImageCapture Interface 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
readyStateEigenschaft desMediaStreamTrack, der im Konstruktor übergeben wird, nichtliveist. UnknownErrorDOMException-
Wird ausgelöst, wenn die Operation aus irgendeinem Grund nicht abgeschlossen werden kann.
Beispiele
Dieses Beispiel stammt aus diesem Einfachen Bildaufnahme-Demo. Es zeigt, wie man das von grabFrame() zurückgegebene Promise verwenden kann, um den zurückgegebenen Frame auf ein <canvas>-Element zu kopieren. Der Einfachheit halber wird nicht gezeigt, 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 |
Browser-Kompatibilität
Loading…