Anleitung
Camera Preview in Capacitor nutzen
Auf dem Gerät testen
Lade die Capgo App herunter und scanne den QR code.
Nutzung von @capgo/camera-preview
Die Hauptschnittstelle für das CameraPreview Plugin.
Installieren
bun add @capgo/camera-preview
bunx cap sync
bunx cap sync kopiert den nativen code des Plugins in deine nativen Projekte. Nach jedem Plugin-Upgrade erneut ausführen.
Importieren
import { CameraPreview } from '@capgo/camera-preview';
API auf einen Blick
| Methode | Beschreibung |
|---|---|
start |
Startet die Kamera-Vorschau. |
stop |
Stoppt die Kamera-Vorschau. |
capture |
Macht ein Foto mit der Kamera. |
captureSample |
Erfasst einen einzelnen Frame aus dem Kamera-Preview-Stream. |
startBarcodeScanner |
Startet das Barcode-Scanning im aktiven Kamera-Preview. |
stopBarcodeScanner |
Stoppt das Barcode-Scanning, lässt das Kamera-Preview aber weiterlaufen. |
getSupportedFlashModes |
Ruft die unterstützten Blitzmodi der aktiven Kamera ab. |
setAspectRatio |
Legt das Seitenverhältnis der Kamera-Vorschau fest. |
getAspectRatio |
Ruft das aktuelle Seitenverhältnis der Kamera-Vorschau ab. |
setGridMode |
Legt den Rastermodus des Kamera-Vorschau-Overlays fest. |
getGridMode |
Ruft den aktuellen Rastermodus des Kamera-Vorschau-Overlays ab. |
checkPermissions |
Prüft den aktuellen Kamera- (und optional Mikrofon-) Berechtigungsstatus, ohne den Systemdialog anzuzeigen. |
requestPermissions |
Fordert Kamera- (und optionale Mikrofon-) Berechtigungen an. Sind diese bereits erteilt oder abgelehnt, wird der Status ohne Prompt zurückgegeben. Wenn showSettingsAlert true ist und die Berechtigungen abgelehnt wurden, erscheint ein plattformspezifischer Alert, der den Nutzer zu den App-Einstellungen leitet. |
getHorizontalFov |
Gibt das horizontale Sichtfeld (FoV) der aktiven Kamera zurück. Hinweis: Dies kann auf einigen Geräten nur ein Schätzwert sein. |
getSupportedPictureSizes |
Gibt die unterstützten Bildgrößen für alle Kameras zurück. |
setFlashMode |
Legt den Blitzmodus für die aktive Kamera fest. |
flip |
Wechselt zwischen der Front- und Rückkamera. |
setOpacity |
Legt die Deckkraft der Kamera-Vorschau fest. |
stopRecordVideo |
Stoppt eine laufende Videoaufnahme. |
startRecordVideo |
Startet die Videoaufnahme. |
setVideoQuality |
Legt die Videoqualität für die aktive Kamera-Session fest. |
getVideoQuality |
Gibt die aktuelle Videoqualität zurück. |
getSupportedVideoQualities |
Gibt die von der aktiven Kamera unterstützten Videoqualitäten zurück. |
setVideoCodec |
Legt den beim Aufnehmen verwendeten Video-Codec fest. |
getVideoCodec |
Gibt den aktuell für die Aufnahme verwendeten Video-Codec zurück. |
getSupportedVideoCodecs |
Gibt die von der aktiven Kamera unterstützten Video-Codecs zurück. |
isVideoStabilizationSupported |
Prüft, ob die aktive Kamera Videostabilisierung unterstützt. |
getSupportedVideoStabilizationModes |
Gibt die von der aktiven Kamera unterstützten Videostabilisierungsmodi zurück. |
getVideoStabilizationMode |
Gibt den aktuellen Videostabilisierungsmodus zurück. |
setVideoStabilizationMode |
Legt den Videostabilisierungsmodus für die Aufnahme fest. Kann während einer laufenden Aufnahme nicht geändert werden. Sie können auch videoStabilizationMode in startRecordVideo() options. |
isRunning |
Prüft, ob die Kamera-Vorschau gerade läuft. |
getAvailableDevices |
Gibt alle verfügbaren Kamera-Geräte zurück. |
getZoom |
Ruft den aktuellen Zoom-Status ab, inklusive Min/Max und Infos zur aktuellen Linse. |
getZoomButtonValues |
Gibt Zoom-Button-Werte für schnelles Umschalten zurück. - iOS/Android: 0.5 (falls Ultraweitwinkel vorhanden), 1 und 2 (falls Weitwinkel vorhanden), 3 (falls Teleobjektiv vorhanden) - Web: nicht unterstützt. |
setZoom |
Setzt die Zoomstufe der Kamera. |
getFlashMode |
Ruft den aktuellen Blitzmodus ab. |
setDeviceId |
Wechselt die aktive Kamera zur Kamera mit der angegebenen deviceId. |
getDeviceId |
Ruft die ID des aktuell gebundenen Kamerageräts ab. Auf Android: Fällt eine Anfrage für eine physische Linse auf eine logische Kamera zurück, wird die ID der gebundenen logischen Kamera zurückgegeben. |
getPreviewSize |
Ruft die aktuelle Vorschaugröße und -position ab. |
setPreviewSize |
Setzt die Vorschaugröße und -position. |
setFocus |
Setzt den Kamerafokus auf einen bestimmten Punkt in der Vorschau. |
deleteFile |
Löscht eine Datei unter dem angegebenen absoluten Pfad auf dem Gerät. Nutzen Sie dies zum schnellen Aufräumen temporärer Bilder, die mit storeToFile. Im Web wird dies nicht unterstützt und wirft einen Fehler. |
getSafeAreaInsets |
Ruft die Safe Area Insets für Geräte ab. Gibt den orientierungsabhängigen Notch-/Kamera-Cutout-Inset und die aktuelle Ausrichtung zurück. Im Portrait-Modus: oberer Inset (Notch oben). Im Landscape-Modus: linker Inset (Notch an der Seite). Dies zielt speziell auf den Cutout-Bereich (Notch, Punch Hole etc.) ab, den alle modernen Smartphones haben. |
getOrientation |
Gibt die aktuelle Geräteorientierung in einem plattformübergreifenden Format zurück. |
getExposureModes |
Gibt die von der aktiven Kamera unterstützten Belichtungsmodi zurück. Modi können sein: 'locked', 'auto', 'continuous', 'custom'. |
getExposureMode |
Gibt den aktuellen Belichtungsmodus zurück. |
setExposureMode |
Legt den Belichtungsmodus fest. |
getExposureCompensationRange |
Gibt den unterstützten Bereich für die Belichtungskorrektur (EV-Bias) zurück. |
getExposureCompensation |
Gibt die aktuelle Belichtungskorrektur (EV-Bias) zurück. |
setExposureCompensation |
Legt die Belichtungskorrektur (EV-Bias) fest. Der Wert wird auf den Bereich begrenzt. |
getWhiteBalanceModes |
Gibt die von der aktiven Kamera unterstützten Weißabgleich-Modi zurück. Modi können sein: 'AUTO', 'LOCK', 'CONTINUOUS'. CUSTOM wird erst aufgeführt, sobald manuelle Gains unterstützt werden. |
getWhiteBalanceMode |
Gibt den aktuellen Weißabgleich-Modus zurück. |
setWhiteBalanceMode |
Legt den Weißabgleich-Modus fest. CONTINUOUS hält den automatischen Weißabgleich aktiv (empfohlen; vermeidet einen warmen Gelbstich), LOCK friert die aktuellen Gains ein, AUTO führt eine einmalige Anpassung durch. CUSTOM ist reserviert und wird abgelehnt, bis manuelle Gains unterstützt werden. |
getSupportedVideoFrameRates |
Listet die von der aktiven Kamera für das aktuelle Format unterstützten Video-Bildraten auf. Die unterstützten Werte hängen von der gewählten Kamera, dem Objektiv und der Videoqualität ab. |
getVideoFrameRate |
Gibt die konfigurierte Video-Bildrate der aktiven Kamera zurück. Unter Android kann die tatsächliche Aufnahmerate bei wenig Licht oder thermischer Belastung variieren. |
setVideoFrameRate |
Setzt die Ziel-Bildrate für die aktive Kamera-Session. Es wird empfohlen, frameRate zu startRecordVideo() beim Starten einer Aufnahme. Nicht unterstützte Werte werden mit einer klaren Fehlermeldung abgelehnt. |
Beispiele
start()
Startet die Kamera-Vorschau.
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.start({ parent: 'parent' });
console.log(result);
stop()
Stoppt die Kamera-Vorschau.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stop();
capture()
Macht ein Foto mit der Kamera.
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.capture({ height: 1920 });
console.log(result);
captureSample()
Erfasst einen einzelnen Frame aus dem Kamera-Preview-Stream.
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.captureSample({
quality: 85,
mirrorFrontCamera: false,
});
console.log(result);
startBarcodeScanner()
Startet das Barcode-Scanning im aktiven Kamera-Preview.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.startBarcodeScanner();
stopBarcodeScanner()
Stoppt das Barcode-Scanning, lässt das Kamera-Preview aber weiterlaufen.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopBarcodeScanner();
Die obige Tabelle listet die 56 Kernmethoden auf. Listener- und Versions-Helper sowie der vollständige Contract jeder Methode sind dokumentiert im GitHub Repository.
Events abonnieren
addListener gibt ein Handle zurück. Rufe handle.remove() auf, wenn der Screen unmountet, oder CameraPreview.removeAllListeners() auf, um alle Listener zu entfernen.
Vollständige Referenz
Weiter mit der Nutzung von @capgo/camera-preview
Wenn du es nutzt Nutzung von @capgo/camera-preview , um natives Media- und Interface-Verhalten zu planen, verbinde es mit @capgo/camera-preview für die Implementierungsdetails in @capgo/camera-preview, Erste Schritte für die Implementierungsdetails in Erste Schritte, @capgo/capacitor-live-activities verwenden für die native Funktion in „@capgo/capacitor-live-activities verwenden“, @capgo/capacitor-live-activities für die Implementierungsdetails in @capgo/capacitor-live-activities und Verwendung von @capgo/capacitor-video-player für die native Funktionalität in „Verwendung von @capgo/capacitor-video-player.“