Web/API/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([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 simplicy 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

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

Browser Compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
takePhoto Experimental'	Chrome Full support 60 Full support 60 No support 59 — 60 Notes' Notes' photoSettings argument not supported.	Edge Full support ≤79	Firefox ?	IE No support No	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.	Firefox Android ?	Opera Android Full support 44 Full support 44 No support 43 — 44 Notes' Notes' photoSettings argument not supported.	Safari iOS ?	Samsung Internet Android Full support 8.0 Full support 8.0 No support 7.0 — 8.0 Notes' Notes' photoSettings argument not supported.

Legend

Full support  

Full support

No support  

No 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.

ImageCapture.takePhoto() by Mozilla Contributors is licensed under CC-BY-SA 2.5.