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
js
grabFrame()
Parameters
None.
Return value
A Promise
that resolves to an ImageBitmap
object.
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.
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);
});
}
Specifications
Specification |
---|
MediaStream Image Capture # dom-imagecapture-grabframe |
Browser compatibility
BCD tables only load in the browser