Empezar
Copie un prompt de configuración con los pasos de instalación y la guía de markdown completa para este plugin.
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.
Instalar
Sección titulada “Instalar”bun add @capgo/camera-previewbunx cap syncImportar
Sección titulada “Importar”import { CameraPreview } from '@capgo/camera-preview';API Resumen
Sección titulada “API Resumen”Inicia la vista previa de la cámara.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.start({} as CameraPreviewOptions);Detiene la vista previa de la cámara.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stop();capture
Sección titulada “capturar”Captura una imagen desde la cámara.
Si storeToFile se estableció true al iniciar la vista previa, el devuelto
value será una ruta de archivo absoluta en el dispositivo en lugar de una cadena base64. Utilice getBase64FromFilePath para obtener la cadena base64 desde la ruta de archivo.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.capture({} as CameraPreviewPictureOptions);captureSample
Sección titulada “capturarMuestra”Captura una sola imagen desde el flujo de visualización de la cámara.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.captureSample({} as CameraSampleOptions);getSupportedFlashModes
Sección titulada “obtenerModosDeFlashSoportados”Obtiene los modos de flash soportados por la cámara activa.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedFlashModes();setAspectRatio
Sección titulada “establecerAspecto”Establece el aspecto de la visualización de la cámara.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setAspectRatio({} as { aspectRatio: '4:3' | '16:9'; x?: number; y?: number });getAspectRatio
Sección titulada “obtenerAspecto”Obtiene el aspecto actual de la visualización de la cámara.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAspectRatio();setGridMode
Sección titulada “setGridMode”Establece el modo de la rejilla de la vista previa de la cámara.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setGridMode({} as { gridMode: GridMode });getGridMode
Sección titulada “getGridMode”Obtiene el modo de la rejilla actual de la vista previa de la cámara.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getGridMode();checkPermissions
Sección titulada “checkPermissions”Verifica el estado actual de permisos de la cámara (y opcionalmente del micrófono) sin mostrar el diálogo del sistema.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.checkPermissions();requestPermissions
Sección titulada “requestPermissions”Solicita permisos de la cámara (y opcionalmente del micrófono). Si los permisos ya están concedidos o denegados,
se devuelve el estado actual sin mostrar nada. Cuando showSettingsAlert es verdadero y los permisos están denegados,
presenta una alerta específica de la plataforma que guía al usuario a la configuración de la aplicación.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.requestPermissions();getHorizontalFov
Sección titulada “getHorizontalFov”Obtiene el campo de visión horizontal para la cámara activa. Nota: Esto puede ser una estimación en algunos dispositivos.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getHorizontalFov();getSupportedPictureSizes
Sección titulada “getSupportedPictureSizes”Obtiene las tamaños de imagen admitidos para todas las cámaras.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedPictureSizes();setFlashMode
Sección titulada “setFlashMode”Establece el modo de flash para la cámara activa.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFlashMode({} as { flashMode: CameraPreviewFlashMode | string });Alternar entre las cámaras frontal y trasera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.flip();setOpacity
Sección titulada “setOpacity”Establece la opacidad de la vista previa de la cámara.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setOpacity({} as CameraOpacityOptions);stopRecordVideo
Sección titulada “stopRecordVideo”Detiene una grabación de video en curso.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopRecordVideo();startRecordVideo
Sección titulada “startRecordVideo”Inicia la grabación de un video.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.startRecordVideo({} as CameraPreviewOptions);isRunning
Sección titulada “isRunning”Verifica si la vista previa de la cámara está en ejecución actualmente.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.isRunning();getAvailableDevices
Sección titulada “dispositivos disponibles”Obtiene todos los dispositivos de cámara disponibles.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAvailableDevices();getZoom
Sección titulada “zoom”Obtiene el estado de zoom actual, incluyendo mínimo/máximo y información de lente.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoom();getZoomButtonValues
Sección titulada “valores de botón de zoom”Devuelve valores de botón de zoom para cambiar rápidamente.
- iOS/Android: incluye 0.5 si ultra-ancho disponible; 1 y 2 si ancho disponible; 3 si telefotográfico disponible
- Web: no soportado
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoomButtonValues();setZoom
Sección titulada “setZoom”Establece el nivel de zoom de la cámara.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setZoom({} as { level: number; ramp?: boolean; autoFocus?: boolean });getFlashMode
Sección titulada “getFlashMode”Obtiene el modo de flash actual.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getFlashMode();setDeviceId
Sección titulada “setDeviceId”Cambia la cámara activa a la que tiene el identificador especificado. deviceId.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setDeviceId({} as { deviceId: string });getDeviceId
Sección titulada “getDeviceId”Obtiene el ID del dispositivo de cámara que está actualmente vinculado. En Android, si una solicitud de lente física se reemplaza por una cámara lógica, devuelve el ID de la cámara lógica vinculada.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getDeviceId();getPreviewSize
Sección titulada “obtener tamaño de vista previa”Obtiene el tamaño y posición actual de la vista previa.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getPreviewSize();setPreviewSize
Sección titulada “establecer tamaño de vista previa”Establece el tamaño y posición de la vista previa.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setPreviewSize({} as { x?: number; y?: number; width: number; height: number });Establece el enfoque de la cámara en un punto específico en la vista previa.
Nota: El plugin no adjunta ningún manipulador de gestos de toque nativos. Maneje los toques en su HTML/JS (por ejemplo, en la interfaz de usuario que se superpone), luego pase coordenadas normalizadas aquí.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFocus({} as { x: number; y: number });deleteFile
Sección titulada “eliminar archivo”Elimina un archivo en el dispositivo en el path absoluto dado.
Utilice esto para eliminar rápidamente imágenes temporales creadas con storeToFile.
En web, esto no está soportado y lanzará una excepción.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.deleteFile({} as { path: string });getSafeAreaInsets
Sección titulada “getSafeAreaInsets”Obtiene los rellenos de área segura para dispositivos. Devuelve el relleno de área segura orientado a la orientación y la orientación actual. En modo retrato: devuelve el relleno superior (notch en la parte superior). En modo paisaje: devuelve el relleno izquierdo (notch movido al lado). Esto se dirige específicamente a la zona de corte (notch, agujero de puntuación, etc.) que todos los teléfonos modernos tienen.
Android: Los valores devueltos en dp (píxeles lógicos). iOS: Los valores devueltos en píxeles físicos, excluyendo la barra de estado (solo tamaño de notch/corte puro).
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSafeAreaInsets();getOrientation
Sección titulada “getOrientation”Obtiene la orientación actual del dispositivo en un formato cruz- plataforma.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getOrientation();getExposureModes
Sección titulada “getExposureModes”Devuelve los modos de exposición soportados por la cámara activa. Los modos pueden incluir: ‘bloqueado’, ‘automático’, ‘continuo’, ‘personalizado’.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureModes();getExposureMode
Sección titulada “getExposureMode”Devuelve el modo de exposición actual.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureMode();setExposureMode
Sección titulada “setExposureMode”Establece el modo de exposición.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureMode({} as { mode: ExposureMode });getExposureCompensationRange
Sección titulada “getExposureCompensationRange”Devuelve el rango de compensación de exposición (EV bias) soportado.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensationRange();getExposureCompensation
Sección titulada “getExposureCompensation”Devuelve la compensación de exposición actual (EV bias).
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensation();setExposureCompensation
Sección titulada “setExposureCompensation”Establece la compensación de exposición (EV bias). El valor se ajustará a un rango.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureCompensation({} as { value: number });Referencia de tipo
Sección titulada “Referencia de tipo”CameraPreviewOptions
Sección titulada “Opciones de visor de cámara”Define las opciones de configuración para iniciar el visor de cámara.
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
Sección titulada “Opciones de captura de imagen”Define las opciones para capturar una imagen.
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
Sección titulada “Datos EXIF”Representa los datos EXIF extraídos de una imagen.
export interface ExifData { [key: string]: any;}CameraSampleOptions
Sección titulada “Opciones de la cámara de muestra”Define las opciones para capturar un marco de muestra de la vista previa de la cámara.
export interface CameraSampleOptions { /** * The quality of the captured sample, from 0 to 100. * @default 85 */ quality?: number;}CameraPreviewFlashMode
Sección titulada “Modo de flash de la vista previa de la cámara”Los modos de flash disponibles para la cámara. ‘torch’ es un modo de luz continua.
export type CameraPreviewFlashMode = 'off' | 'on' | 'auto' | 'torch';export type GridMode = 'none' | '3x3' | '4x4';PermissionRequestOptions
Sección titulada “Opciones de solicitud de permiso”export interface PermissionRequestOptions { disableAudio?: boolean; showSettingsAlert?: boolean; title?: string; message?: string; openSettingsButtonTitle?: string; cancelButtonTitle?: string;}CameraPermissionStatus
Sección titulada “Estado de permiso de cámara”export interface CameraPermissionStatus { camera: PermissionState; microphone?: PermissionState;}SupportedPictureSizes
Sección titulada “Tamaños de imagen soportados”Representa los tamaños de imagen soportados para una cámara que enfrenta una cierta dirección.
export interface SupportedPictureSizes { /** The camera direction ("front" or "rear"). */ facing: string; /** A list of supported picture sizes for this camera. */ supportedPictureSizes: PictureSize[];}CameraOpacityOptions
Sección titulada “Opciones de opacidad de cámara”Define las opciones para establecer la opacidad de la vista previa de la cámara.
export interface CameraOpacityOptions { /** * The opacity percentage, from 0.0 (fully transparent) to 1.0 (fully opaque). * @default 1.0 */ opacity?: number;}CameraDevice
Sección titulada “Dispositivo de cámara”Representa una cámara física en el dispositivo (por ejemplo, la cámara frontal).
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;}Representa la información detallada del lente actualmente activo.
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;}Fuente de Verdad
Sección titulada “Fuente de Verdad”Esta página se genera desde el plugin’s src/definitions.tsRe-ejecutar la sincronización cuando el público API cambie en la fuente.