tessl/npm-tarojs--taro-rn

React Native implementation layer for the Taro cross-platform framework, providing React Native-specific APIs and utilities.

—

Pending

Overview

Eval results

Files

Media APIs

Name: tessl/npm-tarojs--taro-rn
Author: tessl

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

Capabilities

Image Selection & Capture

Choose images from gallery or capture using camera.

/**
 * Choose images from gallery or camera
 * @param options Image selection options
 */
function chooseImage(options?: {
  count?: number;
  sizeType?: ('original' | 'compressed')[];
  sourceType?: ('album' | 'camera')[];
  success?: (res: {
    tempFilePaths: string[];
    tempFiles: {
      path: string;
      size: number;
      originalFileObj?: File;
    }[];
  }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{
  tempFilePaths: string[];
  tempFiles: {
    path: string;
    size: number;
    originalFileObj?: File;
  }[];
}>;

Usage Examples:

import { chooseImage } from "@tarojs/taro-rn";

// Choose single image from gallery
const imageResult = await chooseImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['album']
});

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

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

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

Video Selection & Capture

Choose videos from gallery or record using camera.

/**
 * Choose videos from gallery or camera
 * @param options Video selection options
 */
function chooseVideo(options?: {
  sourceType?: ('album' | 'camera')[];
  compressed?: boolean;
  maxDuration?: number;
  camera?: 'back' | 'front';
  success?: (res: {
    tempFilePath: string;
    duration: number;
    size: number;
    height: number;
    width: number;
  }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{
  tempFilePath: string;
  duration: number;
  size: number;
  height: number;
  width: number;
}>;

Media Selection (Images & Videos)

Choose mixed media files from gallery or camera.

/**
 * Choose media files (images and videos)
 * @param options Media selection options
 */
function chooseMedia(options?: {
  count?: number;
  mediaType?: ('image' | 'video' | 'mix')[];
  sourceType?: ('album' | 'camera')[];
  maxDuration?: number;
  sizeType?: ('original' | 'compressed')[];
  camera?: 'back' | 'front';
  success?: (res: {
    tempFiles: {
      tempFilePath: string;
      size: number;
      duration?: number;
      height?: number;
      width?: number;
      thumbTempFilePath?: string;
      fileType: 'image' | 'video';
    }[];
  }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{
  tempFiles: {
    tempFilePath: string;
    size: number;
    duration?: number;
    height?: number;
    width?: number;
    thumbTempFilePath?: string;
    fileType: 'image' | 'video';
  }[];
}>;

Image Processing

Get image information and compress images.

/**
 * Get image information
 * @param options Image info options
 */
function getImageInfo(options: {
  src: string;
  success?: (res: {
    width: number;
    height: number;
    path: string;
    orientation: 'up' | 'down' | 'left' | 'right';
    type: string;
  }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{
  width: number;
  height: number;
  path: string;
  orientation: 'up' | 'down' | 'left' | 'right';
  type: string;
}>;

/**
 * Compress image
 * @param options Image compression options
 */
function compressImage(options: {
  src: string;
  quality?: number;
  success?: (res: {
    tempFilePath: string;
  }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{
  tempFilePath: string;
}>;

Usage Examples:

import { chooseVideo, chooseMedia, getImageInfo, compressImage } from "@tarojs/taro-rn";

// Choose video from camera
const videoResult = await chooseVideo({
  sourceType: ['camera'],
  maxDuration: 60,
  camera: 'back'
});

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

// Choose mixed media
const mediaResult = await chooseMedia({
  count: 5,
  mediaType: ['image', 'video'],
  sourceType: ['album', 'camera']
});

// Process mixed media
mediaResult.tempFiles.forEach((file) => {
  if (file.fileType === 'image') {
    console.log('Image:', file.tempFilePath);
  } else {
    console.log('Video:', file.tempFilePath, 'Duration:', file.duration);
  }
});

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

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

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

console.log('Compressed image:', compressedResult.tempFilePath);

Save to Photo Album

Save images and videos to the device photo album.

/**
 * Save image to photo album
 * @param options Save image options
 */
function saveImageToPhotosAlbum(options: {
  filePath: string;
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

/**
 * Save video to photo album
 * @param options Save video options
 */
function saveVideoToPhotosAlbum(options: {
  filePath: string;
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

Audio Playback

Create and manage audio playback contexts.

/**
 * Create inner audio context for audio playback
 * @returns InnerAudioContext instance
 */
function createInnerAudioContext(): InnerAudioContext;

interface InnerAudioContext {
  /** Audio source URL */
  src: string;
  /** Start playback position in seconds */
  startTime: number;
  /** Auto play when src is set */
  autoplay: boolean;
  /** Loop playback */
  loop: boolean;
  /** Playback volume (0-1) */
  volume: number;
  /** Current playback position */
  readonly currentTime: number;
  /** Audio duration */
  readonly duration: number;
  /** Whether audio is paused */
  readonly paused: boolean;
  /** Buffered position */
  readonly buffered: number;
  
  /** Play audio */
  play(): void;
  /** Pause audio */
  pause(): void;
  /** Stop audio */
  stop(): void;
  /** Seek to position */
  seek(position: number): void;
  /** Destroy audio context */
  destroy(): void;
  
  /** Audio ready to play event */
  onCanplay(callback: () => void): void;
  /** Audio play event */
  onPlay(callback: () => void): void;
  /** Audio pause event */
  onPause(callback: () => void): void;
  /** Audio stop event */
  onStop(callback: () => void): void;
  /** Audio ended event */
  onEnded(callback: () => void): void;
  /** Audio time update event */
  onTimeUpdate(callback: () => void): void;
  /** Audio error event */
  onError(callback: (res: { errMsg: string; errCode: number }) => void): void;
  /** Audio waiting event */
  onWaiting(callback: () => void): void;
  /** Audio seeking event */
  onSeeking(callback: () => void): void;
  /** Audio seeked event */
  onSeeked(callback: () => void): void;
}

Audio Recording

Get audio recorder manager for recording functionality.

/**
 * Get recorder manager instance
 * @returns RecorderManager instance
 */
function getRecorderManager(): RecorderManager;

interface RecorderManager {
  /** Start recording */
  start(options: {
    duration?: number;
    sampleRate?: number;
    numberOfChannels?: number;
    encodeBitRate?: number;
    format?: 'aac' | 'mp3';
    frameSize?: number;
    audioSource?: 'auto' | 'buildInMic' | 'headsetMic' | 'mic' | 'camcorder';
  }): void;
  
  /** Pause recording */
  pause(): void;
  /** Resume recording */
  resume(): void;
  /** Stop recording */
  stop(): void;
  
  /** Recording start event */
  onStart(callback: () => void): void;
  /** Recording pause event */
  onPause(callback: () => void): void;
  /** Recording resume event */
  onResume(callback: () => void): void;
  /** Recording stop event */
  onStop(callback: (res: { tempFilePath: string; duration: number; fileSize: number }) => void): void;
  /** Recording frame recorded event */
  onFrameRecorded(callback: (res: { frameBuffer: ArrayBuffer; isLastFrame: boolean }) => void): void;
  /** Recording error event */
  onError(callback: (res: { errMsg: string }) => void): void;
}

Video Context

Create video context for video playback control.

/**
 * Create video context for video control
 * @param id Video component ID
 * @param component Component instance
 * @returns VideoContext instance
 */
function createVideoContext(id: string, component?: any): VideoContext;

interface VideoContext {
  /** Play video */
  play(): void;
  /** Pause video */
  pause(): void;
  /** Seek to position */
  seek(position: number): void;
  /** Send danmu */
  sendDanmu(danmu: { text: string; color: string }): void;
  /** Request full screen */
  requestFullScreen(options?: { direction: number }): void;
  /** Exit full screen */
  exitFullScreen(): void;
  /** Show status bar */
  showStatusBar(): void;
  /** Hide status bar */
  hideStatusBar(): void;
}

Camera Context

Create camera context for camera control.

/**
 * Create camera context for camera control
 * @param id Camera component ID
 * @param component Component instance
 * @returns CameraContext instance
 */
function createCameraContext(id: string, component?: any): CameraContext;

interface CameraContext {
  /** Take photo */
  takePhoto(options: {
    quality?: 'high' | 'normal' | 'low';
    success?: (res: { tempImagePath: string }) => void;
    fail?: (res: TaroGeneral.CallbackResult) => void;
    complete?: (res: any) => void;
  }): void;
  
  /** Start recording */
  startRecord(options: {
    timeoutCallback?: (res: { tempThumbPath: string; tempVideoPath: string }) => void;
    success?: (res: TaroGeneral.CallbackResult) => void;
    fail?: (res: TaroGeneral.CallbackResult) => void;
    complete?: (res: any) => void;
  }): void;
  
  /** Stop recording */
  stopRecord(options: {
    success?: (res: { tempThumbPath: string; tempVideoPath: string }) => void;
    fail?: (res: TaroGeneral.CallbackResult) => void;
    complete?: (res: any) => void;
  }): void;
}

Usage Examples:

import { 
  saveImageToPhotosAlbum, 
  createInnerAudioContext, 
  getRecorderManager,
  createVideoContext,
  createCameraContext
} from "@tarojs/taro-rn";

// Save image to album
await saveImageToPhotosAlbum({
  filePath: '/path/to/image.jpg'
});

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

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

audioContext.onEnded(() => {
  console.log('Audio finished playing');
  audioContext.destroy();
});

// Audio recording
const recorderManager = getRecorderManager();

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

recorderManager.start({
  duration: 10000,
  format: 'aac'
});

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

// Camera control
const cameraContext = createCameraContext('my-camera');
cameraContext.takePhoto({
  quality: 'high',
  success: (res) => {
    console.log('Photo taken:', res.tempImagePath);
  }
});

Install with Tessl CLI