0
# Camera & Media Capture
1

2
Comprehensive camera functionality, media capture, and photo/video management with full configuration options for mobile applications.
3

4
## Capabilities
5

6
### Camera Operations
7

8
Take pictures and access photo library with extensive configuration options for quality, source, and format.
9

10
```typescript { .api }
11
/**
12
 * Camera options interface for configuring picture capture
13
 */
14
interface CameraOptions {
15
  /** Picture quality in range 0-100. Default is 50 */
16
  quality?: number;
17
  /** 
18
   * Choose the format of the return value
19
   * DATA_URL: 0 - Return image as base64-encoded string
20
   * FILE_URI: 1 - Return image file URI (default)
21
   * NATIVE_URI: 2 - Return image native URI
22
   */
23
  destinationType?: number;
24
  /**
25
   * Set the source of the picture
26
   * PHOTOLIBRARY: 0 - Choose from photo library
27
   * CAMERA: 1 - Take picture from camera (default)
28
   * SAVEDPHOTOALBUM: 2 - Choose from saved photo album
29
   */
30
  sourceType?: number;
31
  /** Allow simple editing of image before selection */
32
  allowEdit?: boolean;
33
  /**
34
   * Choose the returned image file's encoding
35
   * JPEG: 0 - Return JPEG encoded image (default)
36
   * PNG: 1 - Return PNG encoded image
37
   */
38
  encodingType?: number;
39
  /** Width in pixels to scale image. Must be used with targetHeight */
40
  targetWidth?: number;
41
  /** Height in pixels to scale image. Must be used with targetWidth */
42
  targetHeight?: number;
43
  /**
44
   * Set the type of media to select from
45
   * PICTURE: 0 - Allow selection of still pictures only (default)
46
   * VIDEO: 1 - Allow selection of video only, always returns FILE_URI
47
   * ALLMEDIA: 2 - Allow selection from all media types
48
   */
49
  mediaType?: number;
50
  /** Rotate the image to correct for the orientation of the device */
51
  correctOrientation?: boolean;
52
  /** Save the image to the photo album on the device after capture */
53
  saveToPhotoAlbum?: boolean;
54
  /**
55
   * Choose the camera to use
56
   * BACK: 0 - Use the back-facing camera (default)
57
   * FRONT: 1 - Use the front-facing camera
58
   */
59
  cameraDirection?: number;
60
  /** iOS-only options that specify popover location in iPad */
61
  popoverOptions?: CameraPopoverOptions;
62
}
63

64
/**
65
 * iOS-only parameters for iPad popover when selecting images
66
 */
67
interface CameraPopoverOptions {
68
  x: number;
69
  y: number;
70
  width: number;
71
  height: number;
72
  /**
73
   * Direction the arrow on the popover should point
74
   * ARROW_UP: 1, ARROW_DOWN: 2, ARROW_LEFT: 4, ARROW_RIGHT: 8, ARROW_ANY: 15
75
   */
76
  arrowDir: number;
77
}
78

79
/**
80
 * Camera class providing static methods for picture capture
81
 */
82
class Camera {
83
  /** Return format constants */
84
  static DestinationType: {
85
    /** Return base64 encoded string (memory intensive) */
86
    DATA_URL: 0;
87
    /** Return file uri (content://media/external/images/media/2 for Android) */
88
    FILE_URI: 1;
89
    /** Return native uri (asset-library:// for iOS) */
90
    NATIVE_URI: 2;
91
  };
92
  
93
  /** Encoding type constants */
94
  static EncodingType: {
95
    /** Return JPEG encoded image */
96
    JPEG: 0;
97
    /** Return PNG encoded image */
98
    PNG: 1;
99
  };
100
  
101
  /** Media type constants */
102
  static MediaType: {
103
    /** Allow selection of still pictures only */
104
    PICTURE: 0;
105
    /** Allow selection of video only */
106
    VIDEO: 1;
107
    /** Allow selection from all media types */
108
    ALLMEDIA: 2;
109
  };
110
  
111
  /** Picture source constants */
112
  static PictureSourceType: {
113
    /** Choose image from picture library */
114
    PHOTOLIBRARY: 0;
115
    /** Take picture from camera */
116
    CAMERA: 1;
117
    /** Choose image from saved photo album */
118
    SAVEDPHOTOALBUM: 2;
119
  };
120
  
121
  /** Camera direction constants */
122
  static Direction: {
123
    /** Use the back-facing camera */
124
    BACK: 0;
125
    /** Use the front-facing camera */
126
    FRONT: 1;
127
  };
128
  
129
  /** Popover arrow direction constants (iOS) */
130
  static PopoverArrowDirection: {
131
    ARROW_UP: 1;
132
    ARROW_DOWN: 2;
133
    ARROW_LEFT: 4;
134
    ARROW_RIGHT: 8;
135
    ARROW_ANY: 15;
136
  };
137

138
  /**
139
   * Take a picture or video, or load one from the library
140
   * @param options Optional camera configuration options
141
   * @returns Promise resolving to Base64 encoding or image file URI
142
   */
143
  static getPicture(options?: CameraOptions): Promise<any>;
144

145
  /**
146
   * Remove intermediate image files from temporary storage (iOS only)
147
   * Only applies when sourceType equals CAMERA and destinationType equals FILE_URI
148
   * @returns Promise indicating cleanup completion
149
   */
150
  static cleanup(): Promise<any>;
151
}
152
```
153

