ImageCapture: grabFrame() method
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The grabFrame()
method of the
ImageCapture
interface takes a snapshot of the live video in a
MediaStreamTrack
and returns a Promise
that resolves with
a ImageBitmap
containing the snapshot.
Syntax
grabFrame()
Parameters
None.
Return value
A Promise
that resolves to an ImageBitmap
object.
Exceptions
InvalidStateError
DOMException
-
Thrown if
readyState
property of theMediaStreamTrack
passing in the constructor is notlive
. UnknownError
DOMException
-
Thrown if the operation can't complete for any reason.
Examples
This example is extracted from this Simple Image Capture demo. It shows how to use the Promise
returned by
grabFrame()
to copy the returned frame to a <canvas>
element. For simplicity it does not show how to instantiate the
ImageCapture
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);
});
}
Specifications
Specification |
---|
MediaStream Image Capture # dom-imagecapture-grabframe |
Browser compatibility
BCD tables only load in the browser