ImageCapture.grabFrame()
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
const bitmapPromise = imageCapture.grabFrame()
Return value
A Promise
that resolves to an ImageBitmap
object.
Example
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.
var grabFrameButton = document.querySelector('button#grabFrame');
var canvas = document.querySelector('canvas');
grabFrameButton.onclick = grabFrame;
function grabFrame() {
imageCapture.grabFrame()
.then(function(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(function(error) {
console.log('grabFrame() error: ', error);
});
}
Specifications
Specification |
---|
MediaStream Image Capture # dom-imagecapture-grabframe |
Browser compatibility
BCD tables only load in the browser