ImageCapture: grabFrame()-Methode

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

Die grabFrame()-Methode der ImageCapture-Schnittstelle 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

js
grabFrame()

Parameter

Keine.

Rückgabewert

Ein Promise, das zu einem ImageBitmap-Objekt aufgelöst wird.

Ausnahmen

InvalidStateError DOMException

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

UnknownError DOMException

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

Beispiele

Dieses Beispiel ist aus dieser Einfachen Bildaufnahme-Demo entnommen. Es zeigt, wie das von grabFrame() zurückgegebene Promise verwendet wird, um den zurückgegebenen Frame auf ein <canvas>-Element zu kopieren. Aus Gründen der Einfachheit wird nicht gezeigt, wie das ImageCapture-Objekt instanziiert wird.

js
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

BCD tables only load in the browser