154
**Usage Examples:**
155

156
```typescript
157
import { Camera, CameraOptions } from 'ionic-native';
158

159
// Basic camera usage
160
const basicOptions: CameraOptions = {
161
  quality: 75,
162
  destinationType: Camera.DestinationType.FILE_URI,
163
  sourceType: Camera.PictureSourceType.CAMERA,
164
  encodingType: Camera.EncodingType.JPEG
165
};
166

167
Camera.getPicture(basicOptions).then((imageData) => {
168
  // imageData is the file URI
169
  const imageUri = imageData;
170
  console.log('Image saved to: ' + imageUri);
171
}, (err) => {
172
  console.error('Camera error: ' + err);
173
});
174

175
// High quality photo with front camera
176
const selfieOptions: CameraOptions = {
177
  quality: 100,
178
  destinationType: Camera.DestinationType.FILE_URI,
179
  sourceType: Camera.PictureSourceType.CAMERA,
180
  encodingType: Camera.EncodingType.JPEG,
181
  targetWidth: 600,
182
  targetHeight: 600,
183
  cameraDirection: Camera.Direction.FRONT,
184
  correctOrientation: true,
185
  saveToPhotoAlbum: true
186
};
187

188
// Select from photo library
189
const libraryOptions: CameraOptions = {
190
  quality: 100,
191
  destinationType: Camera.DestinationType.FILE_URI,
192
  sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
193
  mediaType: Camera.MediaType.PICTURE,
194
  allowEdit: true
195
};
196

197
// Get base64 encoded image (use sparingly due to memory usage)
198
const base64Options: CameraOptions = {
199
  quality: 50,
200
  destinationType: Camera.DestinationType.DATA_URL,
201
  sourceType: Camera.PictureSourceType.CAMERA
202
};
203

204
Camera.getPicture(base64Options).then((imageData) => {
205
  const base64Image = 'data:image/jpeg;base64,' + imageData;
206
  // Use base64Image in img tag or upload
207
}, (err) => {
208
  console.error('Camera error: ' + err);
209
});
210
```
211

212
### Media Capture
213

214
Capture audio, video, and images with detailed configuration and metadata.
215

