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

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 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.

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