Ionic 3 Camera not working in IPhone ios 11 #2020

mqasem92 · 2017-10-05T11:13:17Z

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"
        ]
    }
}

The text was updated successfully, but these errors were encountered:

UvealSnow · 2017-10-16T23:53:20Z

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 · 2017-10-18T14:58:05Z

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

mhartington · 2017-10-18T15:16:26Z

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

rajaoui32 · 2017-10-19T08:57:14Z

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 · 2017-10-19T13:57:52Z

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

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

UvealSnow · 2017-10-19T14:20:08Z

That would be in config.xml?

rajaoui32 · 2017-10-19T14:21:33Z

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

mhartington · 2017-10-19T14:21:55Z

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 · 2017-10-19T14:34:23Z

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

mhartington · 2017-10-19T14:35:39Z

Can you please provide a sample project.

UvealSnow · 2017-10-19T15:17:59Z

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 · 2017-10-19T15:20:03Z

@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 · 2017-10-19T15:30:04Z

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 · 2017-10-19T15:31:13Z

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 · 2017-10-19T18:12:40Z

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);
    });
  }

mhartington · 2017-10-19T18:52:33Z

🎉 Wonderful, glad to hear it's all worked out. Closing the issue then.

glemiere · 2017-11-07T23:48:37Z

I have the same problem here. This problems is caused by a bug from Apple (to change...) where safari seems to fail decoding base64 images. The reason why the code of @mqasem92 is working is because he's using FILE_URI source instead of DATA_URL.
So your code is a workaround but not a fix. I'll use it though.

@mhartington How do we fix it ? Any way to signal the problem to Apple ?

EDIT : I've opened a discussion on Apple's forum, you can follow it here --> https://forums.developer.apple.com/message/275994#275994

Julsonic · 2017-11-29T06:07:50Z

Hi Guys, is there any news on decoding base64 pictures using DATA_URL? On the Apple's forum I see that while there is silence..

francarmona · 2018-01-16T13:26:33Z

Same issue here when I use DATA_URL...

tomNjerry · 2018-02-05T12:36:19Z

getting same issue not getting displayed and crashing app wen selecting the image by using camera but images are not getting displayed even after using normalizeURL for ios

glemiere · 2018-02-06T18:37:05Z

@tomNjerry this problem sounds more like a usage description issue.
You should set NSCameraUsageDescription key. I'm sure it would solve your issue ;-)

tomNjerry · 2018-02-10T08:00:33Z

@glemiere Sir can you please brief me with an example as I am new with ionic Framework as of iOS is concerned. Because the same implementation done in android without applying normalizeURL of ionic-angular it just work fine that so i am Uploading multiple images. Sorry for late reply as I was out of station.
Thank you in advance

erperejildo · 2018-02-25T15:32:42Z

it works perfectly if we add both description messages but it doesn't if we don't want to display anything. This is the solution that I found for that:
cordova plugin add cordova-plugin-camera --variable CAMERA_USAGE_DESCRIPTION=null --variable PHOTOLIBRARY_USAGE_DESCRIPTION=null --save

Edit: but even with this it fails sometimes (but not always, weird)

glemiere · 2018-02-25T17:31:28Z

Ha ha, I knew it.

tomNjerry · 2018-02-26T07:02:28Z

@erperejildo I did add CAMERA_USAGE_DESCRIPTION = "some msg" PHOTOLIBRARY_USAGE_DESCRIPTION = "some msg" but it still giving me the blank image, it is creating the image box for the uploaded image, as i am allowing user to upload multiple images. So the problem faced by me is image are getting upload but when i try to display the uploaded image it is giving the corresponding image box with no image displayed on it.

erperejildo · 2018-02-26T09:38:33Z

@Tommertom did you stopped the server and removed and added platform?

I just edited my answer. Even with that doesn't work 100% of the times. The problem is not from Ionic anyway, native people also face this problem sometimes (but it's easier to fix for them)

glemiere · 2018-02-26T16:52:32Z

@tomNjerry, @erperejildo

Solution:

Open your Project/platforms/ios/Project.xcworkspace.
In xCode, select your project and go to "Info" (like on the screenshot).
Create a new row (the little "+" on my screenshot, it appears when your mouse is over a row) then enter "NSCameraUsageDescription" for the key, and whatever you want for the value. When you're done, repeat this for the key "NSPhotoLibraryUsageDescription".

Good to know:

If you run your project using xCode directly, you can search the console for "NS" and you will quickly find all the privacy descriptions that are missing for your app with the logged errors.

If you remove your platform you will have to perform this change again. It's not supposed to be a good practice using ionic, however in this case you should commit your info.plist to your repo, it might save you some time.

