Mulai
Salinlah prompt pengaturan dengan langkah-langkah instalasi dan panduan markdown lengkap untuk plugin ini.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/camera-preview`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/camera-preview/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
Instal
“Instalasi”bun add @capgo/camera-previewbunx cap syncimport { CameraPreview } from '@capgo/camera-preview';API Ringkasan
Bagian berjudul “API Ringkasan”Mengaktifkan pratinjau kamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.start({} as CameraPreviewOptions);Menghentikan pratinjau kamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stop();capture
Bagian berjudul “capture”Mengambil gambar dari kamera.
Jika storeToFile ditetapkan ke true ketika memulai pratinjau, yang dikembalikan
value akan menjadi sebuah jalur file absolut pada perangkat bukan string base64. Gunakan getBase64FromFilePath untuk mendapatkan string base64 dari jalur file.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.capture({} as CameraPreviewPictureOptions);captureSample
Bagian berjudul “captureSample”Mengambil frame tunggal dari aliran pratinjau kamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.captureSample({} as CameraSampleOptions);getSupportedFlashModes
Bagian berjudul “getSupportedFlashModes”Mendapatkan mode flash yang didukung oleh kamera aktif.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedFlashModes();setAspectRatio
Bagian berjudul “setAspectRatio”Atur rasio aspek kamera preview.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setAspectRatio({} as { aspectRatio: '4:3' | '16:9'; x?: number; y?: number });getAspectRatio
Bagian berjudul “getAspectRatio”Dapatkan rasio aspek kamera preview saat ini.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAspectRatio();setGridMode
Bagian berjudul “setGridMode”Atur mode grid kamera preview overlay.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setGridMode({} as { gridMode: GridMode });getGridMode
Bagian berjudul “getGridMode”Dapatkan mode grid kamera preview overlay saat ini.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getGridMode();checkPermissions
Bagian berjudul “checkPermissions”Mengecek status izin kamera (dan mikrofon optional) saat ini tanpa menampilkan dialog sistem.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.checkPermissions();requestPermissions
Bagian berjudul “requestPermissions”Mengajukan izin kamera (dan mikrofon optional). Jika izin sudah diberikan atau ditolak,
status saat ini akan dikembalikan tanpa menampilkan dialog. Ketika showSettingsAlert is true dan izin ditolak,
a peringatan spesifik platform akan ditampilkan untuk mengarahkan pengguna ke pengaturan aplikasi.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.requestPermissions();getHorizontalFov
Bagian berjudul “getHorizontalFov”Mengambil sudut pandang horizontal untuk kamera aktif. Catatan: Ini bisa merupakan perkiraan pada beberapa perangkat.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getHorizontalFov();getSupportedPictureSizes
Bagian berjudul “getSupportedPictureSizes”Mendapatkan ukuran gambar yang didukung untuk semua kamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedPictureSizes();setFlashMode
Bagian berjudul “setFlashMode”Mengatur mode kilasan untuk kamera aktif.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFlashMode({} as { flashMode: CameraPreviewFlashMode | string });Mengganti antara kamera depan dan belakang.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.flip();setOpacity
Bagian berjudul “setOpacity”Mengatur kejelasan pratinjau kamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setOpacity({} as CameraOpacityOptions);stopRecordVideo
Bagian berjudul “stopRecordVideo”Menghentikan rekaman video yang sedang berlangsung.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopRecordVideo();startRecordVideo
Bagian judul “startRecordVideo”Mengaktifkan rekaman video.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.startRecordVideo({} as CameraPreviewOptions);isRunning
Bagian judul “isRunning”Mengecek apakah tampilan kamera sedang berjalan.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.isRunning();getAvailableDevices
Bagian judul “getAvailableDevices”Mengambil semua perangkat kamera yang tersedia.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAvailableDevices();getZoom
Bagian judul “getZoom”Mendapatkan status zoom saat ini, termasuk min/max dan informasi lensa saat ini.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoom();getZoomButtonValues
Bagian berjudul “getZoomButtonValues”Mengembalikan nilai tombol zoom untuk perubahan cepat.
- iOS/Android: termasuk 0,5 jika ultra-lebar tersedia; 1 dan 2 jika lebar tersedia; 3 jika telefoto tersedia
- Web: tidak tersedia
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoomButtonValues();setZoom
Bagian berjudul “setZoom”Mengatur tingkat zoom kamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setZoom({} as { level: number; ramp?: boolean; autoFocus?: boolean });getFlashMode
Bagian berjudul “getFlashMode”Mendapatkan mode flash saat ini.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getFlashMode();setDeviceId
Bagian berjudul “setDeviceId”Mengganti kamera aktif ke yang ditentukan dengan spesifikasi deviceId.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setDeviceId({} as { deviceId: string });getDeviceId
Bagian berjudul “getDeviceId”Mengambil ID perangkat kamera yang sedang terikat. Di Android, jika permintaan lensa fisik jatuh kembali ke kamera logis, ini mengembalikan ID kamera logis yang terikat.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getDeviceId();getPreviewSize
Bagian berjudul “getPreviewSize”Mengambil ukuran dan posisi pra-pandangan saat ini.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getPreviewSize();setPreviewSize
Bagian berjudul “setPreviewSize”Mengatur ukuran dan posisi pra-pandangan.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setPreviewSize({} as { x?: number; y?: number; width: number; height: number });setFocus
Judul Bagian “setFocus”Mengatur fokus kamera ke titik tertentu di preview.
Catatan: Plugin ini tidak menambahkan pengaturan sentuhan native tap-to-focus. Tangani sentuhan di HTML/JS Anda (misalnya, di UI yang menutupi), kemudian kirimkan koordinat yang telah dinormalisasi di sini.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFocus({} as { x: number; y: number });deleteFile
Bagian berjudul “hapusFile”Menghapus file di jalur absolut yang diberikan pada perangkat ini.\nGunakan ini untuk membersihkan cepat gambar sementara yang dibuat dengan storeToFilePada web, ini tidak didukung dan akan melemparkan kesalahan.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.deleteFile({} as { path: string });getSafeAreaInsets
Bagian berjudul “getSafeAreaInsets”Mengembalikan inset area yang aman untuk perangkat. Mengembalikan inset orientasi-aware notch/kamera cutout dan orientasi saat ini. Dalam mode potret: mengembalikan inset atas (notch di atas). Dalam mode lanskap: mengembalikan inset kiri (notch dipindahkan ke samping). Hal ini secara spesifik mengarahkan ke area cutout (notch, lubang punch, dll.) yang semua ponsel modern memiliki.
Android: Nilai-nilai yang dikembalikan dalam dp (pixel logis). iOS: Nilai-nilai yang dikembalikan dalam pixel fisik, menginggalkan status bar (hanya ukuran notch/cutout murni).
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSafeAreaInsets();getOrientation
Bagian berjudul “getOrientation”Mendapatkan orientasi perangkat saat ini dalam format lintas platform.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getOrientation();getExposureModes
Bagian berjudul “getExposureModes”Mengembalikan mode paparan yang didukung oleh kamera aktif. Mode dapat termasuk: ‘terkunci’, ‘otomatis’, ‘terus menerus’, ‘custom’.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureModes();getExposureMode
Bagian berjudul “getExposureMode”Mengembalikan mode paparan saat ini.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureMode();setExposureMode
Bagian berjudul “setExposureMode”Mengatur mode paparan.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureMode({} as { mode: ExposureMode });getExposureCompensationRange
Bagian berjudul “getExposureCompensationRange”Mengembalikan rentang kompensasi eksposur (EV bias) yang didukung.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensationRange();getExposureCompensation
Bagian berjudul “getExposureCompensation”Mengembalikan kompensasi eksposur (EV bias) saat ini.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensation();setExposureCompensation
Bagian berjudul “setExposureCompensation”Mengatur kompensasi eksposur (EV bias). Nilai akan dikompresi ke rentang.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureCompensation({} as { value: number });Bagian berjudul “Referensi Tipe”
Salin ke clipboardCameraPreviewOptions
Bagian berjudul “CameraPreviewOptions”Mengatur opsi konfigurasi untuk memulai pratinjau kamera.
export interface CameraPreviewOptions { /** * The parent element to attach the video preview to. * @platform web */ parent?: string; /** * A CSS class name to add to the preview element. * @platform web */ className?: string; /** * The width of the preview in pixels. Defaults to the screen width. * @platform android, ios, web */ width?: number; /** * The height of the preview in pixels. Defaults to the screen height. * @platform android, ios, web */ height?: number; /** * The horizontal origin of the preview, in pixels. * @platform android, ios */ x?: number; /** * The vertical origin of the preview, in pixels. * @platform android, ios */ y?: number; /** * The aspect ratio of the camera preview, '4:3' or '16:9' or 'fill'. * Cannot be set if width or height is provided, otherwise the call will be rejected. * Use setPreviewSize to adjust size after starting. * * @since 2.0.0 */ aspectRatio?: '4:3' | '16:9'; /** * Controls how the camera preview fills the available space. * - 'contain': Fits the entire preview within the space, may show letterboxing (default). * - 'cover': Fills the entire space, may crop edges of the preview. * @default "contain" * @platform android, ios, web */ aspectMode?: 'cover' | 'contain'; /** * The grid overlay to display on the camera preview. * @default "none" * @since 2.1.0 */ gridMode?: GridMode; /** * Adjusts the y-position to account for safe areas (e.g., notches). * @platform ios * @default false */ includeSafeAreaInsets?: boolean; /** * If true, places the preview behind the webview. * @platform android * @default true */ toBack?: boolean; /** * Bottom padding for the preview, in pixels. * @platform android, ios */ paddingBottom?: number; /** * Whether to rotate the preview when the device orientation changes. * @platform ios * @default true */ rotateWhenOrientationChanged?: boolean; /** * The camera to use. * @default "rear" */ position?: CameraPosition | string; /** * If true, saves the captured image to a file and returns the file path. * If false, returns a base64 encoded string. * @default false */ storeToFile?: boolean; /** * If true, prevents the plugin from rotating the image based on EXIF data. * @platform android * @default false */ disableExifHeaderStripping?: boolean; /** * If true, disables the audio stream, preventing audio permission requests. * @default true */ disableAudio?: boolean; /** * If true, locks the device orientation while the camera is active. * @platform android * @default false */ lockAndroidOrientation?: boolean; /** * If true, allows the camera preview's opacity to be changed. * @platform android, web * @default false */ enableOpacity?: boolean;
/** * If true, disables the visual focus indicator when tapping to focus. * @platform android, ios * @default false */ disableFocusIndicator?: boolean; /** * The `deviceId` of the camera to use. If provided, `position` is ignored. * @platform ios */ deviceId?: string; /** * On Android, attempts to bind a physical camera directly when `deviceId` refers to a physical lens. * Disabled by default because OEM support is inconsistent; when false, Android keeps the current logical-camera fallback behavior. * @default false * @platform android */ enablePhysicalDeviceSelection?: boolean; /** * The initial zoom level when starting the camera preview. * If the requested zoom level is not available, the native plugin will reject. * @default 1.0 * @platform android, ios * @since 2.2.0 */ initialZoomLevel?: number; /** * The vertical positioning of the camera preview. * @default "center" * @platform android, ios, web * @since 2.3.0 */ positioning?: CameraPositioning; /** * If true, enables video capture capabilities when the camera starts. * @default false * @platform android * @since 7.11.0 */ enableVideoMode?: boolean; /** * If true, forces the camera to start/restart even if it's already running or busy. * This will kill the current camera session and start a new one, ignoring all state checks. * @default false * @platform android, ios, web */ force?: boolean; /** * Sets the quality of video for recording. * Options: 'low', 'medium', 'high' * @note On Android requires 'enableVideoMode' to be true * @note Will affect the entire preview stream for iOS * @platform ios, android * @default "high" */ videoQuality?: 'low' | 'medium' | 'high';}CameraPreviewPictureOptions
Bagian berjudul “CameraPreviewPictureOptions”Mengatur opsi untuk mengambil gambar.
export interface CameraPreviewPictureOptions { /** * The maximum height of the picture in pixels. The image will be resized to fit within this height while maintaining aspect ratio. * If not specified the captured image will match the preview's visible area. */ height?: number; /** * The maximum width of the picture in pixels. The image will be resized to fit within this width while maintaining aspect ratio. * If not specified the captured image will match the preview's visible area. */ width?: number; /** * The quality of the captured image, from 0 to 100. * Does not apply to `.png` format. * @default 85 */ quality?: number; /** * The format of the captured image. * @default "jpeg" */ format?: PictureFormat; /** * If true, the captured image will be saved to the user's gallery. * @default false * @since 7.5.0 */ saveToGallery?: boolean; /** * If true, the plugin will attempt to add GPS location data to the image's EXIF metadata. * This may prompt the user for location permissions. * @default false * @since 7.6.0 */ withExifLocation?: boolean; /** * If true, the plugin will embed a timestamp in the top-right corner of the image. * @default false * @since 7.17.0 */ embedTimestamp?: boolean; /** * If true, the plugin will embed the current location in the top-right corner of the image. * Requires `withExifLocation` to be enabled. * @default false * @since 7.18.0 */ embedLocation?: boolean; /** * Sets the priority for photo quality vs. capture speed. * - "speed": Prioritizes faster capture times, may reduce image quality. * - "balanced": Aims for a balance between quality and speed. * - "quality": Prioritizes image quality, may reduce capture speed. * See https://developer.apple.com/documentation/avfoundation/avcapturephotosettings/photoqualityprioritization for details. * * @since 7.21.0 * @platform ios * @default "speed" */ photoQualityPrioritization?: 'speed' | 'balanced' | 'quality';}ExifData
Bagian berjudul “ExifData”Menggambarkan data EXIF yang diekstrak dari gambar.
export interface ExifData { [key: string]: any;}CameraSampleOptions
Bagian berjudul “CameraSampleOptions”Mengatur opsi untuk mengambil frame sampel dari pratinjau kamera.
export interface CameraSampleOptions { /** * The quality of the captured sample, from 0 to 100. * @default 85 */ quality?: number;}CameraPreviewFlashMode
Bagian berjudul “Mode Lampu Flash Kamera”Mode lampu flash yang tersedia untuk kamera. ‘torch’ adalah mode cahaya terus-menerus.
export type CameraPreviewFlashMode = 'off' | 'on' | 'auto' | 'torch';GridMode
Bagian berjudul “Mode Grid”export type GridMode = 'none' | '3x3' | '4x4';PermissionRequestOptions
Bagian berjudul “Opsi Permintaan Izin”export interface PermissionRequestOptions { disableAudio?: boolean; showSettingsAlert?: boolean; title?: string; message?: string; openSettingsButtonTitle?: string; cancelButtonTitle?: string;}CameraPermissionStatus
Bagian berjudul “Status Izin Kamera”export interface CameraPermissionStatus { camera: PermissionState; microphone?: PermissionState;}SupportedPictureSizes
Bagian berjudul “Ukuran Gambar yang Dapat Dihubungi”Mewakili ukuran gambar yang didukung untuk kamera yang menghadap ke arah tertentu.
export interface SupportedPictureSizes { /** The camera direction ("front" or "rear"). */ facing: string; /** A list of supported picture sizes for this camera. */ supportedPictureSizes: PictureSize[];}CameraOpacityOptions
Bagian berjudul “CameraOpacityOptions”Mengatur opsi untuk mengatur kejelasan kamera preview.
export interface CameraOpacityOptions { /** * The opacity percentage, from 0.0 (fully transparent) to 1.0 (fully opaque). * @default 1.0 */ opacity?: number;}CameraDevice
Bagian berjudul “CameraDevice”Mewakili kamera fisik pada perangkat (misalnya, kamera depan).
export interface CameraDevice { /** A unique identifier for the camera device. */ deviceId: string; /** A human-readable name for the camera device. */ label: string; /** The physical position of the camera on the device. */ position: CameraPosition; /** A list of all available lenses for this camera device. */ lenses: CameraLens[]; /** The overall minimum zoom factor available across all lenses on this device. */ minZoom: number; /** The overall maximum zoom factor available across all lenses on this device. */ maxZoom: number; /** Identifies whether the device is a logical camera (composed of multiple physical lenses). */ isLogical: boolean;}LensInfo
Bagian berjudul “LensInfo”Mewakili informasi rinci tentang lensa aktif saat ini.
export interface LensInfo { /** The focal length of the active lens in millimeters. */ focalLength: number; /** The device type of the active lens. */ deviceType: DeviceType; /** The base zoom ratio of the active lens (e.g., 0.5x, 1.0x). */ baseZoomRatio: number; /** The current digital zoom factor applied on top of the base zoom. */ digitalZoom: number;}Sumber Kebenaran
Bagian berjudul “Sumber Kebenaran”Halaman ini dihasilkan dari plugin’s src/definitions.ts. Re-run the sync when the public API berubah di upstream.