Ionic-native: Ionic 3 Camera not working in IPhone ios 11
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
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"
]
}
}
mqasem92
All 36 comments
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
UvealSnow
on 17 Oct 2017
Same here the app crashes on iOs 11 only after taking a picture
rajaoui32
on 18 Oct 2017
Anyone able to provide a sample of this? Im not able to recreate this in my tests
mhartington
on 18 Oct 2017
I'm using Ionic 1 and I solved the issue by adding "Privacy- Photo Library Additions Usage Description" which is required by iOs 11
rajaoui32
on 19 Oct 2017
@mqasem92 and @UvealSnow can you both confirm if you have the privacy note added?
mhartington
on 19 Oct 2017
That would be in config.xml?
UvealSnow
on 19 Oct 2017
No in the plist file in platforms/ios/"YOUR_APP_NAME"/
rajaoui32
on 19 Oct 2017
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
mhartington
on 19 Oct 2017
I didn't have them, but I added them and it still crashes after I select an image
UvealSnow
on 19 Oct 2017
Can you please provide a sample project.
mhartington
on 19 Oct 2017
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
UvealSnow
on 19 Oct 2017
@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://
mhartington
on 19 Oct 2017
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?
UvealSnow
on 19 Oct 2017
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"
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);
});
}
馃帀 Wonderful, glad to hear it's all worked out. Closing the issue then.
mhartington
on 19 Oct 2017
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
glemiere
on 8 Nov 2017
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..
Julsonic
on 29 Nov 2017
Same issue here when I use DATA_URL...
francarmona
on 16 Jan 2018
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
tomNjerry
on 5 Feb 2018
@tomNjerry this problem sounds more like a usage description issue.
You should set NSCameraUsageDescription key. I'm sure it would solve your issue ;-)
glemiere
on 6 Feb 2018
@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
tomNjerry
on 10 Feb 2018
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)
erperejildo
on 25 Feb 2018
Ha ha, I knew it.
glemiere
on 25 Feb 2018
@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.
tomNjerry
on 26 Feb 2018
@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)
erperejildo
on 26 Feb 2018
@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.
glemiere
on 26 Feb 2018
How can we do something similar for Android? (I know this is related to ios 11 but I was having same issue on Android)
erperejildo
on 27 Feb 2018
1) Open "APP NAME"-info.plist File
2) Privacy - Camera Usage Description : "Your Description"
3) Privacy - Photo Library Additions Usage Description : "Your Description"
馃憤
krunvaghela
on 6 Mar 2018
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?
rambo14122
on 9 Mar 2018
Did anyone find a solution to the problem @rambo14122 is referring to?
mydoal
on 16 Mar 2018
@mydoal https://forums.developer.apple.com/message/275994#275994
No solution until Apple debug Safari.
glemiere
on 16 Mar 2018
@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!
glemiere
on 16 Mar 2018
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
mhadiemami
on 5 Jun 2018
nedd add lines to acces permision of camera and library into file of ionic config.xml
sergioChL
on 7 Sep 2018
tnks a lot for this topic, help me a lot
guths
on 30 Mar 2021
Related issues
rajanshahsa
路
3Comments
wwallace
路
4Comments
Manduro
路
3Comments
goleary
路
3Comments
lycwed
路
4Comments
Most helpful comment
Great, it's working now.
What I did :
import { normalizeURL } from 'ionic-angular';