Ionic + Capacitor - PWA Mobile Camera Access on iOS - Works in Safari - But not when from Home Screen icon

问题

As the title says, the camera works fine in the PWA when navigating to the app URL from within Safari.

But after using "Add to Home Screen" to create a desktop icon and launching the PWA from the new icon, the PWA works in every respect as expected, but the camera doesn't open up.

I also tried using the Chrome browser on the device, but unfortunately, the camera won't even open from within the PWA when launched via URL.

When launching a PWA from the desktop, I assume that iOS will use Safari, rather than Chrome or another browser. Am I wrong?

But to be sure, I've since uninstalled Chrome, with regrettably the same result, i.e. Via URL in Safari, PWA opens camera fine. Via desktop icon, no cigar.

Implemented using instructions from: https://capacitor.ionicframework.com/docs/guides/ionic-framework-app

This is the related html file:

<p>
  Click the Camera button at the bottom of the page to launch the device's 
  camera.
</p>

<ion-content>
  <img [src]="photo" *ngIf="photo">

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="takePicture()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

This is the related component file:

import { Component, OnInit } from '@angular/core';
import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'camera',
  templateUrl: './camera.component.html',
  styleUrls: ['./camera.component.scss'],
})
export class CameraComponent implements OnInit {
  photo: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {}

  async takePicture() {
    const image = await Plugins.Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera
    });

    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
  }
}

Any suggestions?

回答1:

After further digging, I found a related SO post: How to access camera on iOS11 home screen web app?

It looks like it's a known problem with iOS and Home Page PWAs, with no way around it at the moment with Ionic + Capacitor. Thanks Apple. :(

来源：https://stackoverflow.com/questions/56974939/ionic-capacitor-pwa-mobile-camera-access-on-ios-works-in-safari-but-not

标签

ionic-framework

cordova-plugins

progressive-web-apps