0
# Media APIs
1

2
Image, video, and audio management including camera access, media selection, compression, and playback controls for Taro React Native applications.
3

4
## Capabilities
5

6
### Image Selection & Capture
7

8
Choose images from gallery or capture using camera.
9

10
```typescript { .api }
11
/**
12
 * Choose images from gallery or camera
13
 * @param options Image selection options
14
 */
15
function chooseImage(options?: {
16
  count?: number;
17
  sizeType?: ('original' | 'compressed')[];
18
  sourceType?: ('album' | 'camera')[];
19
  success?: (res: {
20
    tempFilePaths: string[];
21
    tempFiles: {
22
      path: string;
23
      size: number;
24
      originalFileObj?: File;
25
    }[];
26
  }) => void;
27
  fail?: (res: TaroGeneral.CallbackResult) => void;
28
  complete?: (res: any) => void;
29
}): Promise<{
30
  tempFilePaths: string[];
31
  tempFiles: {
32
    path: string;
33
    size: number;
34
    originalFileObj?: File;
35
  }[];
36
}>;
37
```
38

39
**Usage Examples:**
40

41
```typescript
42
import { chooseImage } from "@tarojs/taro-rn";
43

44
// Choose single image from gallery
45
const imageResult = await chooseImage({
46
  count: 1,
47
  sizeType: ['compressed'],
48
  sourceType: ['album']
49
});
50

51
console.log('Selected images:', imageResult.tempFilePaths);
52

53
// Choose multiple images from camera or gallery
54
const multiImageResult = await chooseImage({
55
  count: 9,
56
  sizeType: ['original', 'compressed'],
57
  sourceType: ['album', 'camera']
58
});
59

60
// Process selected images
61
multiImageResult.tempFiles.forEach((file, index) => {
62
  console.log(`Image ${index + 1}:`, file.path, 'Size:', file.size);
63
});
64
```
65

66
### Video Selection & Capture
67

68
Choose videos from gallery or record using camera.
69

70
```typescript { .api }
71
/**
72
 * Choose videos from gallery or camera
73
 * @param options Video selection options
74
 */
75
function chooseVideo(options?: {
76
  sourceType?: ('album' | 'camera')[];
77
  compressed?: boolean;
78
  maxDuration?: number;
79
  camera?: 'back' | 'front';
80
  success?: (res: {
81
    tempFilePath: string;
82
    duration: number;
83
    size: number;
84
    height: number;
85
    width: number;
86
  }) => void;
87
  fail?: (res: TaroGeneral.CallbackResult) => void;
88
  complete?: (res: any) => void;
89
}): Promise<{
90
  tempFilePath: string;
91
  duration: number;
92
  size: number;
93
  height: number;
94
  width: number;
95
}>;
96
```
97

98
### Media Selection (Images & Videos)
99

100
Choose mixed media files from gallery or camera.
101

102
```typescript { .api }
103
/**
104
 * Choose media files (images and videos)
105
 * @param options Media selection options
106
 */
107
function chooseMedia(options?: {
108
  count?: number;
109
  mediaType?: ('image' | 'video' | 'mix')[];
110
  sourceType?: ('album' | 'camera')[];
111
  maxDuration?: number;
112
  sizeType?: ('original' | 'compressed')[];
113
  camera?: 'back' | 'front';
114
  success?: (res: {
115
    tempFiles: {
116
      tempFilePath: string;
117
      size: number;
118
      duration?: number;
119
      height?: number;
120
      width?: number;
121
      thumbTempFilePath?: string;
122
      fileType: 'image' | 'video';
123
    }[];
124
  }) => void;
125
  fail?: (res: TaroGeneral.CallbackResult) => void;
126
  complete?: (res: any) => void;
127
}): Promise<{
128
  tempFiles: {
129
    tempFilePath: string;
130
    size: number;
131
    duration?: number;
132
    height?: number;
133
    width?: number;
134
    thumbTempFilePath?: string;
135
    fileType: 'image' | 'video';
136
  }[];
137
}>;
138
```
139

140
### Image Processing
141

142
Get image information and compress images.
143

144
```typescript { .api }
145
/**
146
 * Get image information
147
 * @param options Image info options
148
 */
149
function getImageInfo(options: {
150
  src: string;
151
  success?: (res: {
152
    width: number;
153
    height: number;
154
    path: string;
155
    orientation: 'up' | 'down' | 'left' | 'right';
156
    type: string;
157
  }) => void;
158
  fail?: (res: TaroGeneral.CallbackResult) => void;
159
  complete?: (res: any) => void;
160
}): Promise<{
161
  width: number;
162
  height: number;
163
  path: string;
164
  orientation: 'up' | 'down' | 'left' | 'right';
165
  type: string;
166
}>;
167

168
/**
169
 * Compress image
170
 * @param options Image compression options
171
 */
172
function compressImage(options: {
173
  src: string;
174
  quality?: number;
175
  success?: (res: {
176
    tempFilePath: string;
177
  }) => void;
178
  fail?: (res: TaroGeneral.CallbackResult) => void;
179
  complete?: (res: any) => void;
180
}): Promise<{
181
  tempFilePath: string;
182
}>;
183
```
184