216
```typescript { .api }
217
/**
218
 * Media file information returned from capture operations
219
 */
220
interface MediaFile {
221
  /** Name of the file, without path information */
222
  name: string;
223
  /** Full path of the file, including the name */
224
  fullPath: string;
225
  /** File's mime type */
226
  type: string;
227
  /** Date and time when file was last modified */
228
  lastModifiedDate: Date;
229
  /** Size of the file, in bytes */
230
  size: number;
231
  
232
  /** 
233
   * Retrieves format information about the media capture file
234
   * @param successCallback Success callback with ConfigurationData
235
   * @param errorCallback Error callback
236
   */
237
  getFormatData(
238
    successCallback: (data: ConfigurationData) => void,
239
    errorCallback?: (error: CaptureError) => void
240
  ): void;
241
}
242

243
/**
244
 * Format information about captured media
245
 */
246
interface ConfigurationData {
247
  /** Media type (audio/video/image) */
248
  type: string;
249
  /** Height of the image or video in pixels */
250
  height: number;
251
  /** Width of the image or video in pixels */
252
  width: number;
253
}
254

255
/**
256
 * Capture error information
257
 */
258
interface CaptureError {
259
  /** Error code */
260
  code: number;
261
  /** Error message */
262
  message: string;
263
}
264

265
/**
266
 * Audio capture configuration options
267
 */
268
interface CaptureAudioOptions {
269
  /** Maximum number of audio clips to capture (default: 1) */
270
  limit?: number;
271
  /** Maximum duration of audio clip in seconds */
272
  duration?: number;
273
}
274

275
/**
276
 * Image capture configuration options
277
 */
278
interface CaptureImageOptions {
279
  /** Maximum number of images to capture (default: 1) */
280
  limit?: number;
281
}
282

283
/**
284
 * Video capture configuration options
285
 */
286
interface CaptureVideoOptions {
287
  /** Maximum number of video clips to capture (default: 1) */
288
  limit?: number;
289
  /** Maximum duration of video clip in seconds */
290
  duration?: number;
291
  /** Video quality: 0 = low, 1 = high */
292
  quality?: number;
293
}
294

295
/**
296
 * MediaCapture class for capturing media files
297
 */
298
class MediaCapture {
299
  /**
300
   * Start audio recording application to capture audio clips
301
   * @param options Audio capture configuration options
302
   * @returns Promise resolving to array of captured MediaFile objects
303
   */
304
  static captureAudio(options?: CaptureAudioOptions): Promise<MediaFile[]>;
305

306
  /**
307
   * Start camera application to capture images
308
   * @param options Image capture configuration options
309
   * @returns Promise resolving to array of captured MediaFile objects
310
   */
311
  static captureImage(options?: CaptureImageOptions): Promise<MediaFile[]>;
312

313
  /**
314
   * Start video recorder application to capture video clips
315
   * @param options Video capture configuration options
316
   * @returns Promise resolving to array of captured MediaFile objects
317
   */
318
  static captureVideo(options?: CaptureVideoOptions): Promise<MediaFile[]>;
319
}
320
```
321

322
**Usage Examples:**
323

324
```typescript
325
import { MediaCapture, CaptureAudioOptions, CaptureVideoOptions, CaptureImageOptions } from 'ionic-native';
326

327
// Capture single audio clip
328
const audioOptions: CaptureAudioOptions = { limit: 1, duration: 30 };
329
MediaCapture.captureAudio(audioOptions).then((audioFiles) => {
330
  const audioFile = audioFiles[0];
331
  console.log('Audio file: ' + audioFile.fullPath);
332
  console.log('Duration: ' + audioFile.size + ' bytes');
333
}, (err) => {
334
  console.error('Audio capture error: ' + err);
335
});
336

337
// Capture video with quality settings
338
const videoOptions: CaptureVideoOptions = { 
339
  limit: 1, 
340
  duration: 60, 
341
  quality: 1  // High quality
342
};
343
MediaCapture.captureVideo(videoOptions).then((videoFiles) => {
344
  const videoFile = videoFiles[0];
345
  console.log('Video file: ' + videoFile.fullPath);
346
  
347
  // Get format information
348
  videoFile.getFormatData((data) => {
349
    console.log('Video dimensions: ' + data.width + 'x' + data.height);
350
  });
351
}, (err) => {
352
  console.error('Video capture error: ' + err);
353
});
354

355
// Capture multiple images
356
const imageOptions: CaptureImageOptions = { limit: 3 };
357
MediaCapture.captureImage(imageOptions).then((imageFiles) => {
358
  imageFiles.forEach((file, index) => {
359
    console.log(`Image ${index + 1}: ${file.fullPath}`);
360
  });
361
}, (err) => {
362
  console.error('Image capture error: ' + err);
363
});
364
```
365

