$cordovaCamera.getPicture does not work in ios 11

I am using a ionic v1 app deployed on an ipad running on ios 11. When I try to run the app in ipad and click on the camera button , nothing happens. It stays as it is. I tried to look for issues mentioned similar to ios 10 and added relevant tags for info.plst file and also added the cross frame security bypass. I looked around but could not any solution to this. I have raised this question only after trying out all possible solutions that were specific for $cordovaCamera not working on ios 10. Even I tried to use the navigator.camera.getPicture() instead of $cordovaCamera.getPicture() but that didnt work either.

In my view I have

<a ng-click="takePicture()" style="color:#fff;">

In controller I have

$scope.takePicture = function (options) {

                  var options = {
                          destinationType: Camera.DestinationType.DATA_URL,
                          sourceType: Camera.PictureSourceType.CAMERA,
                          allowEdit: true,
                          quality: 100,
                          targetWidth: 300,
                          targetHeight: 300,
                          encodingType: Camera.EncodingType.JPEG,
                          popoverOptions: CameraPopoverOptions,
                          saveToPhotoAlbum: false,
                          correctOrientation:true
                  };

                 $cordovaCamera.getPicture(options).then(function(imageData) {
                                         console.log('here');

                     $scope.pictureUrl = "data:image/jpeg;base64," + imageData;

                     console.log(imageData);
                     $scope.img_update = 1;
                  }, function(err) {
                     console.log(err);
                  });

             };

In the controller I have also injected $cordovaCamera.

In index.html I have added

<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; script-src &apos;self&apos; &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; *; style-src  &apos;self&apos; &apos;unsafe-inline&apos; *">

In config.xml I have added these tags inside platform ios

 <plugin name="cordova-plugin-camera" spec="~2.3.0">
        <variable name="CAMERA_USAGE_DESCRIPTION" value="The app would like to access the camera when you attach photos to content." />
        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="The app would like to access the photo library when you attach images to content." />
    </plugin>
    <edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
        <string>need camera access to take pictures</string>
    </edit-config>
    <edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
        <string>need to photo library access to get pictures from there</string>
    </edit-config>
    <edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
        <string>need location access to find things nearby</string>
    </edit-config>
    <edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
        <string>need to photo library access to save pictures there</string>
    </edit-config>

Solution

Update latest ios and android version then start following steps.

Step 1) Run this command

ionic cordova plugin rm camera
ionic cordova plugin add cordova-plugin-camera  --variable CAMERA_USAGE_DESCRIPTION="your usage message" --variable PHOTOLIBRARY_USAGE_DESCRIPTION="your usage message"

Step 2) Add Options like this

var options = {  
 // Size  
 quality: 80,  
 targetWidth: 1024,  
 targetHeight: 768,  
 // Actions  
 allowEdit: false,  
 correctOrientation: false,  
 saveToPhotoAlbum: false,  
 // iOS  
 popoverOptions: CameraPopoverOptions, 
 // Basic  
 encodingType: Camera.EncodingType.JPEG,  
 sourceType: Camera.PictureSourceType.CAMERA,  
 destinationType: this.platform.is('ios') ? Camera.DestinationType.FILE_URI : Camera.DestinationType.DATA_URL,    
 };

And you Done.