Ionic 3 Camera not working in IPhone ios 11

[mqasem92]

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request

Current behavior:
I'm trying to build feature in my application that take photo from the camera and preview the taken photo in the <img [src]="" />

The camera'll open fine, but when try to preview the image nothing appear.

Notes:

• It's working in the android devices
• The preview shown when get photos from the mobile gallery.
• I'm testing my app using Ionic View.

Expected behavior:
Preview the image taken from the Camera

Steps to reproduce:

Related code:

public photos: any = [];

constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public actionSheetCtrl: ActionSheetController,
    private camera: Camera) {

  }

takePicture() {
    
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {

      //add photo to the array of photos
      this.base64Image = "data:image/jpeg;base64," + imageData;
      this.addPhoto(this.base64Image);

    }, (error) => {
      console.debug("Unable to obtain picture: " + error, "app");
      console.log(error);
    });
  }

addPhoto(photo) {
      this.photos.push(photo);
      this.photos.reverse();
  }

 <ion-grid>
      <ion-row>
        <ion-col col-6 *ngFor="let photo of photos; let id = index">
          <ion-card>
            <img [src]="photo" *ngIf="photo" (click)="openPhotoActionSheet(id)" />
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>

Other information:
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.7.0

System:

Node : v6.10.3
npm  : 3.10.10
OS   : Windows 10

Misc:

backend : legacy

package.json info:

{
    "name": "ionic-hello-world",
    "author": "mqasem",
    "homepage": "http://xxxx.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "^4.4.3",
        "@angular/compiler": "^4.4.3",
        "@angular/compiler-cli": "^4.4.3",
        "@angular/core": "^4.4.3",
        "@angular/forms": "^4.4.3",
        "@angular/http": "^4.4.3",
        "@angular/platform-browser": "^4.4.3",
        "@angular/platform-browser-dynamic": "^4.4.3",
        "@angular/platform-server": "4.0.2",
        "@ionic-native/camera": "^4.3.0",
        "@ionic-native/core": "^4.2.1",
        "@ionic-native/device": "^4.2.1",
        "@ionic-native/splash-screen": "^3.4.2",
        "@ionic-native/status-bar": "^3.4.2",
        "@ionic/storage": "^2.0.1",
        "@ngx-translate/core": "^8.0.0",
        "@ngx-translate/http-loader": "^2.0.0",
        "angular2-google-maps": "^0.17.0",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-camera": "^2.4.1",
        "cordova-plugin-compat": "^1.2.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-ionic-webview": "^1.1.8",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.1",
        "cordova-plugin-whitelist": "^1.3.1",
        "cordova-plugin-x-toast": "^2.5.2",
        "cordova-sqlite-storage": "^2.0.4",
        "ionic-angular": "^3.7.0",
        "ionic-native": "2.9.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "phonegap-plugin-barcodescanner": "^6.0.8",
        "rxjs": "^5.4.3",
        "sw-toolbox": "3.4.0",
        "zone.js": "^0.8.17"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^3.0.0",
        "typescript": "~2.2.1"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [],
    "description": "ionicTemplate2: An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "cordova-plugin-x-toast": {},
            "ionic-plugin-keyboard": {},
            "phonegap-plugin-barcodescanner": {
                "CAMERA_USAGE_DESCRIPTION": " "
            },
            "cordova-plugin-ionic-webview": {},
            "cordova-sqlite-storage": {},
            "cordova-plugin-compat": {}
        },
        "platforms": [
            "android",
            "ios"
        ]
    }
}

[UvealSnow]

I also have problems with this plugin, it works fine on Android but crashes the app on iOS11.

I can access the gallery/camera but when I select a picture the app will crash and exit

[rajaoui32]

Same here the app crashes on iOs 11 only after taking a picture

[mhartington]

Anyone able to provide a sample of this? Im not able to recreate this in my tests

[rajaoui32]

I'm using Ionic 1 and I solved the issue by adding "Privacy- Photo Library Additions Usage Description" which is required by iOs 11

[mhartington]

@mqasem92 and @UvealSnow can you both confirm if you have the privacy note added?

https://github.com/apache/cordova-plugin-camera#ios-quirks

[UvealSnow]

That would be in config.xml?

[rajaoui32]

No in the plist file in platforms/ios/"YOUR_APP_NAME"/

[mhartington]

Config.xml or package.json

package.json

      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": " ",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
      }

config.xml

    <plugin name="cordova-plugin-camera" spec="^2.4.1">
        <variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
    </plugin>

This will get copied over to your plist file at build time

[UvealSnow]

I didn't have them, but I added them and it still crashes after I select an image

[mhartington]

Can you please provide a sample project.

[UvealSnow]

Ok so I made this small project, just added camera plugin and it does not crash, but I can´t get it to present the image, the code that I'm using is from another app I didn't in the past and it used to work fine until some days ago

https://github.com/UvealSnow/ionic-camera

[mhartington]

@UvealSnow You're missing normalizeUrl on line 31

https://github.com/UvealSnow/ionic-camera/blob/master/src/pages/home/home.ts#L31

Because this is WKWebview, you need to rewrite the URLs to not include the file://

http://ionicframework.com/docs/wkwebview/#rewriting-file

[UvealSnow]

Thank you @mhartington I will cross check with my other project to see what's missing.
If you have time could you give me some tips on how to make a clean reinstall of the camera plugin?

[mhartington]

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"

[mqasem92]

Great, it's working now.

What I did :

• apply the following commands

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"

• This is my code

import { normalizeURL } from 'ionic-angular';

takePicture() {

    const options: CameraOptions = {
      quality: 100,
      destinationType: this.platform.is('ios') ? this.camera.DestinationType.FILE_URI : this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {

      let base64Image = null;

      //get photo from the camera based on platform type
      if (this.platform.is('ios'))
        base64Image = normalizeURL(imageData);
      else
        base64Image = "data:image/jpeg;base64," + imageData;

      //add photo to the array of photos
      this.addPhoto(base64Image);

    }, (error) => {
      console.debug("Unable to obtain picture: " + error, "app");
      console.log(error);
    });
  }

openGallery() {
    let cameraOptions = {
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      quality: 100,
      targetWidth: 1000,
      targetHeight: 1000,
      encodingType: this.camera.EncodingType.JPEG,
      correctOrientation: true
    }

    this.camera.getPicture(cameraOptions).then((file_uri) => {

      //add photo to the array of photos
      this.addPhoto(normalizeURL(file_uri));

    }, (error) => {
      console.debug("Unable to obtain picture: " + error, "app");
      console.log(error);
    });
  }