ImageCapture.takePhoto()

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

var promise = ImageCapture.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 width 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 simplicy it does not show how to instantiate the image capture 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

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

Browser Compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 60
Full support 60
No support 59 — 60
Notes
Notes photoSettings argument not supported.
Edge ? Firefox ? IE ? Opera Full support 47
Full support 47
No support 46 — 47
Notes
Notes photoSettings argument not supported.
Safari ? WebView Android Full support 60
Full support 60
No support 59 — 60
Notes
Notes photoSettings argument not supported.
Chrome Android Full support 60
Full support 60
No support 59 — 60
Notes
Notes photoSettings argument not supported.
Edge Mobile ? Firefox Android ? Opera Android Full support 46Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

Document Tags and Contributors

Contributors to this page: fscholz, mlynch, jpmedley
Last updated by: fscholz,