185
**Usage Examples:**
186

187
```typescript
188
import { chooseVideo, chooseMedia, getImageInfo, compressImage } from "@tarojs/taro-rn";
189

190
// Choose video from camera
191
const videoResult = await chooseVideo({
192
  sourceType: ['camera'],
193
  maxDuration: 60,
194
  camera: 'back'
195
});
196

197
console.log('Video path:', videoResult.tempFilePath);
198
console.log('Video duration:', videoResult.duration);
199

200
// Choose mixed media
201
const mediaResult = await chooseMedia({
202
  count: 5,
203
  mediaType: ['image', 'video'],
204
  sourceType: ['album', 'camera']
205
});
206

207
// Process mixed media
208
mediaResult.tempFiles.forEach((file) => {
209
  if (file.fileType === 'image') {
210
    console.log('Image:', file.tempFilePath);
211
  } else {
212
    console.log('Video:', file.tempFilePath, 'Duration:', file.duration);
213
  }
214
});
215

216
// Get image information
217
const imageInfo = await getImageInfo({
218
  src: '/path/to/image.jpg'
219
});
220

221
console.log('Image dimensions:', imageInfo.width, 'x', imageInfo.height);
222

223
// Compress image
224
const compressedResult = await compressImage({
225
  src: '/path/to/large-image.jpg',
226
  quality: 0.8
227
});
228

229
console.log('Compressed image:', compressedResult.tempFilePath);
230
```
231

232
### Save to Photo Album
233

234
Save images and videos to the device photo album.
235

236
```typescript { .api }
237
/**
238
 * Save image to photo album
239
 * @param options Save image options
240
 */
241
function saveImageToPhotosAlbum(options: {
242
  filePath: string;
243
  success?: (res: TaroGeneral.CallbackResult) => void;
244
  fail?: (res: TaroGeneral.CallbackResult) => void;
245
  complete?: (res: TaroGeneral.CallbackResult) => void;
246
}): Promise<TaroGeneral.CallbackResult>;
247

248
/**
249
 * Save video to photo album
250
 * @param options Save video options
251
 */
252
function saveVideoToPhotosAlbum(options: {
253
  filePath: string;
254
  success?: (res: TaroGeneral.CallbackResult) => void;
255
  fail?: (res: TaroGeneral.CallbackResult) => void;
256
  complete?: (res: TaroGeneral.CallbackResult) => void;
257
}): Promise<TaroGeneral.CallbackResult>;
258
```
259

260
### Audio Playback
261

262
Create and manage audio playback contexts.
263

264
```typescript { .api }
265
/**
266
 * Create inner audio context for audio playback
267
 * @returns InnerAudioContext instance
268
 */
269
function createInnerAudioContext(): InnerAudioContext;
270

271
interface InnerAudioContext {
272
  /** Audio source URL */
273
  src: string;
274
  /** Start playback position in seconds */
275
  startTime: number;
276
  /** Auto play when src is set */
277
  autoplay: boolean;
278
  /** Loop playback */
279
  loop: boolean;
280
  /** Playback volume (0-1) */
281
  volume: number;
282
  /** Current playback position */
283
  readonly currentTime: number;
284
  /** Audio duration */
285
  readonly duration: number;
286
  /** Whether audio is paused */
287
  readonly paused: boolean;
288
  /** Buffered position */
289
  readonly buffered: number;
290
  
291
  /** Play audio */
292
  play(): void;
293
  /** Pause audio */
294
  pause(): void;
295
  /** Stop audio */
296
  stop(): void;
297
  /** Seek to position */
298
  seek(position: number): void;
299
  /** Destroy audio context */
300
  destroy(): void;
301
  
302
  /** Audio ready to play event */
303
  onCanplay(callback: () => void): void;
304
  /** Audio play event */
305
  onPlay(callback: () => void): void;
306
  /** Audio pause event */
307
  onPause(callback: () => void): void;
308
  /** Audio stop event */
309
  onStop(callback: () => void): void;
310
  /** Audio ended event */
311
  onEnded(callback: () => void): void;
312
  /** Audio time update event */
313
  onTimeUpdate(callback: () => void): void;
314
  /** Audio error event */
315
  onError(callback: (res: { errMsg: string; errCode: number }) => void): void;
316
  /** Audio waiting event */
317
  onWaiting(callback: () => void): void;
318
  /** Audio seeking event */
319
  onSeeking(callback: () => void): void;
320
  /** Audio seeked event */
321
  onSeeked(callback: () => void): void;
322
}
323
```
324

325
### Audio Recording
326

327
Get audio recorder manager for recording functionality.
328

