-
Notifications
You must be signed in to change notification settings - Fork 22.5k
/
index.md
90 lines (69 loc) · 2.56 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
---
title: "ImageCapture: takePhoto() method"
short-title: takePhoto()
slug: Web/API/ImageCapture/takePhoto
page-type: web-api-instance-method
status:
- experimental
browser-compat: api.ImageCapture.takePhoto
---
{{APIRef("Image Capture API")}}{{SeeCompatTable}}
The **`takePhoto()`** method of the
{{domxref("ImageCapture")}} interface takes a single exposure using the video capture
device sourcing a {{domxref("MediaStreamTrack")}} and returns a {{jsxref("Promise")}}
that resolves with a {{domxref("Blob")}} containing the data.
## Syntax
```js-nolint
takePhoto()
takePhoto(photoSettings)
```
### Parameters
- `photoSettings` {{optional_inline}}
- : 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 {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}}.
### Exceptions
- `InvalidStateError` {{domxref("DOMException")}}
- : Thrown if `readyState` property of the `MediaStreamTrack` passing in the constructor is not `live`.
- `UnknownError` {{domxref("DOMException")}}
- : Thrown if the operation can't complete for any reason.
## Examples
This example is extracted from this [Simple Image Capture demo](https://simpl.info/imagecapture/). It shows how to use the {{jsxref("Promise")}} returned by
`takePhoto()` to copy the returned {{domxref("Blob")}} to an
{{htmlelement("img")}} element. For simplicity it does not show how to instantiate the
{{domxref("ImageCapture")}} object.
```js
let takePhotoButton = document.querySelector("button#takePhoto");
let canvas = document.querySelector("canvas");
takePhotoButton.onclick = takePhoto;
function takePhoto() {
imageCapture
.takePhoto()
.then((blob) => {
console.log("Took photo:", blob);
img.classList.remove("hidden");
img.src = URL.createObjectURL(blob);
})
.catch((error) => {
console.error("takePhoto() error: ", error);
});
}
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}