ImageCapture: grabFrame() method

ThegrabFrame() method of theImageCapture interface takes a snapshot of the live video in aMediaStreamTrack and returns aPromise that resolves withanImageBitmap containing the snapshot.

Syntax

grabFrame()

Return value

APromise that resolves to anImageBitmap object.

Exceptions

InvalidStateErrorDOMException: Thrown ifreadyState property of theMediaStreamTrack passing in the constructor is notlive.
UnknownErrorDOMException: Thrown if the operation can't complete for any reason.

This example is extracted from thisSimple Image Capture demo. It shows how to use thePromise returned bygrabFrame() to copy the returned frame to a<canvas>element. For simplicity it does not show how to instantiate theImageCapture object.

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);    });}