Getting Started
Ein Setup-Prompt 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“Sie können unsere AI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie den Capgo-Fähigkeiten Ihre AI-Werkzeug hinzufügen, indem Sie folgenden Befehl ausführen:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsVerwenden Sie dann folgende Anfrage:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/camera-preview` plugin in my project.Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und folgen Sie den plattform-spezifischen Anweisungen unten:
bun add @capgo/camera-previewbunx cap syncImportieren
Abschnitt mit dem Titel „Import“import { CameraPreview } from '@capgo/camera-preview';API Übersicht
Abschnitt mit dem Titel „API Übersicht“Die Kamera-Vorschau startet.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.start({} as CameraPreviewOptions);Die Kamera-Vorschau beendet.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stop();Ein Bild von der Kamera aufnimmt.
Wenn storeToFile __CAPGO_KEEP_0__ true wird auf
value wenn der Vorschau-Modus gestartet wird, wird das zurückgegebene
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.capture({} as CameraPreviewPictureOptions);captureSample
Zwischenablage kopierenAbschnitt mit dem Titel “captureSample”
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.captureSample({} as CameraSampleOptions);getSupportedFlashModes
Zwischenablage kopierenAbschnitt mit dem Titel “getSupportedFlashModes”
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedFlashModes();setAspectRatio
Zwischenablage kopierenSetze den Aspektverhältnis der Kameravorschau.
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”Ermittelt das aktuelle Aspektverhältnis der Kameravorschau.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAspectRatio();setGridMode
Abschnitt mit dem Titel “setGridMode”Setzt das Gittermodus der Kameravorschau-Überlagerung.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setGridMode({} as { gridMode: GridMode });getGridMode
Abschnitt mit dem Titel “getGridMode”Ermittelt das aktuelle Gittermodus der Kameravorschau-Überlagerung.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getGridMode();checkPermissions
Abschnitt mit dem Titel “checkPermissions”Überprüft den aktuellen Stand der Kamera (und optional der Mikrofon)-Erlaubnisstatus 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)-Erlaubnis. Wenn Erlaubnis bereits erteilt oder abgelehnt wurde,
wird der aktuelle Status ohne Aufforderung zurückgegeben. Wenn showSettingsAlert true ist und Erlaubnis abgelehnt wurde,
wird eine plattform-spezifische Warnung vorgestellt, die den Benutzer zu den App-Einstellungen leitet.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.requestPermissions();getHorizontalFov
Abschnitt mit dem Titel “getHorizontalFov”Ermittelt den horizontalen Gesichtswinkel für die aktive Kamera. Hinweis: Dies kann eine Schätzung auf bestimmten Geräten 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 aktive Kamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFlashMode({} as { flashMode: CameraPreviewFlashMode | string });Schaltet zwischen der Vorder- und der Rückkamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.flip();setOpacity
Abschnitt mit dem Titel „setOpacity”Setzt die Opazität der Kameravorschau.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setOpacity({} as CameraOpacityOptions);stopRecordVideo
Abschnitt mit dem Titel „stopRecordVideo”Beendet ein laufendes Videoaufnahmeverfahren.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopRecordVideo();startRecordVideo
Abschnitt mit dem Titel “startRecordVideo”Ermöglicht das Aufnehmen eines Videos.
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”Ermöglicht das Abrufen aller verfügbaren Kamera-Geräte.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAvailableDevices();Ermöglicht das Abrufen des aktuellen Zoom-Zustands, einschließlich Min/Max und aktuellem Objektiv-Info.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoom();getZoomButtonValues
Abschnitt mit dem Titel “getZoomButtonValues”Gibt die Werte der Zoom-Taste für schnelles Wechseln zurück.
- iOS/Android: enthält 0,5, wenn Ultra-Wide verfügbar ist; 1 und 2, wenn breit verfügbar ist; 3, wenn Telephoto verfügbar ist
- Web: nicht unterstützt
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoomButtonValues();Setzt die Zoom-Einstellung der Kamera.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setZoom({} as { level: number; ramp?: boolean; autoFocus?: boolean });getFlashMode
Abschnitt mit dem Titel “getFlashMode”Gibt den aktuellen Blitzmodus zurück.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getFlashMode();setDeviceId
Abschnitt mit dem Titel “setDeviceId”Wechselt die aktive Kamera auf die mit der angegebenen deviceId.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setDeviceId({} as { deviceId: string });getDeviceId
Abschnitt mit dem Titel “getDeviceId”Ermittelt die ID des derzeit gebundenen Kamera-Geräts. Bei Android-Systemen, wenn eine physische-Linsen-Anfrage auf eine logische Kamera zurückfällt, gibt diese 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 derzeitige Vorschau-Größe und -Position.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getPreviewSize();setPreviewSize
Abschnitt mit dem Titel “setPreviewSize”Setzt die Vorschau-Größe und -Position.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setPreviewSize({} as { x?: number; y?: number; width: number; height: number });Setzt die Kamera-Belichtung auf einen bestimmten Punkt im Vorschau-Bild.
Hinweis: Der Plugin fügt keine native Berührungsfokusbefehls-Handler hinzu. Behandeln Sie Berührungen in Ihrer HTML/JS (z.B. auf der überlagerten UI), dann geben Sie normalisierte Koordinaten hier an.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFocus({} as { x: number; y: number });deleteFile
Abschnitt mit dem Titel “Datei löschen”Löscht eine Datei an der angegebenen absoluten Pfad auf dem Gerät.
Verwenden Sie dies, um temporäre Bilder schnell zu löschen, die mit
.
Erstellt wurden.
Auf dem Web wird dies nicht unterstützt und wird einen Fehler auslösen. storeToFileAuf die Zwischenablage kopieren
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.deleteFile({} as { path: string });Android: Werte in dp (logische Pixel) zurückgegeben. iOS: Werte in physischen Pixel zurückgegeben, ohne Statusleiste (nur reine Notch-/Schnittstelle-Größe).
Auf die Zwischenablage kopieren
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSafeAreaInsets();getOrientation
Abschnitt mit dem Titel “Orientierung abrufen”Ermittelt die aktuelle Geräteorientierung in einer plattformübergreifenden Format.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getOrientation();getExposureModes
Abschnitt mit dem Titel “getExposureModes”Gibt die von der aktiven Kamera unterstützten Belichtungsmodi zurück. Die 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 die unterstützte Bereich für die Belichtungsentsprechung (EV-Verschiebung) zurück.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensationRange();getExposureCompensation
Abschnitt mit dem Titel “getExposureCompensation”Gibt die aktuelle Belichtungsentsprechung (EV-Verschiebung) zurück.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensation();setExposureCompensation
Abschnitt mit dem Titel “setExposureCompensation”Setzt die Belichtungsentsprechung (EV-Verschiebung). Der Wert wird auf den Bereich begrenzt.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureCompensation({} as { value: number });Typenverweis
Abschnitt mit dem Titel “Type Reference”CameraPreviewOptions
Abschnitt mit dem Titel “CameraPreviewOptions”Definiert die Konfigurationsoptionen für das Starten des Kameravorschau.
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 Titel “CameraPreviewPictureOptions”Legt die Optionen für die Aufnahme einer Bildaufnahme fest.
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
Abschnitt mit Titel “ExifData”Stellt die EXIF-Daten dar, die aus einem Bild extrahiert wurden.
export interface ExifData { [key: string]: any;}CameraSampleOptions
Abschnitt mit Titel “CameraSampleOptions”Legt die Optionen für die Aufnahme eines Sample-Frames aus der Kamera-Vorschau fest.
export interface CameraSampleOptions { /** * The quality of the captured sample, from 0 to 100. * @default 85 */ quality?: number;}CameraPreviewFlashMode
Abschnitt mit Titel “CameraPreviewFlashMode”Die verfügbaren Blitzmodi 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”Darstellt die unterstützten Bildgrößen für eine Kamera in einer bestimmten Richtung.
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”Definiert die Optionen für die Einstellung der Opazität der Kameravorschau.
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 “Kamera-Gerät”Stellt ein physisches Kamera-Gerät 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;}Stellt die detaillierten Informationen der derzeit aktiven Linse dar.
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;}Quelle der Wahrheit
Abschnitt mit dem Titel “Quelle der Wahrheit”Diese Seite wird von dem Plugin generiert. src/definitions.ts. Wenn sich die öffentliche API im Hintergrund ändert, führen Sie die Synchronisation erneut durch.
Fortsetzen Sie von Getting Started
Abschnitt mit dem Titel „Weitermachen von Getting Started“Wenn Sie Getting Started zur Planung von nativen Medien und Schnittstellenverhalten verwenden Using @capgo/camera-preview Verwenden Sie @capgo/camera-preview Using @capgo/capacitor-live-activities Verwenden Sie @capgo/capacitor-live-activities für die native Fähigkeit in Verwenden Sie @capgo/capacitor-live-activities, @capgo/capacitor-live-activities für die Implementierungsdetails in @capgo/capacitor-live-activities, Verwenden Sie @capgo/capacitor-video-player @capgo/capacitor-Video-Player für die Implementierungsdetails in @capgo/capacitor-Video-Player.