Ionic Camera Preview not visible

Question

I have a tabs layout and in my first tab I placed a fab with a click event called 'takePicture()'. In this method I check the camera permission and then try to use the camera preview plugin. When I click the button, the camera preview doesn't appear.

takePicture() {
this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA).then(result => { 
  console.log(result.hasPermission);
  if(result.hasPermission) {
    const cameraPreviewOpts: CameraPreviewOptions = {
      x: 10,
      y: 10,
      width: 100,
      height: 100,
      camera: 'rear',
      tapPhoto: true,
      previewDrag: true,
      toBack: true,
      alpha: 1
    }

    this.cameraPreview.startCamera(cameraPreviewOpts).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log(err)
      });
  } else {
    console.log('Could not access camera without permission');
  }
});
}

Output:

true
Camera started

Even though it says the camera is started, the preview is not visible. Any help is appreciated!

Answer 1

Fixed it by adding

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

To the tab's scss file.