Capture Image(PWA)

Ionic Framework ionic-v3
1

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

2

when you access your app on your computer where you serve it (http://localhost:8100) do you face the same problem?

3

No…when I open my app in computer browser,the system webcam opens and I can see my image on the screen correctly (I couldn’t get the captured image data in system too but I could see the image that will be captured)…

4

That’s good, maybe it’s just then the transport thru IP the problem?

Have you try to build your app and to deploy it for example to Firebase to see if the same problem happens?

5

I have not tried that yet…I will try deploying the app and I will Inform you

1 Like
6

Or you could use:

<input type="file" ... >

See: iOS 11 its not me its you (tags: iOS11, PWA, Camera)

7