329
```typescript { .api }
330
/**
331
 * Get recorder manager instance
332
 * @returns RecorderManager instance
333
 */
334
function getRecorderManager(): RecorderManager;
335

336
interface RecorderManager {
337
  /** Start recording */
338
  start(options: {
339
    duration?: number;
340
    sampleRate?: number;
341
    numberOfChannels?: number;
342
    encodeBitRate?: number;
343
    format?: 'aac' | 'mp3';
344
    frameSize?: number;
345
    audioSource?: 'auto' | 'buildInMic' | 'headsetMic' | 'mic' | 'camcorder';
346
  }): void;
347
  
348
  /** Pause recording */
349
  pause(): void;
350
  /** Resume recording */
351
  resume(): void;
352
  /** Stop recording */
353
  stop(): void;
354
  
355
  /** Recording start event */
356
  onStart(callback: () => void): void;
357
  /** Recording pause event */
358
  onPause(callback: () => void): void;
359
  /** Recording resume event */
360
  onResume(callback: () => void): void;
361
  /** Recording stop event */
362
  onStop(callback: (res: { tempFilePath: string; duration: number; fileSize: number }) => void): void;
363
  /** Recording frame recorded event */
364
  onFrameRecorded(callback: (res: { frameBuffer: ArrayBuffer; isLastFrame: boolean }) => void): void;
365
  /** Recording error event */
366
  onError(callback: (res: { errMsg: string }) => void): void;
367
}
368
```
369

370
### Video Context
371

372
Create video context for video playback control.
373

374
```typescript { .api }
375
/**
376
 * Create video context for video control
377
 * @param id Video component ID
378
 * @param component Component instance
379
 * @returns VideoContext instance
380
 */
381
function createVideoContext(id: string, component?: any): VideoContext;
382

383
interface VideoContext {
384
  /** Play video */
385
  play(): void;
386
  /** Pause video */
387
  pause(): void;
388
  /** Seek to position */
389
  seek(position: number): void;
390
  /** Send danmu */
391
  sendDanmu(danmu: { text: string; color: string }): void;
392
  /** Request full screen */
393
  requestFullScreen(options?: { direction: number }): void;
394
  /** Exit full screen */
395
  exitFullScreen(): void;
396
  /** Show status bar */
397
  showStatusBar(): void;
398
  /** Hide status bar */
399
  hideStatusBar(): void;
400
}
401
```
402

403
### Camera Context
404

405
Create camera context for camera control.
406

407
```typescript { .api }
408
/**
409
 * Create camera context for camera control
410
 * @param id Camera component ID
411
 * @param component Component instance
412
 * @returns CameraContext instance
413
 */
414
function createCameraContext(id: string, component?: any): CameraContext;
415

416
interface CameraContext {
417
  /** Take photo */
418
  takePhoto(options: {
419
    quality?: 'high' | 'normal' | 'low';
420
    success?: (res: { tempImagePath: string }) => void;
421
    fail?: (res: TaroGeneral.CallbackResult) => void;
422
    complete?: (res: any) => void;
423
  }): void;
424
  
425
  /** Start recording */
426
  startRecord(options: {
427
    timeoutCallback?: (res: { tempThumbPath: string; tempVideoPath: string }) => void;
428
    success?: (res: TaroGeneral.CallbackResult) => void;
429
    fail?: (res: TaroGeneral.CallbackResult) => void;
430
    complete?: (res: any) => void;
431
  }): void;
432
  
433
  /** Stop recording */
434
  stopRecord(options: {
435
    success?: (res: { tempThumbPath: string; tempVideoPath: string }) => void;
436
    fail?: (res: TaroGeneral.CallbackResult) => void;
437
    complete?: (res: any) => void;
438
  }): void;
439
}
440
```
441

442
**Usage Examples:**
443

444
```typescript
445
import { 
446
  saveImageToPhotosAlbum, 
447
  createInnerAudioContext, 
448
  getRecorderManager,
449
  createVideoContext,
450
  createCameraContext
451
} from "@tarojs/taro-rn";
452

453
// Save image to album
454
await saveImageToPhotosAlbum({
455
  filePath: '/path/to/image.jpg'
456
});
457

458
// Audio playback
459
const audioContext = createInnerAudioContext();
460
audioContext.src = 'https://example.com/audio.mp3';
461
audioContext.autoplay = true;
462

463
audioContext.onPlay(() => {
464
  console.log('Audio started playing');
465
});
466

467
audioContext.onEnded(() => {
468
  console.log('Audio finished playing');
469
  audioContext.destroy();
470
});
471

472
// Audio recording
473
const recorderManager = getRecorderManager();
474

475
recorderManager.onStop((res) => {
476
  console.log('Recording finished:', res.tempFilePath);
477
  console.log('Duration:', res.duration);
478
});
479

480
recorderManager.start({
481
  duration: 10000,
482
  format: 'aac'
483
});
484

485
// Video control
486
const videoContext = createVideoContext('my-video');
487
videoContext.play();
488

489
// Camera control
490
const cameraContext = createCameraContext('my-camera');
491
cameraContext.takePhoto({
492
  quality: 'high',
493
  success: (res) => {
494
    console.log('Photo taken:', res.tempImagePath);
495
  }
496
});
497
```