The takePhoto() method of the ImageCapture interface takes a single exposure using the video capture device sourcing a MediaStreamTrack and returns a Promise that resolves with a Blob containing the data.


const blobPromise = imageCaptureObj.takePhoto()
const blobPromise = imageCaptureObj.takePhoto(photoSettings)


photoSettings Optional
An object that sets options for the photo to be taken. The available options are:
  • fillLightMode:  The flash setting of the capture device, one of "auto", "off", or "flash".
  • imageHeight: The desired image height as an integer. The user agent selects the closest height value to this setting if it only supports discrete heights.
  • imageWidth: The desired image width as an integer. The user agent selects the closest width value to this setting if it only supports discrete widths.
  • redEyeReduction: A boolean indicating whether the red-eye reduction should be used if it is available.

Return value

A Promise that resolves with a Blob.


This example is extracted from this Simple Image Capture demo. It shows how to use the Promise returned by takePhoto() to copy the returned Blob to an <img> element. For simplicity it does not show how to instantiate the ImageCapture object.

var takePhotoButton = document.querySelector('button#takePhoto');
var canvas = document.querySelector('canvas');

takePhotoButton.onclick = takePhoto;

function takePhoto() {
  imageCapture.takePhoto().then(function(blob) {
    console.log('Took photo:', blob);
    img.src = URL.createObjectURL(blob);
  }).catch(function(error) {
    console.log('takePhoto() error: ', error);


Specification Status Comment
MediaStream Image Capture
The definition of 'takePhoto()' in that specification.
Working Draft Initial definition.

Browser compatibility

BCD tables only load in the browser