Einstieg
Eine Einrichtungsvorlage mit den Installationsanweisungen und der vollständigen Markdown-Guideline für diesen Plugin kopieren.
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.
Installieren
Abschnitt mit dem Titel „Installieren“bun add @capgo/camera-previewbunx cap syncImportieren
Abschnitt mit dem Titel „Importieren“import { CameraPreview } from '@capgo/camera-preview';API Übersicht
Abschnitt mit dem Titel „API Übersicht“start
StartStartet die Kamera-Vorschau.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.start({} as CameraPreviewOptions);Beendet die Kamera-Vorschau.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stop();Ermittelt ein Bild von der Kamera.
Wenn storeToFile war auf true beim Starten der Vorschau, das zurückgegebene
value wird ein absoluter Dateipfad auf dem Gerät anstelle einer Base64-Zeichenfolge sein. Verwenden Sie getBase64FromFilePath, um die Base64-Zeichenfolge aus dem Dateipfad zu erhalten.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.capture({} as CameraPreviewPictureOptions);captureSample
Abschnitt mit dem Titel “captureSample”Ein einzelnes Bild aus dem Kameravorschau-Stream aufnimmt.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.captureSample({} as CameraSampleOptions);getSupportedFlashModes
Abschnitt mit dem Titel “getSupportedFlashModes”Die von der aktiven Kamera unterstützten Blitzmodi erhält.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedFlashModes();setAspectRatio
Abschnitt mit dem Titel “setAspectRatio”Die Seitenverhältnisse der Kameravorschau setzt.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setAspectRatio({} as { aspectRatio: '4:3' | '16:9'; x?: number; y?: number });getAspectRatio
Abschnitt mit dem Titel “getAspectRatio”Die aktuellen Seitenverhältnisse der Kameravorschau erhält.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAspectRatio();setGridMode
Abschnitt mit dem Titel “setGridMode”Setzt die Grid-Modus des Kamera-Vorschau-Überlays.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setGridMode({} as { gridMode: GridMode });getGridMode
Abschnitt mit dem Titel “getGridMode”Liefert den aktuellen Grid-Modus des Kamera-Vorschau-Überlays.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getGridMode();checkPermissions
Abschnitt mit dem Titel “checkPermissions”Überprüft den aktuellen Kamera- (und optional Mikrofon-) Berechtigungsstatus ohne das Systemdialog zu öffnen.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.checkPermissions();requestPermissions
Abschnitt mit dem Titel “requestPermissions”Bittet um Kamera- (und optional Mikrofon-) Berechtigungen. Wenn Berechtigungen bereits erteilt oder abgelehnt wurden,
wird der aktuelle Status ohne Aufforderung zurückgegeben. Wenn showSettingsAlert wahr ist und Berechtigungen abgelehnt wurden,
wird eine plattform-spezifische Warnung zur Anleitung des Benutzers zu den App-Einstellungen vorgestellt.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.requestPermissions();getHorizontalFov
Abschnitt mit dem Titel „getHorizontalFov“Ermittelt den horizontalen Blickwinkel für die aktuelle Kamera. Hinweis: Dies kann bei einigen Geräten eine Schätzung sein.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getHorizontalFov();getSupportedPictureSizes
Abschnitt mit dem Titel „getSupportedPictureSizes“Ermittelt die unterstützten Bildgrößen für alle Kameras.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedPictureSizes();setFlashMode
Abschnitt mit dem Titel „setFlashMode“Setzt den Blitzmodus für die aktuelle Kamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFlashMode({} as { flashMode: CameraPreviewFlashMode | string });Schaltet zwischen der Vorder- und Rückseite der Kamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.flip();setOpacity
Abschnitt mit dem Titel „setOpacity“Setzt die Opazität der Kamera-Vorschau.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setOpacity({} as CameraOpacityOptions);stopRecordVideo
Abschnitt mit dem Titel „stopRecordVideo“Beendet ein laufendes Video-Recording.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopRecordVideo();startRecordVideo
Abschnitt mit dem Titel „startRecordVideo“Beginnt ein Video-Recording.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.startRecordVideo({} as CameraPreviewOptions);isRunning
Abschnitt mit dem Titel „isRunning“Überprüft, ob die Kamera-Vorschau derzeit läuft.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.isRunning();getAvailableDevices
Abschnitt mit dem Titel “getAvailableDevices”Alle verfügbaren Kamera-Geräte abrufen.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAvailableDevices();Derzeitiger Zoom-Zustand, einschließlich Mindest- und Maximalwerte sowie aktuelle Objektiv-Informationen, abrufen.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoom();getZoomButtonValues
Abschnitt mit dem Titel “getZoomButtonValues”Wertelisten für das schnelle Wechseln des Zooms zurückgeben.
- iOS/Android: enthält 0,5, wenn Ultra-Wide verfügbar ist; 1 und 2, wenn Wide verfügbar ist; 3, wenn Telephoto verfügbar ist
- Web: nicht unterstützt
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoomButtonValues();Die Zoomstufe der Kamera einstellt.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setZoom({} as { level: number; ramp?: boolean; autoFocus?: boolean });getFlashMode
Abschnitt mit dem Titel “getFlashMode”Den aktuellen Blitzmodus abruft.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getFlashMode();setDeviceId
Abschnitt mit dem Titel “setDeviceId”Die aktive Kamera auf die mit der angegebenen ID auswechselt. deviceId.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setDeviceId({} as { deviceId: string });getDeviceId
Abschnitt mit dem Titel “getDeviceId”Die ID des Kamera-Geräts abruft, das derzeit gebunden ist. Bei Android-Systemen, wenn eine physische-Linsen-Anfrage auf eine logische Kamera zurückfällt, gibt dies die ID der gebundenen logischen Kamera zurück.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getDeviceId();getPreviewSize
Abschnitt mit dem Titel “getPreviewSize”Ermittelt die aktuelle Vorschaugröße und -position.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getPreviewSize();setPreviewSize
Abschnitt mit dem Titel “setPreviewSize”Setzt die Vorschaugröße und -position.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setPreviewSize({} as { x?: number; y?: number; width: number; height: number });Setzt den Kamerafokus auf einen bestimmten Punkt in der Vorschau.
Hinweis: Das Plugin bindet keine native Berührungszu-Fokus-Gesten-Handler. Behandeln Sie Berührungen in Ihrer HTML/JS (z. B. auf der überlagerten UI), dann geben Sie normierte Koordinaten hier an.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFocus({} as { x: number; y: number });deleteFile
Abschnitt mit dem Titel “deleteFile”Löscht ein Datei an der angegebenen absoluten Pfad auf dem Gerät.
Verwenden Sie dies, um sich schnell vorübergehende Bilder zu entsorgen, die mit “}__CAPGO_KEEP_0__” erstellt wurden. storeToFile.
Auf Web wird dies nicht unterstützt und wird einen Fehler werfen.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.deleteFile({} as { path: string });getSafeAreaInsets
Abschnitt mit Titel „getSafeAreaInsets“Ermittelt die sicheren Bereichs-Einstellungen für Geräte. Gibt die orientierungsbewusste Notch/Kamera-Schnittstelle-Einrückung und die aktuelle Orientierung zurück. Bei Portrait-Modus: Gibt die obere Einrückung (Notch oben) zurück. Bei Landschaftsmodus: Gibt die linke Einrückung (Notch an der Seite) zurück. Dies zielt speziell auf die Schnittstelle-Bereich (Notch, Loch, usw.) ab, die alle modernen Smartphones haben.
Android: Werte werden in dp (logische Pixel) zurückgegeben. iOS: Werte werden in physischen Pixeln, ohne Statusleiste (nur reine Notch/Schnittstelle-Größe) zurückgegeben.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSafeAreaInsets();getOrientation
Abschnitt mit Titel „getOrientation“Ermittelt die aktuelle Geräteorientierung in einer plattformübergreifenden Format.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getOrientation();getExposureModes
Abschnitt mit Titel „getExposureModes“Gibt die von der aktiven Kamera unterstützten Belichtungsmodi zurück. Modi können 'eingefroren', 'automatisch', 'fortlaufend', 'benutzerdefiniert' umfassen.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureModes();getExposureMode
Abschnitt mit dem Titel „getExposureMode“Gibt den aktuellen Belichtungsmodus zurück.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureMode();setExposureMode
Abschnitt mit dem Titel „setExposureMode“Setzt den Belichtungsmodus.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureMode({} as { mode: ExposureMode });getExposureCompensationRange
Abschnitt mit dem Titel „getExposureCompensationRange“Gibt den Bereich der Belichtungskompensation (EV-Bias) zurück.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensationRange();getExposureCompensation
Abschnitt mit dem Titel „getExposureCompensation“Gibt den aktuellen Belichtungskompensation (EV-Bias) zurück.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensation();setExposureCompensation
Abschnitt mit dem Titel ‘setExposureCompensation’Setzt die Belichtungsanpassung (EV-Bias). Der Wert wird auf den Bereich begrenzt.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureCompensation({} as { value: number });Typenreferenz
Abschnitt mit dem Titel ‘Typenreferenz’CameraPreviewOptions
Abschnitt mit dem Titel ‘CameraPreviewOptions’Definiert die Konfigurationsoptionen für das Starten des Kameravorschaufensters.
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
Abschnitt mit dem Titel ‘CameraPreviewPictureOptions’Definiert die Optionen für die Aufnahme einer Aufnahme.
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';}Darstellt EXIF-Daten, die aus einem Bild extrahiert wurden.
export interface ExifData { [key: string]: any;}CameraSampleOptions
Abschnitt mit dem Titel “CameraSampleOptions”Definiert die Optionen für die Aufnahme eines Sample-Frames aus der Kamera-Vorschau.
export interface CameraSampleOptions { /** * The quality of the captured sample, from 0 to 100. * @default 85 */ quality?: number;}CameraPreviewFlashMode
Abschnitt mit dem Titel “CameraPreviewFlashMode”Die verfügbaren Blitz-Modi für die Kamera. ‘torch’ ist ein kontinuierlicher Lichtmodus.
export type CameraPreviewFlashMode = 'off' | 'on' | 'auto' | 'torch';export type GridMode = 'none' | '3x3' | '4x4';PermissionRequestOptions
Abschnitt mit dem Titel “PermissionRequestOptions”export interface PermissionRequestOptions { disableAudio?: boolean; showSettingsAlert?: boolean; title?: string; message?: string; openSettingsButtonTitle?: string; cancelButtonTitle?: string;}CameraPermissionStatus
Abschnitt mit dem Titel “CameraPermissionStatus”export interface CameraPermissionStatus { camera: PermissionState; microphone?: PermissionState;}SupportedPictureSizes
Abschnitt mit dem Titel “SupportedPictureSizes”Stellt die unterstützten Bildgrößen für eine Kamera in einer bestimmten Richtung dar.
export interface SupportedPictureSizes { /** The camera direction ("front" or "rear"). */ facing: string; /** A list of supported picture sizes for this camera. */ supportedPictureSizes: PictureSize[];}CameraOpacityOptions
Abschnitt mit dem Titel “CameraOpacityOptions”Legt die Optionen für die Einstellung der Opazität der Kameravorschau fest.
export interface CameraOpacityOptions { /** * The opacity percentage, from 0.0 (fully transparent) to 1.0 (fully opaque). * @default 1.0 */ opacity?: number;}CameraDevice
Abschnitt mit dem Titel “CameraDevice”Stellt eine physische Kamera auf dem Gerät dar (z.B. die Frontkamera).
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;}Detailliertes Informationsblatt über die derzeit aktive Linse.
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;}Quellwahrheit
Abschnitt mit dem Titel „Quellwahrheit“Diese Seite wurde aus dem Plugin generiert. src/definitions.tsRe-run die Synchronisation, wenn die öffentliche API upstream geändert wurde.
Fortsetzung von Getting Started
Abschnitt mit dem Titel „Fortsetzung von Getting Started“Wenn Sie native Medien- und Interfaceverhalten planen, verbinden Sie es mit Getting Started um native Medien- und Interfaceverhalten zu planen, verbinden Sie es mit Mit @capgo/camera-preview für die native Fähigkeit in @capgo/camera-preview, Mit @capgo/capacitor-live-aktivitäten für die native Fähigkeit in @capgo/capacitor-live-aktivitäten, @capgo/capacitor-live-aktivitäten für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten, Mit @capgo/capacitor-video-player für die native Fähigkeit in Mit @capgo/capacitor-video-player und @capgo/capacitor-video-player für die Implementierungsdetails in @capgo/capacitor-video-player.