시작하기

1. 패키지 설치

   npm

   npm i @capgo/camera-preview

   pnpm

   pnpm add @capgo/camera-preview

   yarn

   yarn add @capgo/camera-preview

   bun

   bun add @capgo/camera-preview

2. 네이티브 프로젝트와 동기화

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. 권한 구성

   iOS

   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

   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" />

사용법

플러그인을 가져오고 메서드를 사용하여 카메라를 제어하세요:

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)

카메라 미리보기를 시작합니다.

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()

카메라 미리보기를 중지합니다.

capture(options)

사진을 촬영하고 base64 인코딩 문자열로 반환합니다.

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

flip()

전면 카메라와 후면 카메라를 전환합니다.

setFlashMode(options)

플래시 모드를 설정합니다.

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

startRecordVideo(options)

동영상 녹화를 시작합니다.

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

stopRecordVideo()

동영상 녹화를 중지하고 동영상 파일 경로를 반환합니다.

고급 기능

포커스 제어

// 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'
});

줌 제어

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

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

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

노출 제어

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

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

모범 사례

1. 먼저 권한 요청

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

2. 방향 변경 처리 미리보기를 자동으로 조정하려면 rotateWhenOrientationChanged: true를 설정하세요.

3. 성능 최적화

   • 적절한 해상도 설정 사용
   • 사용하지 않을 때 미리보기 중지
   • 필요하지 않은 기능 비활성화

4. 오류 처리

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

플랫폼 참고 사항

iOS

• iOS 10.0+ 필요
• AVFoundation 프레임워크 사용
• 하드웨어 가속 지원

Android

• Android 5.0 (API 21)+ 필요
• Camera2 API 사용
• 기기 기능에 따라 다양한 카메라 기능 지원