ImageCapture.takePhoto()

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.

Syntax

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

Parameters

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.

Example

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.classList.remove('hidden');
    img.src = URL.createObjectURL(blob);
  }).catch(function(error) {
    console.log('takePhoto() error: ', error);
  });
}

Specifications

Browser compatibility