@capacitor/camera 8.1.0-test.250320251731 → 8.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CapacitorCamera.podspec +3 -2
- package/Package.swift +4 -2
- package/README.md +419 -67
- package/android/build.gradle +4 -4
- package/android/src/main/AndroidManifest.xml +6 -0
- package/android/src/main/java/com/capacitorjs/plugins/camera/CameraPlugin.kt +3 -2
- package/android/src/main/java/com/capacitorjs/plugins/camera/IonCameraFlow.kt +111 -70
- package/android/src/main/java/com/capacitorjs/plugins/camera/IonCameraSettings.kt +1 -2
- package/android/src/main/java/com/capacitorjs/plugins/camera/IonEditableMode.kt +16 -0
- package/android/src/main/java/com/capacitorjs/plugins/camera/IonGallerySettings.kt +1 -2
- package/dist/docs.json +18 -50
- package/dist/esm/definitions.d.ts +135 -38
- package/dist/esm/definitions.js +120 -0
- package/dist/esm/definitions.js.map +1 -1
- package/dist/esm/web.d.ts +13 -2
- package/dist/esm/web.js +280 -39
- package/dist/esm/web.js.map +1 -1
- package/dist/plugin.cjs.js +399 -38
- package/dist/plugin.cjs.js.map +1 -1
- package/dist/plugin.js +399 -38
- package/dist/plugin.js.map +1 -1
- package/ios/Sources/CameraPlugin/CameraPlugin.swift +193 -9
- package/package.json +10 -5
- package/android/libs/IONCameraLib-debug.aar +0 -0
- package/android/src/main/java/com/capacitorjs/plugins/camera/IonVideoSettings.kt +0 -7
package/README.md
CHANGED
|
@@ -42,7 +42,7 @@ Older devices and Android Go devices running Android 11 or 12 that support Googl
|
|
|
42
42
|
</service>
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
If that entry is not added,
|
|
45
|
+
If that entry is not added, on devices that don't support the Photo Picker, the Photo Picker component falls back to `Intent.ACTION_OPEN_DOCUMENT`.
|
|
46
46
|
|
|
47
47
|
The Camera plugin requires no permissions, unless using `saveToGallery: true`, in that case the following permissions should be added to your `AndroidManifest.xml`:
|
|
48
48
|
|
|
@@ -73,31 +73,351 @@ This plugin will use the following project variables (defined in your app's `var
|
|
|
73
73
|
|
|
74
74
|
## PWA Notes
|
|
75
75
|
|
|
76
|
-
[PWA Elements](https://capacitorjs.com/docs/web/pwa-elements)
|
|
76
|
+
On Web, `takePhoto` can use the [PWA Elements](https://capacitorjs.com/docs/web/pwa-elements) `pwa-camera-modal` custom element to provide a native-like camera UI. If the element is not registered, the plugin falls back to an `<input type="file">` picker. `chooseFromGallery` always uses `<input type="file">` on Web, regardless of whether PWA Elements are installed.
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
### Installing PWA Elements programmatically
|
|
79
|
+
|
|
80
|
+
See the [PWA Elements installation guide](https://capacitorjs.com/docs/web/pwa-elements#installation) for full instructions.
|
|
81
|
+
|
|
82
|
+
### Providing a custom camera element
|
|
83
|
+
|
|
84
|
+
Instead of using `@ionic/pwa-elements`, you can register your own `pwa-camera-modal` custom element. The plugin interacts with it using the following interface:
|
|
85
|
+
|
|
86
|
+
| Member | Type | Description |
|
|
87
|
+
|---|---|---|
|
|
88
|
+
| `facingMode` | `string` property | Set to `'user'` (front camera) or `'environment'` (rear camera) before presenting |
|
|
89
|
+
| `componentOnReady()` | method → `Promise<void>` | Called by the plugin after creating the element; resolve when the element is ready |
|
|
90
|
+
| `present()` | method | Called by the plugin to display the camera UI |
|
|
91
|
+
| `dismiss()` | method | Called by the plugin to close the camera UI after a photo is taken or cancelled |
|
|
92
|
+
| `onPhoto` | event | Dispatched when the user takes a photo or cancels. `event.detail` must be a `Blob` (photo taken), `null` (user cancelled), or an `Error` (something went wrong) |
|
|
93
|
+
|
|
94
|
+
```typescript
|
|
95
|
+
class MyCameraModal extends HTMLElement {
|
|
96
|
+
facingMode = 'environment';
|
|
97
|
+
|
|
98
|
+
componentOnReady() {
|
|
99
|
+
return Promise.resolve();
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
present() {
|
|
103
|
+
// Show your custom camera UI, then dispatch exactly one 'onPhoto' event when done:
|
|
104
|
+
// - Blob: user took a photo
|
|
105
|
+
// - null: user cancelled
|
|
106
|
+
// - Error: something went wrong
|
|
107
|
+
// Example:
|
|
108
|
+
this.dispatchEvent(new CustomEvent('onPhoto', { detail: photoBlob }));
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
dismiss() {
|
|
112
|
+
// Hide your custom camera UI (called by the plugin after receiving 'onPhoto')
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
customElements.define('pwa-camera-modal', MyCameraModal);
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Examples
|
|
120
|
+
|
|
121
|
+
### Taking a photo
|
|
79
122
|
|
|
80
123
|
```typescript
|
|
81
|
-
import { Camera
|
|
124
|
+
import { Camera } from '@capacitor/camera';
|
|
82
125
|
|
|
83
126
|
const takePicture = async () => {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
127
|
+
try {
|
|
128
|
+
const result = await Camera.takePhoto({
|
|
129
|
+
quality: 90,
|
|
130
|
+
includeMetadata: true,
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
// result.webPath can be set directly as the src of an image element
|
|
134
|
+
imageElement.src = result.webPath;
|
|
135
|
+
|
|
136
|
+
// On native: pass result.uri to the Filesystem API to get the full-resolution base64,
|
|
137
|
+
// or use result.thumbnail for a lower-resolution base64 preview.
|
|
138
|
+
// On Web: result.thumbnail contains the full image base64 encoded.
|
|
139
|
+
|
|
140
|
+
console.log('Format:', result.metadata?.format);
|
|
141
|
+
console.log('Resolution:', result.metadata?.resolution);
|
|
142
|
+
} catch (e) {
|
|
143
|
+
const error = e as any;
|
|
144
|
+
// error.code contains the structured error code (e.g. 'OS-PLUG-CAMR-0003')
|
|
145
|
+
// when thrown by the native layer. See the Errors section for all codes.
|
|
146
|
+
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
|
|
147
|
+
console.error('takePhoto failed:', message);
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### Choosing from the gallery
|
|
153
|
+
|
|
154
|
+
```typescript
|
|
155
|
+
import { Camera, MediaTypeSelection } from '@capacitor/camera';
|
|
156
|
+
|
|
157
|
+
const pickMedia = async () => {
|
|
158
|
+
try {
|
|
159
|
+
const { results } = await Camera.chooseFromGallery({
|
|
160
|
+
mediaType: MediaTypeSelection.All, // photos, videos, or both
|
|
161
|
+
allowMultipleSelection: true,
|
|
162
|
+
limit: 5,
|
|
163
|
+
includeMetadata: true,
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
for (const item of results) {
|
|
167
|
+
console.log('Type:', item.type); // MediaType.Photo or MediaType.Video
|
|
168
|
+
console.log('webPath:', item.webPath);
|
|
169
|
+
console.log('Format:', item.metadata?.format);
|
|
170
|
+
console.log('Size:', item.metadata?.size);
|
|
171
|
+
}
|
|
172
|
+
} catch (e) {
|
|
173
|
+
const error = e as any;
|
|
174
|
+
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
|
|
175
|
+
console.error('chooseFromGallery failed:', message);
|
|
176
|
+
}
|
|
177
|
+
};
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### Recording and playing a video
|
|
181
|
+
|
|
182
|
+
```typescript
|
|
183
|
+
import { Camera } from '@capacitor/camera';
|
|
184
|
+
|
|
185
|
+
const recordAndPlay = async () => {
|
|
186
|
+
let videoUri: string | undefined;
|
|
187
|
+
|
|
188
|
+
try {
|
|
189
|
+
const result = await Camera.recordVideo({
|
|
190
|
+
saveToGallery: false,
|
|
191
|
+
isPersistent: true, // keep the file available across app launches
|
|
192
|
+
includeMetadata: true,
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
videoUri = result.uri;
|
|
196
|
+
console.log('Duration:', result.metadata?.duration);
|
|
197
|
+
console.log('Saved to gallery:', result.saved);
|
|
198
|
+
} catch (e) {
|
|
199
|
+
const error = e as any;
|
|
200
|
+
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
|
|
201
|
+
console.error('recordVideo failed:', message);
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
if (videoUri) {
|
|
206
|
+
try {
|
|
207
|
+
await Camera.playVideo({ uri: videoUri });
|
|
208
|
+
} catch (e) {
|
|
209
|
+
const error = e as any;
|
|
210
|
+
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
|
|
211
|
+
console.error('playVideo failed:', message);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
98
214
|
};
|
|
99
215
|
```
|
|
100
216
|
|
|
217
|
+
### Editing a photo from a base64 string
|
|
218
|
+
|
|
219
|
+
`editPhoto` opens an in-app editor from a base64-encoded image and returns the edited image as a base64 string in `outputImage`.
|
|
220
|
+
|
|
221
|
+
```typescript
|
|
222
|
+
import { Camera } from '@capacitor/camera';
|
|
223
|
+
|
|
224
|
+
const editFromBase64 = async (base64Image: string) => {
|
|
225
|
+
try {
|
|
226
|
+
const { outputImage } = await Camera.editPhoto({
|
|
227
|
+
inputImage: base64Image, // raw base64, no data URL prefix
|
|
228
|
+
});
|
|
229
|
+
|
|
230
|
+
// outputImage is the edited image, base64 encoded
|
|
231
|
+
imageElement.src = `data:image/jpeg;base64,${outputImage}`;
|
|
232
|
+
} catch (e) {
|
|
233
|
+
const error = e as any;
|
|
234
|
+
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
|
|
235
|
+
console.error('editPhoto failed:', message);
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
### Editing a photo from a URI
|
|
241
|
+
|
|
242
|
+
`editURIPhoto` opens an in-app editor from a file URI (e.g. from `takePhoto` or the Filesystem API) and returns a `MediaResult`.
|
|
243
|
+
|
|
244
|
+
```typescript
|
|
245
|
+
import { Camera } from '@capacitor/camera';
|
|
246
|
+
|
|
247
|
+
const editFromURI = async (uri: string) => {
|
|
248
|
+
try {
|
|
249
|
+
const result = await Camera.editURIPhoto({
|
|
250
|
+
uri,
|
|
251
|
+
saveToGallery: false,
|
|
252
|
+
includeMetadata: true,
|
|
253
|
+
});
|
|
254
|
+
|
|
255
|
+
// result.webPath can be used directly as an image src
|
|
256
|
+
imageElement.src = result.webPath;
|
|
257
|
+
|
|
258
|
+
console.log('Format:', result.metadata?.format);
|
|
259
|
+
console.log('Size:', result.metadata?.size);
|
|
260
|
+
console.log('Saved to gallery:', result.saved);
|
|
261
|
+
} catch (e) {
|
|
262
|
+
const error = e as any;
|
|
263
|
+
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
|
|
264
|
+
console.error('editURIPhoto failed:', message);
|
|
265
|
+
}
|
|
266
|
+
};
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
## Migrating to the New API
|
|
270
|
+
|
|
271
|
+
Version 8.1.0 introduces a new improved API and deprecates `getPhoto` and `pickImages`.
|
|
272
|
+
|
|
273
|
+
### Replacing `getPhoto`
|
|
274
|
+
|
|
275
|
+
`getPhoto` handled three sources via `CameraSource`: `Camera`, `Photos`, and `Prompt`. `Camera` and `Photos` now map to different methods, while `Prompt` was removed.
|
|
276
|
+
|
|
277
|
+
#### `CameraSource.Camera` to `takePhoto`
|
|
278
|
+
|
|
279
|
+
`CameraResultType.Base64` and `CameraResultType.DataUrl` are not supported in the new API. See [Result type changes](#result-type-changes) for alternatives.
|
|
280
|
+
|
|
281
|
+
```typescript
|
|
282
|
+
// Before
|
|
283
|
+
const photo = await Camera.getPhoto({
|
|
284
|
+
source: CameraSource.Camera,
|
|
285
|
+
quality: 90,
|
|
286
|
+
allowEditing: true,
|
|
287
|
+
resultType: CameraResultType.Uri,
|
|
288
|
+
direction: CameraDirection.Rear,
|
|
289
|
+
width: 1280,
|
|
290
|
+
height: 720,
|
|
291
|
+
});
|
|
292
|
+
const imageUrl = photo.webPath;
|
|
293
|
+
|
|
294
|
+
// After
|
|
295
|
+
const result = await Camera.takePhoto({
|
|
296
|
+
quality: 90,
|
|
297
|
+
editable: 'in-app', // replaces allowEditing: true
|
|
298
|
+
cameraDirection: CameraDirection.Rear, // replaces direction
|
|
299
|
+
targetWidth: 1280, // replaces width (1)
|
|
300
|
+
targetHeight: 720, // replaces height (1)
|
|
301
|
+
});
|
|
302
|
+
const imageUrl = result.webPath;
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
**(1)** `width`/`height` each worked independently and set a maximum dimension while preserving aspect ratio. `targetWidth`/`targetHeight` must be used together — setting only one has no effect.
|
|
306
|
+
|
|
307
|
+
#### `CameraSource.Photos` to `chooseFromGallery`
|
|
308
|
+
|
|
309
|
+
```typescript
|
|
310
|
+
// Before
|
|
311
|
+
const photo = await Camera.getPhoto({
|
|
312
|
+
source: CameraSource.Photos,
|
|
313
|
+
quality: 90,
|
|
314
|
+
resultType: CameraResultType.Uri,
|
|
315
|
+
});
|
|
316
|
+
const imageUrl = photo.webPath;
|
|
317
|
+
|
|
318
|
+
// After
|
|
319
|
+
const { results } = await Camera.chooseFromGallery({
|
|
320
|
+
quality: 90,
|
|
321
|
+
});
|
|
322
|
+
const imageUrl = results[0].webPath;
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
#### `CameraSource.Prompt` (or default)
|
|
326
|
+
|
|
327
|
+
`getPhoto` previously displayed a native prompt letting the user choose between the camera and the gallery. This prompt is no longer part of the plugin. You should build the prompt using your own UI (for example, with `@capacitor/action-sheet`) and then call `takePhoto` or `chooseFromGallery` based on the user's selection.
|
|
328
|
+
|
|
329
|
+
```typescript
|
|
330
|
+
// Before
|
|
331
|
+
const photo = await Camera.getPhoto({
|
|
332
|
+
// source defaults to CameraSource.Prompt
|
|
333
|
+
quality: 90,
|
|
334
|
+
resultType: CameraResultType.Uri,
|
|
335
|
+
});
|
|
336
|
+
|
|
337
|
+
// After: show your own UI to determine the source, then call the appropriate method
|
|
338
|
+
const result = await Camera.takePhoto({ quality: 90 });
|
|
339
|
+
// or
|
|
340
|
+
const { results } = await Camera.chooseFromGallery({ quality: 90 });
|
|
341
|
+
```
|
|
342
|
+
|
|
343
|
+
#### Result type changes
|
|
344
|
+
|
|
345
|
+
`getPhoto` returned a `Photo` object where the fields available depended on `resultType`. The new API removes `resultType` entirely — `MediaResult` has a fixed set of fields regardless of how the photo was taken.
|
|
346
|
+
|
|
347
|
+
| `Photo` field | `MediaResult` equivalent |
|
|
348
|
+
|---|---|
|
|
349
|
+
| `path` | `uri` |
|
|
350
|
+
| `webPath` | `webPath` |
|
|
351
|
+
| `base64String` | `thumbnail` (on Web, contains the full image base64 encoded; on native, contains a thumbnail) |
|
|
352
|
+
| `dataUrl` | No direct equivalent — see note below |
|
|
353
|
+
| `saved` | `saved` |
|
|
354
|
+
| `format` | `metadata.format` (requires `includeMetadata: true`) |
|
|
355
|
+
| `exif` | `metadata.exif` (requires `includeMetadata: true`) |
|
|
356
|
+
|
|
357
|
+
**Constructing a data URL** — two options are available depending on your needs:
|
|
358
|
+
|
|
359
|
+
On all platforms, you can combine `thumbnail` and `metadata.format` (requires `includeMetadata: true`). On native, `thumbnail` is lower-resolution:
|
|
360
|
+
|
|
361
|
+
```typescript
|
|
362
|
+
const dataUrl = `data:image/${result.metadata.format};base64,${result.thumbnail}`;
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
On native, if you need the full-resolution base64, read `uri` via the Filesystem API and construct the data URL from there:
|
|
366
|
+
|
|
367
|
+
```typescript
|
|
368
|
+
import { Filesystem } from '@capacitor/filesystem';
|
|
369
|
+
|
|
370
|
+
const { data } = await Filesystem.readFile({ path: result.uri });
|
|
371
|
+
const dataUrl = `data:image/${result.metadata.format};base64,${data}`;
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
### Replacing `pickImages` → `chooseFromGallery`
|
|
375
|
+
|
|
376
|
+
`pickImages` allowed selecting multiple photos from the gallery. Pass `allowMultipleSelection: true` to `chooseFromGallery` to get the same behaviour.
|
|
377
|
+
|
|
378
|
+
```typescript
|
|
379
|
+
// Before
|
|
380
|
+
const { photos } = await Camera.pickImages({
|
|
381
|
+
quality: 90,
|
|
382
|
+
limit: 5,
|
|
383
|
+
width: 1280,
|
|
384
|
+
height: 720,
|
|
385
|
+
});
|
|
386
|
+
for (const photo of photos) {
|
|
387
|
+
console.log(photo.webPath);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
// After
|
|
391
|
+
const { results } = await Camera.chooseFromGallery({
|
|
392
|
+
allowMultipleSelection: true,
|
|
393
|
+
quality: 90,
|
|
394
|
+
limit: 5,
|
|
395
|
+
targetWidth: 1280, // replaces width (1)
|
|
396
|
+
targetHeight: 720, // replaces height (1)
|
|
397
|
+
});
|
|
398
|
+
for (const result of results) {
|
|
399
|
+
console.log(result.webPath);
|
|
400
|
+
}
|
|
401
|
+
```
|
|
402
|
+
|
|
403
|
+
**(1)** `width`/`height` each worked independently and set a maximum dimension while preserving aspect ratio. `targetWidth`/`targetHeight` must be used together — setting only one has no effect.
|
|
404
|
+
|
|
405
|
+
`chooseFromGallery` can also select videos or mixed media by setting `mediaType` to `MediaTypeSelection.Video` or `MediaTypeSelection.All`.
|
|
406
|
+
|
|
407
|
+
### Option rename summary
|
|
408
|
+
|
|
409
|
+
| Old option | New option | Applies to |
|
|
410
|
+
|---|---|---|
|
|
411
|
+
| `width` | `targetWidth` (1) | `takePhoto`, `chooseFromGallery` |
|
|
412
|
+
| `height` | `targetHeight` (1) | `takePhoto`, `chooseFromGallery` |
|
|
413
|
+
| `direction` | `cameraDirection` | `takePhoto` |
|
|
414
|
+
| `allowEditing` | `editable: 'in-app'` | `takePhoto`, `chooseFromGallery` |
|
|
415
|
+
| `resultType` | — (removed, see [Result type changes](#result-type-changes)) | — |
|
|
416
|
+
| `source` | — (removed, use separate methods) | — |
|
|
417
|
+
| `promptLabel*` | — (removed, build your own UI) | — |
|
|
418
|
+
|
|
419
|
+
**(1)** `width`/`height` each worked independently and set a maximum dimension while preserving aspect ratio. `targetWidth`/`targetHeight` must be used together — setting only one has no effect.
|
|
420
|
+
|
|
101
421
|
## API
|
|
102
422
|
|
|
103
423
|
<docgen-index>
|
|
@@ -120,6 +440,8 @@ const takePicture = async () => {
|
|
|
120
440
|
|
|
121
441
|
</docgen-index>
|
|
122
442
|
|
|
443
|
+
For a list of existing error codes, see [Errors](#errors).
|
|
444
|
+
|
|
123
445
|
<docgen-api>
|
|
124
446
|
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->
|
|
125
447
|
|
|
@@ -349,44 +671,43 @@ Allows the user to pick multiple pictures from the photo gallery.
|
|
|
349
671
|
|
|
350
672
|
#### MediaResult
|
|
351
673
|
|
|
352
|
-
| Prop | Type | Description
|
|
353
|
-
| --------------- | ------------------------------------------------------- |
|
|
354
|
-
| **`type`** | <code><a href="#mediatype">MediaType</a></code> | The type of media result. Either <a href="#photo">`Photo`</a> or `Video`.
|
|
355
|
-
| **`uri`** | <code>string</code> | The URI pointing to the media file. Not available on Web. Use `webPath` instead for Web.
|
|
356
|
-
| **`thumbnail`** | <code>string</code> | Returns the thumbnail of the media, base64 encoded. On Web, for <a href="#mediatype">`MediaType.Photo`</a>, the full image is returned here, also base64 encoded.
|
|
357
|
-
| **`saved`** | <code>boolean</code> | Whether if the media was saved to the gallery successfully or not. Only applicable if `saveToGallery` was set to `true` in input options. Otherwise, `false` is always returned for `save`. Not available on Web.
|
|
358
|
-
| **`webPath`** | <code>string</code> | webPath returns a path that can be used to set the src attribute of a media item for efficient loading and rendering.
|
|
359
|
-
| **`metadata`** | <code><a href="#mediametadata">MediaMetadata</a></code> | Metadata associated to the media result. Only included if `includeMetadata` was set to `true` in input options.
|
|
674
|
+
| Prop | Type | Description | Since |
|
|
675
|
+
| --------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
|
|
676
|
+
| **`type`** | <code><a href="#mediatype">MediaType</a></code> | The type of media result. Either <a href="#photo">`Photo`</a> or `Video`. | 8.1.0 |
|
|
677
|
+
| **`uri`** | <code>string</code> | The URI pointing to the media file. Not available on Web. Use `webPath` instead for Web. | 8.1.0 |
|
|
678
|
+
| **`thumbnail`** | <code>string</code> | Returns the thumbnail of the media, base64 encoded. On Web, for <a href="#mediatype">`MediaType.Photo`</a>, the full image is returned here, also base64 encoded. On Web, for <a href="#mediatype">`MediaType.Video`</a>, a full-resolution JPEG frame captured from the video is returned, base64 encoded at 80% quality. | 8.1.0 |
|
|
679
|
+
| **`saved`** | <code>boolean</code> | Whether if the media was saved to the gallery successfully or not. Only applicable if `saveToGallery` was set to `true` in input options. Otherwise, `false` is always returned for `save`. Not available on Web. | 8.1.0 |
|
|
680
|
+
| **`webPath`** | <code>string</code> | webPath returns a path that can be used to set the src attribute of a media item for efficient loading and rendering. | 8.1.0 |
|
|
681
|
+
| **`metadata`** | <code><a href="#mediametadata">MediaMetadata</a></code> | Metadata associated to the media result. Only included if `includeMetadata` was set to `true` in input options. | 8.1.0 |
|
|
360
682
|
|
|
361
683
|
|
|
362
684
|
#### MediaMetadata
|
|
363
685
|
|
|
364
|
-
| Prop | Type | Description
|
|
365
|
-
| ------------------ | ------------------- |
|
|
366
|
-
| **`size`** | <code>number</code> | File size of the media, in bytes
|
|
367
|
-
| **`duration`** | <code>number</code> | Only applicable for <a href="#mediatype">`MediaType.Video`</a> - the duration of the media, in seconds.
|
|
368
|
-
| **`format`** | <code>string</code> | The format of the image, ex: jpeg, png, mp4. Web supports jpeg, png and gif, but the exact availability may vary depending on the browser. gif is only supported for `chooseFromGallery
|
|
369
|
-
| **`resolution`** | <code>string</code> | The resolution of the media, in `<width>x<height>` format. Example: '1920x1080'.
|
|
370
|
-
| **`creationDate`** | <code>string</code> | The date and time the media was created, in ISO 8601 format. If creation date is not available (e.g. Android 7 and below), the last modified date is returned.
|
|
371
|
-
| **`exif`** | <code>string</code> | Exif data, if any,
|
|
686
|
+
| Prop | Type | Description | Since |
|
|
687
|
+
| ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
|
|
688
|
+
| **`size`** | <code>number</code> | File size of the media, in bytes. | 8.1.0 |
|
|
689
|
+
| **`duration`** | <code>number</code> | Only applicable for <a href="#mediatype">`MediaType.Video`</a> - the duration of the media, in seconds. | 8.1.0 |
|
|
690
|
+
| **`format`** | <code>string</code> | The format of the image, ex: jpeg, png, mp4. Android and iOS may return 'jpg' instead of 'jpeg'. The format is the same, just with a different name. Please compare against both 'jpeg' and 'jpg' when checking if the format of the returned media is JPEG. Web supports jpeg, png and gif, but the exact availability may vary depending on the browser. gif is only supported for `chooseFromGallery` on Web. | 8.1.0 |
|
|
691
|
+
| **`resolution`** | <code>string</code> | The resolution of the media, in `<width>x<height>` format. Example: '1920x1080'. | 8.1.0 |
|
|
692
|
+
| **`creationDate`** | <code>string</code> | The date and time the media was created, in ISO 8601 format. If creation date is not available (e.g. Android 7 and below), the last modified date is returned. For Web, the last modified date is always returned. | 8.1.0 |
|
|
693
|
+
| **`exif`** | <code>string</code> | Exif data, if any, retrieved from the media item. Only available for <a href="#mediatype">`MediaType.Photo`</a>. Not available on Web. | 8.1.0 |
|
|
372
694
|
|
|
373
695
|
|
|
374
696
|
#### TakePhotoOptions
|
|
375
697
|
|
|
376
|
-
| Prop | Type | Description
|
|
377
|
-
| ------------------------ | ----------------------------------------------------------- |
|
|
378
|
-
| **`quality`** | <code>number</code> | The quality of image to return, from 0-100. Only applicable for <a href="#encodingtype">`EncodingType.JPEG`</a>. Note: This option is only supported on Android and iOS.
|
|
379
|
-
| **`targetWidth`** | <code>number</code> | The target width of photos to apply. Must be a positive number, and used along `targetHeight`. Note: This option is only supported on Android and iOS.
|
|
380
|
-
| **`targetHeight`** | <code>number</code> | The target width of photos to apply. Must be a positive number, and used along `targetWidth`. Note: This option is only supported on Android and iOS.
|
|
381
|
-
| **`correctOrientation`** | <code>boolean</code> | Whether to automatically rotate the image "up" to correct for orientation in portrait mode. Note: This option is only supported on Android and iOS
|
|
382
|
-
| **`encodingType`** | <code><a href="#encodingtype">EncodingType</a></code> | The encoding type for the captured photo - JPEG or PNG. Note: This option is only supported on Android and iOS.
|
|
383
|
-
| **`saveToGallery`** | <code>boolean</code> | Whether to save the photo to the gallery. Note: This option is only supported on Android and iOS.
|
|
384
|
-
| **`cameraDirection`** | <code><a href="#cameradirection">CameraDirection</a></code> | iOS and Web only: The camera direction.
|
|
385
|
-
| **`
|
|
386
|
-
| **`
|
|
387
|
-
| **`
|
|
388
|
-
| **`
|
|
389
|
-
| **`includeMetadata`** | <code>boolean</code> | Whether or not <a href="#mediaresult">MediaResult</a> should include its metadata. If an error occurs when obtaining the metadata, it will return empty. Note: This option is only supported on Android and iOS. | <code>false</code> | 8.1.0 |
|
|
698
|
+
| Prop | Type | Description | Default | Since |
|
|
699
|
+
| ------------------------ | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----- |
|
|
700
|
+
| **`quality`** | <code>number</code> | The quality of image to return, from 0-100. Only applicable for <a href="#encodingtype">`EncodingType.JPEG`</a>. Note: This option is only supported on Android and iOS. | <code>100</code> | 8.1.0 |
|
|
701
|
+
| **`targetWidth`** | <code>number</code> | The target width of photos to apply. Must be a positive number, and used along `targetHeight`. Note: This option is only supported on Android and iOS. | | 8.1.0 |
|
|
702
|
+
| **`targetHeight`** | <code>number</code> | The target width of photos to apply. Must be a positive number, and used along `targetWidth`. Note: This option is only supported on Android and iOS. | | 8.1.0 |
|
|
703
|
+
| **`correctOrientation`** | <code>boolean</code> | Whether to automatically rotate the image "up" to correct for orientation in portrait mode. Note: This option is only supported on Android and iOS | <code>true</code> | 8.1.0 |
|
|
704
|
+
| **`encodingType`** | <code><a href="#encodingtype">EncodingType</a></code> | The encoding type for the captured photo - JPEG or PNG. Note: This option is only supported on Android and iOS. | <code>EncodingType.JPEG</code> | 8.1.0 |
|
|
705
|
+
| **`saveToGallery`** | <code>boolean</code> | Whether to save the photo to the gallery. Note: This option is only supported on Android and iOS. | <code>false</code> | 8.1.0 |
|
|
706
|
+
| **`cameraDirection`** | <code><a href="#cameradirection">CameraDirection</a></code> | iOS and Web only: The camera direction. | <code>CameraDirection.Rear</code> | 8.1.0 |
|
|
707
|
+
| **`editable`** | <code>'in-app' \| 'external' \| 'no'</code> | Determines if and how the user can edit the photo. - 'in-app': Use an in-app editor for photo edition. - 'external': Open a separate (platform-specific) native app to handle photo edition, falling back to the in-app editor if none is available. Note: iOS does not support external editing and will use 'in-app' instead. - 'no': No editing allowed. Not available on Web. | <code>'no'</code> | 8.1.0 |
|
|
708
|
+
| **`presentationStyle`** | <code>'fullscreen' \| 'popover'</code> | iOS only: The presentation style of the Camera. | <code>'fullscreen'</code> | 8.1.0 |
|
|
709
|
+
| **`webUseInput`** | <code>boolean</code> | Web only: Whether to use the PWA Element experience or file input. The default is to use PWA Elements if installed and fall back to file input. To always use file input, set this to `true`. Learn more about PWA Elements: https://capacitorjs.com/docs/web/pwa-elements | | 8.1.0 |
|
|
710
|
+
| **`includeMetadata`** | <code>boolean</code> | Whether or not <a href="#mediaresult">MediaResult</a> should include its metadata. If an error occurs when obtaining the metadata, it will return empty. | <code>false</code> | 8.1.0 |
|
|
390
711
|
|
|
391
712
|
|
|
392
713
|
#### RecordVideoOptions
|
|
@@ -414,20 +735,19 @@ Allows the user to pick multiple pictures from the photo gallery.
|
|
|
414
735
|
|
|
415
736
|
#### ChooseFromGalleryOptions
|
|
416
737
|
|
|
417
|
-
| Prop | Type | Description
|
|
418
|
-
| ---------------------------- | ----------------------------------------------------------------- |
|
|
419
|
-
| **`mediaType`** | <code><a href="#mediatypeselection">MediaTypeSelection</a></code> | The type of media to select. Can be pictures, videos, or both.
|
|
420
|
-
| **`allowMultipleSelection`** | <code>boolean</code> | Whether or not to allow selecting multiple media files from the gallery.
|
|
421
|
-
| **`limit`** | <code>number</code> | The maximum number of media files that the user can choose. Only applicable if `allowMultipleSelection` is `true`. Any non-positive number will be treated as unlimited. Note: This option is only supported on Android 13+ and iOS.
|
|
422
|
-
| **`includeMetadata`** | <code>boolean</code> | Whether or not <a href="#mediaresult">MediaResult</a> should include its metadata. If an error occurs when obtaining the metadata, it will return empty.
|
|
423
|
-
| **`
|
|
424
|
-
| **`
|
|
425
|
-
| **`
|
|
426
|
-
| **`
|
|
427
|
-
| **`
|
|
428
|
-
| **`
|
|
429
|
-
| **`
|
|
430
|
-
| **`webUseInput`** | <code>boolean</code> | Web only: Whether to use the PWA Element experience or file input. The default is to use PWA Elements if installed and fall back to file input. To always use file input, set this to `true`. Learn more about PWA Elements: https://capacitorjs.com/docs/web/pwa-elements | | 8.1.0 |
|
|
738
|
+
| Prop | Type | Description | Default | Since |
|
|
739
|
+
| ---------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----- |
|
|
740
|
+
| **`mediaType`** | <code><a href="#mediatypeselection">MediaTypeSelection</a></code> | The type of media to select. Can be pictures, videos, or both. | <code>MediaTypeSelection.Photo</code> | 8.1.0 |
|
|
741
|
+
| **`allowMultipleSelection`** | <code>boolean</code> | Whether or not to allow selecting multiple media files from the gallery. | <code>false</code> | 8.1.0 |
|
|
742
|
+
| **`limit`** | <code>number</code> | The maximum number of media files that the user can choose. Only applicable if `allowMultipleSelection` is `true`. Any non-positive number will be treated as unlimited. Note: This option is only supported on Android 13+ and iOS. | <code>0</code> | 8.1.0 |
|
|
743
|
+
| **`includeMetadata`** | <code>boolean</code> | Whether or not <a href="#mediaresult">MediaResult</a> should include its metadata. If an error occurs when obtaining the metadata, it will return empty. | <code>false</code> | 8.1.0 |
|
|
744
|
+
| **`editable`** | <code>'in-app' \| 'external' \| 'no'</code> | Determines if and how the user can edit the photo. - 'in-app': Use an in-app editor for photo edition. - 'external': Open a separate (platform-specific) native app to handle photo edition, falling back to the in-app editor if none is available. Note: iOS does not support external editing and will use 'in-app' instead. - 'no': No editing allowed. Only applicable for <a href="#mediatypeselection">`MediaTypeSelection.Photo`</a> and `allowMultipleSelection` set to `false`. Not available on Web. | <code>'no'</code> | 8.1.0 |
|
|
745
|
+
| **`presentationStyle`** | <code>'fullscreen' \| 'popover'</code> | iOS only: The presentation style of media picker. | <code>'fullscreen'</code> | 8.1.0 |
|
|
746
|
+
| **`quality`** | <code>number</code> | The quality of images to return, from 0-100. Only applicable for <a href="#mediatype">`MediaType.Photo`</a> and JPEG format. Note: This option is only supported on Android and iOS. | <code>100</code> | 8.1.0 |
|
|
747
|
+
| **`targetWidth`** | <code>number</code> | The target width of photos to apply. Must be a positive number, and used along `targetHeight`. Not applicable when videos are selected. Note: This option is only supported on Android and iOS. | | 1.0.0 |
|
|
748
|
+
| **`targetHeight`** | <code>number</code> | The target width of photos to apply. Must be a positive number, and used along `targetWidth`. Not applicable when videos are selected. Note: This option is only supported on Android and iOS. | | 8.1.0 |
|
|
749
|
+
| **`correctOrientation`** | <code>boolean</code> | Whether to automatically rotate the image "up" to correct for orientation in portrait mode. Not applicable when videos are selected. Note: This option is only supported on Android and iOS | <code>true</code> | 8.1.0 |
|
|
750
|
+
| **`webUseInput`** | <code>boolean</code> | Web only: Whether to use the PWA Element experience or file input. The default is to use PWA Elements if installed and fall back to file input. To always use file input, set this to `true`. Learn more about PWA Elements: https://capacitorjs.com/docs/web/pwa-elements | | 8.1.0 |
|
|
431
751
|
|
|
432
752
|
|
|
433
753
|
#### EditPhotoResult
|
|
@@ -446,11 +766,11 @@ Allows the user to pick multiple pictures from the photo gallery.
|
|
|
446
766
|
|
|
447
767
|
#### EditURIPhotoOptions
|
|
448
768
|
|
|
449
|
-
| Prop | Type | Description
|
|
450
|
-
| --------------------- | -------------------- |
|
|
451
|
-
| **`uri`** | <code>string</code> | The URI that contains the photo to edit.
|
|
452
|
-
| **`saveToGallery`** | <code>boolean</code> | Whether to save the edited photo to the gallery.
|
|
453
|
-
| **`includeMetadata`** | <code>boolean</code> | Whether or not <a href="#mediaresult">MediaResult</a> should include its metadata. If an error occurs when obtaining the metadata, it will return empty.
|
|
769
|
+
| Prop | Type | Description | Default | Since |
|
|
770
|
+
| --------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----- |
|
|
771
|
+
| **`uri`** | <code>string</code> | The URI that contains the photo to edit. | | 8.1.0 |
|
|
772
|
+
| **`saveToGallery`** | <code>boolean</code> | Whether to save the edited photo to the gallery. | <code>false</code> | 8.1.0 |
|
|
773
|
+
| **`includeMetadata`** | <code>boolean</code> | Whether or not <a href="#mediaresult">MediaResult</a> should include its metadata. If an error occurs when obtaining the metadata, it will return empty. | <code>false</code> | 8.1.0 |
|
|
454
774
|
|
|
455
775
|
|
|
456
776
|
#### GalleryPhotos
|
|
@@ -603,3 +923,35 @@ Allows the user to pick multiple pictures from the photo gallery.
|
|
|
603
923
|
| **`Photos`** | <code>'PHOTOS'</code> | Pick an existing photo from the gallery or photo album. |
|
|
604
924
|
|
|
605
925
|
</docgen-api>
|
|
926
|
+
|
|
927
|
+
### Errors
|
|
928
|
+
|
|
929
|
+
The plugin returns structured errors on Android and iOS. Each error has a `code` (e.g. `OS-PLUG-CAMR-0003`) and a `message` with a human-readable description. Note that these are only available for native platforms starting on the new APIs introduced in version `8.1.0`: `takePhoto`, `chooseFromGallery`, `editPhoto`, `editURIPhoto`, `recordVideo`, and `playVideo`.
|
|
930
|
+
|
|
931
|
+
| Error code | Platform(s) | Description |
|
|
932
|
+
|---|---|---|
|
|
933
|
+
| OS-PLUG-CAMR-0003 | Android, iOS | Couldn't access camera. Check your camera permissions and try again. |
|
|
934
|
+
| OS-PLUG-CAMR-0005 | Android, iOS | Couldn't access your photo gallery because access wasn't provided. |
|
|
935
|
+
| OS-PLUG-CAMR-0006 | Android, iOS | Couldn't take photo because the process was canceled. |
|
|
936
|
+
| OS-PLUG-CAMR-0007 | Android, iOS | No camera available. |
|
|
937
|
+
| OS-PLUG-CAMR-0008 | iOS | The selected file contains data that isn't valid. |
|
|
938
|
+
| OS-PLUG-CAMR-0009 | Android, iOS | Couldn't edit image. |
|
|
939
|
+
| OS-PLUG-CAMR-0010 | Android, iOS | Couldn't take photo. |
|
|
940
|
+
| OS-PLUG-CAMR-0011 | iOS | Couldn't get image from the gallery. |
|
|
941
|
+
| OS-PLUG-CAMR-0012 | Android, iOS | Couldn't process image. |
|
|
942
|
+
| OS-PLUG-CAMR-0013 | Android, iOS | Couldn't edit photo because the process was canceled. |
|
|
943
|
+
| OS-PLUG-CAMR-0014 | iOS | Couldn't decode the 'Take Photo' action parameters. |
|
|
944
|
+
| OS-PLUG-CAMR-0016 | Android, iOS | Couldn't record video. |
|
|
945
|
+
| OS-PLUG-CAMR-0017 | Android, iOS | Couldn't record video because the process was canceled. |
|
|
946
|
+
| OS-PLUG-CAMR-0018 | Android, iOS | Couldn't choose media from the gallery. |
|
|
947
|
+
| OS-PLUG-CAMR-0019 | iOS | Couldn't encode the media result. |
|
|
948
|
+
| OS-PLUG-CAMR-0020 | Android, iOS | Couldn't choose media from the gallery because the process was canceled. |
|
|
949
|
+
| OS-PLUG-CAMR-0021 | Android | Couldn't get media file path. |
|
|
950
|
+
| OS-PLUG-CAMR-0023 | Android, iOS | Couldn't play video. |
|
|
951
|
+
| OS-PLUG-CAMR-0024 | Android | URI parameter cannot be empty. |
|
|
952
|
+
| OS-PLUG-CAMR-0025 | iOS | Couldn't get video from the gallery. |
|
|
953
|
+
| OS-PLUG-CAMR-0026 | iOS | There's an issue with the plugin. |
|
|
954
|
+
| OS-PLUG-CAMR-0027 | Android, iOS | The selected file doesn't exist. |
|
|
955
|
+
| OS-PLUG-CAMR-0028 | Android, iOS | Couldn't retrieve image from the URI. |
|
|
956
|
+
| OS-PLUG-CAMR-0031 | Android | Invalid argument provided to plugin method. |
|
|
957
|
+
| OS-PLUG-CAMR-0033 | Android | Unable to get the context. |
|