가이드
Capacitor에서 Camera Preview 사용하는 법
@capgo/camera-preview 사용 중
CameraPreview 플러그인의 메인 인터페이스입니다.
설치
bun add @capgo/camera-preview
bunx cap sync
bunx cap sync 플러그인의 네이티브 code를 네이티브 프로젝트에 복사합니다. 플러그인을 업그레이드할 때마다 다시 실행하세요.
가져오기
import { CameraPreview } from '@capgo/camera-preview';
API 한눈에 보기
| 메서드 | 설명 |
|---|---|
start |
카메라 프리뷰를 시작합니다. |
stop |
카메라 프리뷰를 중지합니다. |
capture |
카메라로 사진을 촬영합니다. |
captureSample |
카메라 프리뷰 스트림에서 단일 프레임을 캡처합니다. |
startBarcodeScanner |
활성 카메라 프리뷰에서 바코드 스캔을 시작합니다. |
stopBarcodeScanner |
카메라 프리뷰를 계속 실행한 채로 바코드 스캔을 중지합니다. |
getSupportedFlashModes |
활성 카메라에서 지원하는 플래시 모드를 가져옵니다. |
setAspectRatio |
카메라 프리뷰의 종횡비를 설정합니다. |
getAspectRatio |
카메라 프리뷰의 현재 종횡비를 가져옵니다. |
setGridMode |
카메라 프리뷰 오버레이의 그리드 모드를 설정합니다. |
getGridMode |
카메라 프리뷰 오버레이의 현재 그리드 모드를 가져옵니다. |
checkPermissions |
시스템 대화 상자를 띄우지 않고 현재 카메라(및 선택 사항인 마이크) 권한 상태를 확인합니다. |
requestPermissions |
카메라(및 선택 사항인 마이크) 권한을 요청합니다. 이미 권한이 허용되었거나 거부된 경우, 요청 없이 현재 상태를 반환합니다. 만약 showSettingsAlert 값이 true이고 권한이 거부된 경우, 사용자를 앱 설정으로 안내하는 플랫폼별 알림이 표시됩니다. |
getHorizontalFov |
활성화된 카메라의 수평 시야각(FoV)을 가져옵니다. 참고: 일부 기기에서는 추정치일 수 있습니다. |
getSupportedPictureSizes |
모든 카메라에서 지원하는 사진 크기를 가져옵니다. |
setFlashMode |
활성화된 카메라의 플래시 모드를 설정합니다. |
flip |
전면 카메라와 후면 카메라를 전환합니다. |
setOpacity |
카메라 프리뷰의 불투명도를 설정합니다. |
stopRecordVideo |
진행 중인 비디오 녹화를 중지합니다. |
startRecordVideo |
비디오 녹화를 시작합니다. |
setVideoQuality |
활성화된 카메라 세션의 비디오 녹화 품질을 설정합니다. |
getVideoQuality |
현재 비디오 녹화 품질을 가져옵니다. |
getSupportedVideoQualities |
활성화된 카메라가 지원하는 비디오 품질을 반환합니다. |
setVideoCodec |
녹화 시 사용할 비디오 코덱을 설정합니다. |
getVideoCodec |
현재 녹화에 사용 중인 비디오 코덱을 가져옵니다. |
getSupportedVideoCodecs |
활성화된 카메라가 지원하는 비디오 코덱을 반환합니다. |
isVideoStabilizationSupported |
활성화된 카메라가 비디오 손떨림 보정(stabilization)을 지원하는지 확인합니다. |
getSupportedVideoStabilizationModes |
활성화된 카메라가 지원하는 비디오 손떨림 보정 모드를 반환합니다. |
getVideoStabilizationMode |
현재 설정된 비디오 손떨림 보정 모드를 가져옵니다. |
setVideoStabilizationMode |
녹화 시 사용할 비디오 손떨림 보정 모드를 설정합니다. 녹화 중에는 변경할 수 없으며, 다음을 videoStabilizationMode 에서 startRecordVideo() 전달할 수도 있습니다. |
isRunning |
카메라 프리뷰가 현재 실행 중인지 확인합니다. |
getAvailableDevices |
사용 가능한 모든 카메라 장치를 가져옵니다. |
getZoom |
최소/최대 줌 상태 및 현재 렌즈 정보를 가져옵니다. |
getZoomButtonValues |
빠른 전환을 위한 줌 버튼 값을 반환합니다. - iOS/Android: 초광각 사용 가능 시 0.5, 광각 사용 가능 시 1과 2, 망원 사용 가능 시 3 포함 - Web: 지원되지 않음. |
setZoom |
카메라의 줌 레벨을 설정합니다. |
getFlashMode |
현재 플래시 모드를 가져옵니다. |
setDeviceId |
활성 카메라를 지정된 카메라로 전환합니다. deviceId. |
getDeviceId |
현재 바인딩된 카메라 장치의 ID를 가져옵니다. Android에서 물리 렌즈 요청이 논리 카메라로 폴백되면, 바인딩된 논리 카메라 ID를 반환합니다. |
getPreviewSize |
현재 프리뷰 크기와 위치를 가져옵니다. |
setPreviewSize |
프리뷰 크기와 위치를 설정합니다. |
setFocus |
프리뷰 내 특정 지점에 카메라 포커스를 설정합니다. |
deleteFile |
Deletes a file at the given absolute path on the device. Use this to quickly clean up temporary images created with storeToFile웹에서는 지원되지 않으며 다음 오류가 발생합니다. |
getSafeAreaInsets |
기기의 세이프 에어리어(safe area) 인셋을 가져옵니다. 방향에 따른 노치/카메라 컷아웃 인셋과 현재 방향을 반환합니다. 세로 모드에서는 상단 인셋(상단 노치)을, 가로 모드에서는 좌측 인셋(측면 노치)을 반환합니다. 이는 최신 스마트폰의 컷아웃 영역(노치, 펀치홀 등)을 정확히 타겟팅합니다. |
getOrientation |
현재 기기의 방향을 크로스 플랫폼 형식으로 가져옵니다. |
getExposureModes |
활성화된 카메라가 지원하는 노출 모드를 반환합니다. 모드에는 'locked', 'auto', 'continuous', 'custom'이 포함될 수 있습니다. |
getExposureMode |
현재 노출 모드를 반환합니다. |
setExposureMode |
노출 모드를 설정합니다. |
getExposureCompensationRange |
지원되는 노출 보정(EV bias) 범위를 반환합니다. |
getExposureCompensation |
현재 노출 보정(EV bias) 값을 반환합니다. |
setExposureCompensation |
노출 보정(EV bias)을 설정합니다. 값은 허용 범위 내로 제한됩니다. |
getWhiteBalanceModes |
활성화된 카메라가 지원하는 화이트 밸런스 모드를 반환합니다. 모드에는 'AUTO', 'LOCK', 'CONTINUOUS'가 포함될 수 있습니다. CUSTOM 수동 게인(manual gains) 지원이 구현될 때까지 목록에 표시되지 않습니다. |
getWhiteBalanceMode |
현재 화이트 밸런스 모드를 반환합니다. |
setWhiteBalanceMode |
화이트 밸런스 모드를 설정합니다. CONTINUOUS 자동 화이트 밸런스를 유지합니다 (권장 사항; 따뜻하거나 노란 색조를 방지함), LOCK 현재 게인을 고정합니다. AUTO 일회성 조정을 수행합니다. CUSTOM 수동 게인 지원 기능이 구현될 때까지 예약 및 거부됩니다. |
getSupportedVideoFrameRates |
현재 포맷에서 활성화된 카메라가 지원하는 비디오 프레임 레이트 목록을 반환합니다. 지원되는 값은 선택한 카메라, 렌즈 및 비디오 품질에 따라 달라집니다. |
getVideoFrameRate |
활성화된 카메라에 설정된 비디오 프레임 레이트를 반환합니다. Android의 경우 저조도 환경이나 발열 상황에서는 실제 녹화 프레임 레이트가 달라질 수 있습니다. |
setVideoFrameRate |
활성화된 카메라 세션의 목표 비디오 프레임 레이트를 설정합니다. 다음을 전달하는 것을 권장합니다. frameRate 대상 startRecordVideo() 녹화를 시작할 때 사용하세요. 지원되지 않는 값은 명확한 에러와 함께 거부됩니다. |
예시
start()
카메라 프리뷰를 시작합니다.
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.start({ parent: 'parent' });
console.log(result);
stop()
카메라 프리뷰를 중지합니다.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stop();
capture()
카메라로 사진을 촬영합니다.
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.capture({ height: 1920 });
console.log(result);
captureSample()
카메라 프리뷰 스트림에서 단일 프레임을 캡처합니다.
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.captureSample({
quality: 85,
mirrorFrontCamera: false,
});
console.log(result);
startBarcodeScanner()
활성 카메라 프리뷰에서 바코드 스캔을 시작합니다.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.startBarcodeScanner();
stopBarcodeScanner()
카메라 프리뷰를 계속 실행한 채로 바코드 스캔을 중지합니다.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopBarcodeScanner();
위 표에는 56개의 핵심 메서드가 나열되어 있습니다. Listener 및 버전 헬퍼, 그리고 각 메서드의 전체 계약(contract)에 대한 상세 내용은 GitHub 리포지토리.
이벤트 수신
addListener 핸들을 반환합니다. 호출하세요 handle.remove() 화면이 언마운트될 때, 또는 CameraPreview.removeAllListeners() 모든 리스너를 해제하려면.
전체 레퍼런스
@capgo/camera-preview 사용하기 계속하기
사용 중이라면 @capgo/camera-preview 사용하기 네이티브 미디어 및 인터페이스 동작을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/camera-preview @capgo/camera-preview의 구현 세부 사항은 시작하기 Getting Started의 구현 상세 내용은 @capgo/capacitor-live-activities 사용 @capgo/capacitor-live-activities 사용에서의 네이티브 기능, @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 사항 및 @capgo/capacitor-video-player 사용 @capgo/capacitor-video-player.를 사용한 네이티브 기능