@54vie/media - Media Module

Module for managing camera, gallery, image/video processing, and media upload.

Installation

pnpm add @54vie/media

Camera

import { useCamera, CameraService } from '@54vie/media';

function ProfilePhoto() {
  const {
    capture,
    record,
    isRecording,
    startRecording,
    stopRecording,
    switchCamera,
    flash,
    setFlash,
  } = useCamera();

  const takePhoto = async () => {
    const photo = await capture({
      quality: 'high',
      flash: 'auto',
    });
    console.log(photo.uri);
  };

  const recordVideo = async () => {
    const video = await record({
      maxDuration: 60,
      quality: 'high',
    });
    console.log(video.uri, video.duration);
  };
}

Gallery

import { useGallery } from '@54vie/media';

function ImagePicker() {
  const { pick, pickMultiple, getAlbums } = useGallery();

  // Pick single image
  const pickImage = async () => {
    const image = await pick({
      mediaType: 'photo',
      quality: 0.8,
    });
  };

  // Pick multiple
  const pickImages = async () => {
    const images = await pickMultiple({
      mediaType: 'photo',
      maxSelection: 5,
    });
  };

  // Get albums
  const albums = await getAlbums();
}

Image Processing

import { useImageEditor, ImageProcessor } from '@54vie/media';

function AvatarEditor() {
  const { crop, resize, compress, rotate, filter } = useImageEditor();

  // Crop image
  const cropped = await crop(imageUri, {
    width: 300,
    height: 300,
    aspectRatio: 1,
  });

  // Resize
  const resized = await resize(imageUri, {
    width: 800,
    height: 600,
  });

  // Compress
  const compressed = await compress(imageUri, 0.7);

  // Rotate
  const rotated = await rotate(imageUri, 90);

  // Apply filter
  const filtered = await filter(imageUri, 'grayscale');
}

Media Upload

import { useMediaUpload } from '@54vie/media';

function UploadPhoto() {
  const {
    upload,
    uploadMultiple,
    progress,
    isUploading,
    cancel,
  } = useMediaUpload();

  const handleUpload = async (asset) => {
    const result = await upload(asset, '/api/upload/avatar');
    if (result.success) {
      console.log('Uploaded:', result.url);
    }
  };

  return (
    <View>
      <Button onPress={() => handleUpload(photo)} disabled={isUploading}>
        Upload
      </Button>
      {isUploading && (
        <View>
          <ProgressBar progress={progress} />
          <Button onPress={cancel}>Cancel</Button>
        </View>
      )}
    </View>
  );
}

QR Scanner

import { useQRScanner, QRScanner } from '@54vie/media';

// Hook
function QRPayment() {
  const { scan, isScanning, lastScanned } = useQRScanner();

  const handleScan = async () => {
    const data = await scan();
    processPayment(data);
  };
}

// Component
function ScannerScreen() {
  return (
    <QRScanner
      onScan={(data) => console.log('Scanned:', data)}
      showFrame
      flashButton
    />
  );
}

Components

import {
  CameraView,
  MediaPicker,
  ImageCropper,
  VideoPlayer,
} from '@54vie/media';

// Camera view
<CameraView
  type="back"
  flash="auto"
  onCapture={handleCapture}
>
  <CameraControls />
</CameraView>

// Media picker
<MediaPicker
  mediaType="mixed"
  multiple
  maxSelection={10}
  onSelect={handleSelect}
/>

// Image cropper
<ImageCropper
  source={imageUri}
  aspectRatio={1}
  onCrop={handleCrop}
  onCancel={handleCancel}
/>

// Video player
<VideoPlayer
  source={videoUri}
  controls
  autoPlay={false}
  onEnd={handleEnd}
/>