Ionic + Capacitor - iOS 上的 PWA 移动摄像头访问 - 在 Safari 中工作 - 但不是从主屏幕图标答案

【问题标题】：Ionic + Capacitor - PWA Mobile Camera Access on iOS - Works in Safari - But not when from Home Screen iconIonic + Capacitor - iOS 上的 PWA 移动摄像头访问 - 在 Safari 中工作 - 但不是从主屏幕图标
【发布时间】：2019-11-20 07:56:37
【问题描述】：

正如标题所说，当从 Safari 中导航到应用 URL 时，相机在 PWA 中工作正常。

但是在使用“添加到主屏幕”创建桌面图标并从新图标启动 PWA 后，PWA 在各个方面都按预期工作，但相机没有打开。

我也尝试在设备上使用 Chrome 浏览器，但不幸的是，当通过 URL 启动时，相机甚至无法从 PWA 中打开。

从桌面启动 PWA 时，我假设 iOS 将使用 Safari，而不是 Chrome 或其他浏览器。我错了吗？

但可以肯定的是，我已经卸载了 Chrome，但令人遗憾的是，结果相同，即通过 Safari 中的 URL，PWA 可以正常打开相机。通过桌面图标，没有雪茄。

使用以下指令实施： https://capacitor.ionicframework.com/docs/guides/ionic-framework-app

这是相关的html文件：

<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>

这是相关的组件文件：

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));
  }
}

有什么建议吗？

【问题讨论】：

标签： ionic-framework cordova-plugins progressive-web-apps

【解决方案1】：

经过进一步挖掘，我发现了一个相关的SO帖子： How to access camera on iOS11 home screen web app?

这似乎是 iOS 和主页 PWA 的一个已知问题，目前使用 Ionic + Capacitor 无法解决。谢谢苹果。 :(

【讨论】：