콘텐츠로 건너뛰기
Capgo

Getting Started

이 콘텐츠는 아직 귀하의 언어로 제공되지 않습니다.

  1. Install the package

    Terminal window
    npm i @capgo/camera-preview

  2. Sync with native projects

    Terminal window
    npx cap sync

  3. Configure permissions

    iOS

    Add camera usage description to your Info.plist:

    <key>NSCameraUsageDescription</key>
    <string>To take photos and videos</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>To record audio with videos</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>To save photos and videos</string>

    Android

    Add camera permissions to your AndroidManifest.xml:

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Usage

Import the plugin and use its methods to control the camera:

import { CameraPreview } from '@capgo/camera-preview';
import { CameraPreviewOptions, CameraPreviewPictureOptions } from '@capgo/camera-preview';


// Start camera preview
const startCamera = async () => {
  const cameraPreviewOptions: CameraPreviewOptions = {
    position: 'rear',
    height: 1920,
    width: 1080,
    quality: 50,
    toBack: false,
    paddingBottom: 0,
    rotateWhenOrientationChanged: true,
    x: 0,
    y: 0
  };


  await CameraPreview.start(cameraPreviewOptions);
};


// Stop camera preview
const stopCamera = async () => {
  await CameraPreview.stop();
};


// Take a picture
const takePicture = async () => {
  const pictureOptions: CameraPreviewPictureOptions = {
    quality: 90,
    width: 1920,
    height: 1080
  };


  const result = await CameraPreview.capture(pictureOptions);
  const base64PictureData = result.value;


  // Use the base64 image data
  console.log(base64PictureData);
};


// Switch camera
const flipCamera = async () => {
  await CameraPreview.flip();
};


// Control flash
const setFlashMode = async (mode: 'on' | 'off' | 'auto' | 'torch') => {
  await CameraPreview.setFlashMode({ flashMode: mode });
};


// Start recording video
const startRecording = async () => {
  await CameraPreview.startRecordVideo({
    storeToFile: true,
    fileName: 'myvideo'
  });
};


// Stop recording
const stopRecording = async () => {
  const result = await CameraPreview.stopRecordVideo();
  console.log('Video path:', result.videoFilePath);
};

API Reference

start(options)

Starts the camera preview.

interface CameraPreviewOptions {
  position?: 'rear' | 'front';
  height?: number;
  width?: number;
  x?: number;
  y?: number;
  toBack?: boolean;
  paddingBottom?: number;
  rotateWhenOrientationChanged?: boolean;
  storeToFile?: boolean;
  disableExifHeaderStripping?: boolean;
  enableHighResolution?: boolean;
  disableAudio?: boolean;
  lockAndroidOrientation?: boolean;
  enableOpacity?: boolean;
  enableZoom?: boolean;
}

stop()

Stops the camera preview.

capture(options)

Takes a picture and returns it as base64 encoded string.

interface CameraPreviewPictureOptions {
  height?: number;
  width?: number;
  quality?: number;
}

flip()

Switches between front and rear camera.

setFlashMode(options)

Sets the flash mode.

interface CameraPreviewFlashMode {
  flashMode: 'off' | 'on' | 'auto' | 'torch';
}

startRecordVideo(options)

Starts video recording.

interface CameraPreviewVideoOptions {
  storeToFile?: boolean;
  fileName?: string;
  width?: number;
  height?: number;
  quality?: number;
  withFlash?: boolean;
}

stopRecordVideo()

Stops video recording and returns the video file path.

Advanced Features

Focus Control

// Set focus
await CameraPreview.setFocusCoordinate({
  x: 100,
  y: 100
});


// Get supported focus modes
const focusModes = await CameraPreview.getFocusModes();


// Set focus mode
await CameraPreview.setFocusMode({
  focusMode: 'continuous-picture'
});

Zoom Control

// Get max zoom
const maxZoom = await CameraPreview.getMaxZoom();


// Set zoom
await CameraPreview.setZoom({
  zoom: 2.0
});


// Get current zoom
const currentZoom = await CameraPreview.getZoom();

Exposure Control

// Get exposure compensation range
const range = await CameraPreview.getExposureCompensationRange();


// Set exposure compensation
await CameraPreview.setExposureCompensation({
  exposureCompensation: 0.5
});

Best Practices

  1. Request permissions first

    import { Camera } from '@capacitor/camera';
    

    const requestPermissions = async () => {
      const permissions = await Camera.requestPermissions();
      if (permissions.camera === 'granted') {
        // Start camera preview
      }
    };

  2. Handle orientation changes Set rotateWhenOrientationChanged: true to automatically adjust the preview.

  3. Optimize performance

    • Use appropriate resolution settings
    • Stop the preview when not in use
    • Disable features you don’t need

  4. Error handling

    try {
      await CameraPreview.start(options);
    } catch (error) {
      console.error('Failed to start camera:', error);
    }

Platform Notes

iOS

  • Requires iOS 10.0+
  • Uses AVFoundation framework
  • Hardware acceleration supported

Android

  • Requires Android 5.0 (API 21)+
  • Uses Camera2 API
  • Supports various camera features based on device capabilities