366
### Photo Viewer
367

368
Display photos in a native full-screen viewer with zoom and sharing capabilities.
369

370
```typescript { .api }
371
/**
372
 * PhotoViewer class for displaying images in native viewer
373
 */
374
class PhotoViewer {
375
  /**
376
   * Display photo in native full-screen viewer
377
   * @param url Image URL (local file path or remote URL)
378
   * @param title Optional title for the photo
379
   * @param options Optional viewer configuration
380
   */
381
  static show(url: string, title?: string, options?: any): void;
382
}
383
```
384

385
**Usage Examples:**
386

387
```typescript
388
import { PhotoViewer } from 'ionic-native';
389

390
// Show local image
391
PhotoViewer.show('file:///storage/emulated/0/Pictures/photo.jpg', 'My Photo');
392

393
// Show remote image
394
PhotoViewer.show('https://example.com/photo.jpg', 'Remote Photo');
395

396
// Show image with options
397
const options = {
398
  share: true,  // Enable sharing button
399
  closeButton: true,  // Show close button
400
  copyToReference: true  // Enable copy to clipboard
401
};
402
PhotoViewer.show('path/to/photo.jpg', 'Photo Title', options);
403
```
404

405
### Photo Library Management
406

407
Access and manage the device's photo library with comprehensive metadata and thumbnail support.
408

409
```typescript { .api }
410
/**
411
 * Photo library item information
412
 */
413
interface LibraryItem {
414
  /** Unique identifier for the library item */
415
  id: string;
416
  /** Original filename */
417
  fileName: string;
418
  /** Width of image/video */
419
  width: number;
420
  /** Height of image/video */
421
  height: number;
422
  /** Creation date */
423
  creationDate: Date;
424
  /** Location coordinates if available */
425
  latitude?: number;
426
  longitude?: number;
427
  /** Album name */
428
  albumName?: string;
429
}
430

431
/**
432
 * Authorization request options
433
 */
434
interface RequestAuthorizationOptions {
435
  /** Request read authorization */
436
  read?: boolean;
437
  /** Request write authorization */
438
  write?: boolean;
439
}
440

441
/**
442
 * Library retrieval options
443
 */
444
interface GetLibraryOptions {
445
  /** Number of items per batch */
446
  itemsInChunk?: number;
447
  /** Chunk timeout in milliseconds */
448
  chunkTimeLimitInMilliseconds?: number;
449
  /** Include video files */
450
  includeVideos?: boolean;
451
  /** Include images */
452
  includeImages?: boolean;
453
  /** Include cloud items */
454
  includeCloudSharedAlbums?: boolean;
455
}
456

457
/**
458
 * Thumbnail generation options
459
 */
460
interface GetThumbnailOptions {
461
  /** Thumbnail width */
462
  thumbnailWidth?: number;
463
  /** Thumbnail height */
464
  thumbnailHeight?: number;
465
  /** Image quality (0-100) */
466
  quality?: number;
467
}
468

469
/**
470
 * PhotoLibrary class for accessing device photo library
471
 */
472
class PhotoLibrary {
473
  /**
474
   * Request authorization to access photo library
475
   * @param options Authorization options
476
   * @returns Promise indicating authorization result
477
   */
478
  static requestAuthorization(options?: RequestAuthorizationOptions): Promise<void>;
479

480
  /**
481
   * Get library items as observable stream
482
   * @param options Library retrieval options
483
   * @returns Observable stream of LibraryItem objects
484
   */
485
  static getLibrary(options?: GetLibraryOptions): Observable<LibraryItem>;
486

487
  /**
488
   * Get thumbnail for specific photo
489
   * @param photoId Unique photo identifier
490
   * @param options Thumbnail generation options
491
   * @returns Promise resolving to base64 thumbnail data
492
   */
493
  static getThumbnail(photoId: string, options?: GetThumbnailOptions): Promise<string>;
494

495
  /**
496
   * Get full-size photo data
497
   * @param photoId Unique photo identifier
498
   * @returns Promise resolving to base64 photo data
499
   */
500
  static getPhoto(photoId: string): Promise<string>;
501

502
  /**
503
   * Save image to photo library
504
   * @param url Image URL to save
505
   * @param album Optional album name
506
   * @param options Save options
507
   * @returns Promise indicating save completion
508
   */
509
  static saveImage(url: string, album?: string, options?: any): Promise<void>;
510

511
  /**
512
   * Save video to photo library
513
   * @param url Video URL to save
514
   * @param album Optional album name
515
   * @param options Save options
516
   * @returns Promise indicating save completion
517
   */
518
  static saveVideo(url: string, album?: string, options?: any): Promise<void>;
519
}
520
```
521