erperejildo · 2018-02-27T09:40:27Z

How can we do something similar for Android? (I know this is related to ios 11 but I was having same issue on Android)

krunvaghela · 2018-03-06T17:05:28Z

Open "APP NAME"-info.plist File
Privacy - Camera Usage Description : "Your Description"
Privacy - Photo Library Additions Usage Description : "Your Description"

👍

rambo14122 · 2018-03-08T23:28:42Z

Hi guys, I have seen the solution posted by @mqasem92 . The problem is I want DATA_URL instead of FILE_URI. I need to upload the image data to the server.
Any suggestion?

mydoal · 2018-03-16T07:46:02Z

Did anyone find a solution to the problem @rambo14122 is referring to?

glemiere · 2018-03-16T17:59:16Z

@mydoal https://forums.developer.apple.com/message/275994#275994
No solution until Apple debug Safari.

glemiere · 2018-03-16T18:02:59Z

@rambo14122 you should upload a file to your server for the moment instead of a data string. You can save it as a regular file on your server (remember the 10k subfolder limit on linux) and save the url in your database, or save it in your database as a blob.

Good luck!

mhadiemami · 2018-06-05T11:57:25Z

I had the same issue with the iOS 11 camera on and found this and it fix the problem right away:
https://www.npmjs.com/package/cordova-plugin-ios-camera-permissions

You can use the following code from cordova command-lind and it will fix the issue:

cordova plugin add cordova-plugin-ios-camera-permissions --variable CAMERA_USAGE_DESCRIPTION="your usage message" --variable PHOTOLIBRARY_ADD_USAGE_DESCRIPTION="your photo library usage message here" --variable PHOTOLIBRARY_USAGE_DESCRIPTION="your photo library usage message here" --save

sergioChL · 2018-09-07T17:48:41Z

nedd add lines to acces permision of camera and library into file of ionic config.xml

need camera access to take pictures need photo library access to get pictures from there need location access to find things nearby need photo library access to save pictures there

guths · 2021-03-30T16:39:28Z

tnks a lot for this topic, help me a lot

ppereira1402 · 2021-10-15T22:46:58Z

Anybody solve the problem?

mhartington closed this as completed Oct 19, 2017

JeremyLopez mentioned this issue Aug 21, 2018

When I use the cordova-plugin-qrscanner plugin, I can not open the camera for scanning #1812

Closed

Ionic 3 Camera not working in IPhone ios 11 #2020

Ionic 3 Camera not working in IPhone ios 11 #2020

Comments

mqasem92 commented Oct 5, 2017 • edited

UvealSnow commented Oct 16, 2017

rajaoui32 commented Oct 18, 2017

mhartington commented Oct 18, 2017

rajaoui32 commented Oct 19, 2017

mhartington commented Oct 19, 2017

UvealSnow commented Oct 19, 2017

rajaoui32 commented Oct 19, 2017

mhartington commented Oct 19, 2017

UvealSnow commented Oct 19, 2017

mhartington commented Oct 19, 2017

UvealSnow commented Oct 19, 2017

mhartington commented Oct 19, 2017

UvealSnow commented Oct 19, 2017

mhartington commented Oct 19, 2017

mqasem92 commented Oct 19, 2017 • edited

mhartington commented Oct 19, 2017

glemiere commented Nov 7, 2017 • edited

Julsonic commented Nov 29, 2017

francarmona commented Jan 16, 2018

tomNjerry commented Feb 5, 2018

glemiere commented Feb 6, 2018

tomNjerry commented Feb 10, 2018

erperejildo commented Feb 25, 2018 • edited

glemiere commented Feb 25, 2018

tomNjerry commented Feb 26, 2018

erperejildo commented Feb 26, 2018

glemiere commented Feb 26, 2018 • edited

Solution:

Good to know:

erperejildo commented Feb 27, 2018

krunvaghela commented Mar 6, 2018

rambo14122 commented Mar 8, 2018 • edited

mydoal commented Mar 16, 2018

glemiere commented Mar 16, 2018

glemiere commented Mar 16, 2018

mhadiemami commented Jun 5, 2018

sergioChL commented Sep 7, 2018

guths commented Mar 30, 2021

ppereira1402 commented Oct 15, 2021

mqasem92 commented Oct 5, 2017 •

edited

mqasem92 commented Oct 19, 2017 •

edited

glemiere commented Nov 7, 2017 •

edited

erperejildo commented Feb 25, 2018 •

edited

glemiere commented Feb 26, 2018 •

edited

rambo14122 commented Mar 8, 2018 •

edited