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