522
**Usage Examples:**
523

524
```typescript
525
import { PhotoLibrary, GetLibraryOptions } from 'ionic-native';
526

527
// Request authorization and get library
528
async function loadPhotoLibrary() {
529
  try {
530
    await PhotoLibrary.requestAuthorization({ read: true });
531
    
532
    const options: GetLibraryOptions = {
533
      itemsInChunk: 100,
534
      includeImages: true,
535
      includeVideos: false
536
    };
537
    
538
    PhotoLibrary.getLibrary(options).subscribe(
539
      (libraryItem) => {
540
        console.log('Photo:', libraryItem.fileName);
541
        
542
        // Get thumbnail
543
        PhotoLibrary.getThumbnail(libraryItem.id, {
544
          thumbnailWidth: 150,
545
          thumbnailHeight: 150,
546
          quality: 80
547
        }).then((thumbnail) => {
548
          // Use base64 thumbnail data
549
          const img = document.createElement('img');
550
          img.src = 'data:image/jpeg;base64,' + thumbnail;
551
        });
552
      },
553
      (error) => {
554
        console.error('Library error:', error);
555
      }
556
    );
557
  } catch (error) {
558
    console.error('Authorization error:', error);
559
  }
560
}
561

562
// Save image to photo library
563
PhotoLibrary.saveImage('file:///path/to/image.jpg', 'My Album').then(() => {
564
  console.log('Image saved to photo library');
565
}).catch((error) => {
566
  console.error('Save error:', error);
567
});
568
```
569

570
### YouTube Video Player
571

572
Play YouTube videos using the native YouTube app for enhanced user experience and performance.
573

574
```typescript { .api }
575
/**
576
 * YouTube Video Player class for native video playback
577
 */
578
class YoutubeVideoPlayer {
579
  /**
580
   * Open and play a YouTube video in the native YouTube app
581
   * @param videoId YouTube video ID (from the video URL)
582
   */
583
  static openVideo(videoId: string): void;
584
}
585
```
586

587
**Usage Examples:**
588

589
```typescript
590
import { YoutubeVideoPlayer } from 'ionic-native';
591

592
// Play YouTube video by ID
593
YoutubeVideoPlayer.openVideo('dQw4w9WgXcQ');
594

595
// Extract video ID from YouTube URL and play
596
const youtubeUrl = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=60s';
597
const videoId = youtubeUrl.split('v=')[1].split('&')[0];
598
YoutubeVideoPlayer.openVideo(videoId);
599

600
// Play video with video ID from different URL formats
601
const shortUrl = 'https://youtu.be/dQw4w9WgXcQ';
602
const shortVideoId = shortUrl.split('/').pop();
603
YoutubeVideoPlayer.openVideo(shortVideoId);
604
```