Camera is not working on IOS. Only on Web.

[FlipTheBird]

Hi, i have following issue. On Web my app is working without any problem. then I will test it on a real device ( iPhone 12). App is working but the camera function seems to have an issue.

for a second the camera preview opens as planned and then a second later a full screen camera opens and I cannot click or do any thing .

If I am fast enough I could click take photo. but that's not how it should work.

the Picture with the blue dot is how it would look like ( after few second black background will be changed into the preview.)

the second picture shows how the camera changes after seconds I opened the camera. I just got a full screen of a camera.

TYPESCRIPT:

// camera.page.ts import { Component, OnInit } from '@angular/core'; import { CameraPreview, CameraPreviewOptions, CameraPreviewFlashMode } from '@capacitor-community/camera-preview'; import { OverlayImageService } from '/Users/sebastianschuster/projekte/my-camera-app/src/app/drawing/OverlayImageService'; import { Router } from '@angular/router'; import { ImageService } from '../Services/ImageService'; import { AlertController } from '@ionic/angular'; import { ViewStatusService } from '../Services/ViewStatusService';

import '@capacitor-community/camera-preview' @Component({ selector: 'app-camera', templateUrl: './camera.page.html', styleUrls: ['./camera.page.scss'], }) export class CameraPage implements OnInit { overlayImage: string | undefined; overlayNumber: number = 0; // Hier initialisieren wir die Variable

constructor(private overlayImageService: OverlayImageService, private router: Router, private imageService: ImageService, private alertController: AlertController, private viewStatusService: ViewStatusService) { }

ngOnInit() { this.startCameraWithOverlay(); }

startCameraWithOverlay() { // Abrufen des ausgewählten Overlay-Bildes aus dem Service this.overlayImage = this.overlayImageService.getOverlayImage(); this.overlayNumber = this.overlayImageService.getOverlayNumber();

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'rear',
  parent: 'cameraPreview',
  className: 'cameraPreview',
  enableHighResolution: true,
  enableOpacity: true,
  enableZoom: true,
};

CameraPreview.start(cameraPreviewOptions);

}

async takePicture() { const pictureOptions = { quality: 100, width: 0, height: 0 };

CameraPreview.capture(pictureOptions).then(async photo => {
  // Fügen Sie das aufgenommene Foto zur Galerie hinzu
  const capturedImage = 'data:image/jpeg;base64,' + photo.value;

  const alert = await this.alertController.create({
    header: 'Foto behalten?',
    buttons: [
      {
        text: 'Nicht OK',
        role: 'cancel',
        cssClass: 'secondary',
        handler: (blah) => {
          console.log('Confirm Cancel: blah');
          // Hier können Sie den Code hinzufügen, um die Kamera erneut zu starten, wenn der Benutzer "Nicht OK" auswählt
        }
      }, {
        text: 'OK',
        handler: () => {
          console.log('Confirm Okay');
          this.imageService.addImage(capturedImage);
          this.viewStatusService.changeViewStatus(this.overlayNumber - 1, true); // Ändern Sie den Status der entsprechenden Ansicht
          this.router.navigate(['/drawing']);
        }
      }
    ]
  });

  await alert.present();
});

}

stopCamera() { CameraPreview.stop(); this.router.navigate(['/drawing']); }

async getSupportedFlashModes(): Promise<{ result: CameraPreviewFlashMode[]; }> { throw new Error('getSupportedFlashModes not supported under the web platform'); }

async setFlashMode(_options: { flashMode: CameraPreviewFlashMode | string }): Promise { throw new Error('setFlashMode not supported under the web platform'); }

goToGallery() { this.router.navigate(['/gallery']); } }

### SCSS

ion-content{ --background: transparent !important; }

// camera.page.scss .overlay-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

// camera.page.scss

// Hintergrundfarbe und Schriftfarbe für die Seite festlegen ion-content { --background: linear-gradient(to bottom, #333333, #000000); color: #00bcd4; // Türkis }

// Stil für die Buttons festlegen ion-button { margin-bottom: 10px; margin-top: 10px; --background: transparent; --border-radius: 25px; // Runde Buttons --box-shadow: none; font-weight: bold; text-transform: uppercase; color: #00bcd4; // Türkis border: 0px solid #00bcd4; // Türkis

&:hover {
  --background: #00bcd4; // Türkis
  color: #ffffff; // Weiß
}

&.ion-color-danger {
  border-color: #f44336; // Rot
  &:hover {
    --background: #f44336; // Rot
  }
}

ion-icon {
  color: #00bcd4; // Türkis
}

}

// Titelstil für die Header-Leiste ion-title { font-size: 1.5em; font-weight: bold; }

Can someone help me. I am pretty new to this thanks in advance.

[FlipTheBird]

Thats the Error