bug: [iOS] Capacitor Camera API showing blank page (or pop-up) when it should open the photo gallery (photo-picker.viewservice was interrupted)

[marcelo-ansaldi-baltazar]

Bug Report

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 2.4.2     

  @capacitor/core: 2.4.2    

  @capacitor/android: 2.4.2 

  @capacitor/electron: 2.4.2

  @capacitor/ios: 2.4.2

Installed Dependencies:

  @capacitor/electron not installed

  @capacitor/cli 2.2.0

  @capacitor/core 2.2.0

  @capacitor/android 2.2.0

  @capacitor/ios 2.2.0

[error] "laboratorio" is missing in "E:\Proyectos\app-laboratorio-clinico-etcheverry\android\app\src\main\java". Please create a directory structure matching the package id "laboratorio.etcheverry.ripit.cl" within the directory "E:\Proyectos\app-laboratorio-clinico-etcheverry\android\app\src\main\java".

Platform(s)

iOS

Current Behavior

Ionic 4 + Angular 9 + Capacitor.

I implemented the Capacitor Camera API function getPhoto() like this:

This works perfect in android and chrome (using ionic serve).

But in iOS, when i run my app in an xcode simuator, the following happens:

For the camera option (CameraSource.Camera), the simulator throws an alert that says that iOS simulators dont have a camera (i assume this is the outcome i should expect).

For the gallery option (CameraSource.Photos), i get a white screen (or pop-up) in which i can't select any photo, and i get the following error in the xcode terminal:

Expected Behavior

The simulator should show the gallery when the (CameraSource.Photos), option is selected.

Code Reproduction

https://github.com/marcelo-ansaldi-baltazar/issueCapacitatorCameraApi

Other Technical Details

npm --version output: 6.13.8

node --version output: 12.19.0

pod --version output (iOS issues only): 1.10.0

Additional Context

Forgot to mention that the Capacitor documentation includes this:

But i think i have the right thing by default (meaning didn't change anything myself)

[jcesarmobile]

I can't reproduce on your sample app

moving to discussions so maybe somebody can give you a hand if faced the same issue, but generally, try to test on real devices, both on iOS and Android, simulators/emulators sometimes present strange glitches.

[marcelo-ansaldi-baltazar]

The crash? I changed angular, ionic and capacitor versions to something specific (i dont remember right now)
Or the blank pop up instead of the gallery? this only happened to me on Xcode emulators, not on real devices

[marcelo-ansaldi-baltazar]

{
"name": "xxx",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~10.0.0",
"@angular/core": "~10.0.0",
"@angular/forms": "~10.0.0",
"@angular/platform-browser": "~10.0.0",
"@angular/platform-browser-dynamic": "~10.0.0",
"@angular/router": "~10.0.0",
"@auth0/angular-jwt": "^5.0.2",
"@capacitor/android": "^2.4.2",
"@capacitor/core": "2.4.2",
"@capacitor/ios": "^2.4.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/in-app-browser": "^5.30.0",
"@ionic-native/keyboard": "^5.30.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0",
"@ionic/pwa-elements": "^3.0.1",
"@ionic/storage": "^2.3.1",
"cordova-plugin-inappbrowser": "^4.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"ionic-selectable": "^4.7.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular/cli": "~10.0.5",
"@angular/compiler": "~10.0.0",
"@angular/compiler-cli": "~10.0.0",
"@angular/language-service": "~10.0.0",
"@capacitor/cli": "2.4.2",
"@ionic/angular-toolkit": "^2.3.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
},
"description": "An Ionic project"
}

this worked for me

[gigallo]

Yeah, I'm talking about the app crash when it tries to access the camera to take a photo

This is our package.json:
"dependencies": {
"@angular/cdk": "^9.2.0",
"@angular/common": "^9.1.1",
"@angular/core": "^9.1.1",
"@angular/forms": "^9.1.1",
"@angular/localize": "^9.1.1",
"@angular/platform-browser": "^9.1.1",
"@angular/platform-browser-dynamic": "^9.1.1",
"@angular/router": "^9.1.1",
"@angular/service-worker": "^9.1.1",
"@angular/youtube-player": "^9.2.0",
"@capacitor/android": "^2.4.7",
"@capacitor/core": "^2.4.7",
"@capacitor/ios": "^2.4.7",
"@ionic/angular": "^5.2.1",
"@ionic/pwa-elements": "^1.5.2",
"@ngxs-labs/actions-executing": "0.1.3",
"@ngxs/logger-plugin": "^3.6.2",
"@ngxs/store": "^3.6.2",
"@sentry/angular": "^5.23.0",
"@trec/api": "2.11.53",
"@trec/app-jitsi": "^0.2.1",
"@trec/app-modules": "^0.15.27-d",
"@trec/components": "^0.12.6",
"@types/lodash": "^4.14.149",
"core-js": "^3.6.4",
"date-fns": "^2.14.0",
"datebook": "^2.0.3",
"fuse.js": "^3.4.6",
"lodash": "^4.17.15",
"otpauth": "^5.0.8",
"pdfjs-dist": "2.5.207",
"rxjs": "^6.5.5",
"tslib": "^1.11.1",
"zone.js": "^0.10.3"
},
"devDependencies": {
"@angular-devkit/architect": "^0.901.1",
"@angular-devkit/build-angular": "^0.901.1",
"@angular-devkit/core": "^9.1.1",
"@angular-devkit/schematics": "^9.1.1",
"@angular/cli": "^9.1.1",
"@angular/compiler": "^9.1.1",
"@angular/compiler-cli": "^9.1.1",
"@angular/language-service": "^9.1.1",
"@capacitor/cli": "^2.0.0",
"@commitlint/cli": "^8.3.5",
"@commitlint/config-conventional": "^8.3.4",
"@ionic/angular-toolkit": "^2.2.0",
"@ngxs/devtools-plugin": "^3.6.2",
"@types/jasmine": "^3.5.10",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.2.2",
"cordova-res": "^0.12.1",
"cz-conventional-changelog": "^3.1.0",
"husky": "^4.2.3",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "^5.0.1",
"jetifier": "^1.6.5",
"karma": "4.4.1",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "^3.1.1",
"karma-jasmine-html-reporter": "^1.5.3",
"npm-check": "^5.9.2",
"protractor": "^5.4.3",
"standard-version": "^7.1.0",
"stylelint": "^13.3.1",
"stylelint-config-recommended": "^3.0.0",
"ts-node": "^8.8.2",
"tslint": "^6.1.1",
"typescript": "~3.7.5"
}

[marcelo-ansaldi-baltazar]

Try to update (or downgrade) your dependencies versions to match mines and see if it works. i didn't resolve this issue completely.
In fact, what i did is that i created a whole new Ionic project with just one view and the desire feature: the one when the camera opens. And when i checked that it worked on a real device, i copy pasted all the rest of my old project (the one that crashed) into the new one that had the working camera feature.
Hope it helps you.

[gigallo]

Tried your version of package.json without success. This is becoming a real problem due to a bug of the library not of our code. Then I think we can't randomically try to guess the exact versions configuration until the bug disappears.

Any additional idea?