Hello I am building a PWA , so user will be able to my app add to his home screen(we dont have plans to use playstore ,no apk generation). And my app should have access to mobile camera. Basically user of my app should be able to take picture and upload the picture to my server just taken.
I have Implememted the following steps to capture my pwa
Created a new app by the below command( Didn’t integrate my new app with Cordova)
ionic start my-app
cd my-app
npm install --save @capacitor/core @capacitor/cli
npx cap init
ionic serve
Below is the code used to capture image
import { Component, NgZone } from '';
import { NavController } from 'ionic-angular';
import { Plugins, CameraResultType } from '';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { IonicPage, NavParams } from 'ionic-angular';
import { CameraSource } from '@capacitor/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
image: SafeResourceUrl;
constructor(public navCtrl: NavController, public navParams: NavParams, private zone: NgZone,
private sanitizer: DomSanitizer) {
}
async takePicture() {
const { Camera } = Plugins;
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Base64,
source: CameraSource.Photos
});
this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.base64Data));
console.log(this.image);
}
}
As mentioned in this issue https://github.com/ionic-team/capacitor/issues/358 i have included the below line in my index.html
<script src='https://unpkg.com/@ionic/pwa-elements@0.0.11/dist/ionicpwaelements.js'></script>
If i run my app using ionic serve and using the system IP address i access the app in my mobile browser. when i click on button to capture the image it just shows a black screen
Is there anything i am doing wrong.Can anyone please help me to capture image from pwa