I am migrating cordova plugins to Capacitor and I am having troubles with Camera plugin.
Please help me to understand why Camera is not displaying when I invoke Camera.getPhoto. I am not getting any error but it does nothing. It does not work when running with ionic serve nor on an Android simulator.
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
photo: string;
takePictureCapacitor() {
console.log("takePictureCapacitor");
const takePicture = async () => {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.DataUrl
});
this.photo = image.dataUrl;
}
}
<ion-item class="noborder" *ngIf="photo!=null">
<ion-label position="stacked">{{ "Foto" | translate }}</ion-label>
<ion-thumbnail item-right>
<img [src]="photo" />
</ion-thumbnail>
</ion-item>
<ion-item lines="none">
<ion-button item-right type="button" fill="clear" (click)="takePictureCapacitor()" *ngIf="photo==null">
<ion-icon name="attach-outline"></ion-icon>
{{ "Adjuntar foto" | translate }}
</ion-button>
</ion-item>
This is my configuration:
Ionic:
Ionic CLI : 6.20.6 (C:\Users\sbelinchon\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 6.4.2
@angular-devkit/build-angular : 14.2.9
@angular-devkit/schematics : 14.2.10
@angular/cli : 14.2.10
@ionic/angular-toolkit : 6.1.0
Capacitor:
Capacitor CLI : 4.6.2
@capacitor/android : 4.6.2
@capacitor/core : 4.6.2
@capacitor/ios : 4.6.2
Cordova:
Cordova CLI : 11.1.0
Cordova Platforms : android 10.1.2
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 7 other plugins)
Utility:
cordova-res : 0.15.4
native-run : 1.7.1
System:
Android SDK Tools : 26.1.1 (C:\Users\sbelinchon\AppData\Local\Android\Sdk)
NodeJS : v18.13.0 (C:\Program Files\nodejs\node.exe)
npm : 9.4.0
OS : Windows 10
This is my package.json:
{
"name": "myapp",
"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": "^14.2.9",
"@angular/core": "^14.2.9",
"@angular/forms": "^14.2.9",
"@angular/platform-browser": "^14.2.9",
"@angular/platform-browser-dynamic": "^14.2.9",
"@angular/router": "^14.2.9",
"@awesome-cordova-plugins/core": "^6.1.0",
"@awesome-cordova-plugins/diagnostic": "^6.1.0",
"@awesome-cordova-plugins/geolocation": "^6.3.0",
"@awesome-cordova-plugins/http": "^6.1.0",
"@awesome-cordova-plugins/in-app-browser": "^6.1.0",
"@awesome-cordova-plugins/network": "^6.1.0",
"@awesome-cordova-plugins/safari-view-controller": "^6.3.0",
"@capacitor/android": "^4.6.2",
"@capacitor/app": "4.1.1",
"@capacitor/browser": "^4.1.0",
"@capacitor/camera": "^4.1.4",
"@capacitor/core": "4.6.2",
"@capacitor/haptics": "4.1.0",
"@capacitor/ios": "^4.6.2",
"@capacitor/keyboard": "4.1.1",
"@capacitor/push-notifications": "^4.1.2",
"@capacitor/splash-screen": "^4.1.3",
"@capacitor/status-bar": "4.1.1",
"@ionic-native/android-permissions": "^5.36.0",
"@ionic-native/http": "^5.36.0",
"@ionic-native/in-app-browser": "^5.36.0",
"@ionic-native/splash-screen": "^5.36.0",
"@ionic/angular": "^6.4.2",
"@ionic/cordova-builders": "^7.0.0",
"@ionic/core": "^6.4.2",
"@ionic/pwa-elements": "^3.1.1",
"@ionic/storage-angular": "^3.0.6",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"cordova": "^11.1.0",
"cordova-plugin-advanced-http": "^3.3.1",
"cordova-plugin-android-permissions": "^1.1.5",
"cordova-plugin-file": "^7.0.0",
"cordova-plugin-inappbrowser": "^5.0.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-network-information": "^3.0.0",
"cordova-res": "^0.15.4",
"cordova.plugins.diagnostic": "^7.1.1",
"crypto-js": "^4.1.1",
"ionicons": "^6.0.3",
"node-js-marker-clusterer": "^1.0.0",
"rxjs": "~6.6.0",
"swiper": "^8.3.2",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.9",
"@angular-eslint/builder": "^14.0.0",
"@angular-eslint/eslint-plugin": "^14.0.0",
"@angular-eslint/eslint-plugin-template": "^14.0.0",
"@angular-eslint/template-parser": "^14.0.0",
"@angular/cli": "^14.2.9",
"@angular/compiler": "^14.2.9",
"@angular/compiler-cli": "^14.2.9",
"@angular/language-service": "^14.2.9",
"@capacitor/cli": "4.6.2",
"@ionic/angular-toolkit": "^6.0.0",
"@ionic/lab": "3.2.13",
"@types/jasmine": "~4.0.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"cordova-android": "^10.1.2",
"cordova-plugin-enable-multidex": "^0.2.0",
"cordova-plugin-geolocation": "^4.1.0",
"cordova-plugin-ionic-webview": "^5.0.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~4.3.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.8.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-statusbar": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-advanced-http": {},
"cordova.plugins.diagnostic": {
"ANDROIDX_VERSION": "1.0.0",
"ANDROIDX_APPCOMPAT_VERSION": "1.3.1"
},
"cordova-plugin-geolocation": {
"GPS_REQUIRED": "true"
},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-android-permissions": {},
"cordova-plugin-enable-multidex": {}
},
"platforms": []
}
}