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 Capture The 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
takePhoto | Chrome
Full support
60
| Edge Full support ≤79 | Firefox ? | IE ? | Opera
Full support
47
| Safari ? | WebView Android
Full support
60
| Chrome Android
Full support
60
| Firefox Android ? | Opera Android
Full support
44
| Safari iOS ? | Samsung Internet Android
Full support
8.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.