离子+电容-iOS上的PWA移动摄像头访问-在Safari中可以使用-但从主屏幕图标上不能使用 [英] Ionic + Capacitor - PWA Mobile Camera Access on iOS - Works in Safari - But not when from Home Screen icon

问题描述

正如标题所述，从Safari浏览到应用程序URL时，相机在PWA中工作正常。

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

但是在使用添加到主屏幕后创建一个桌面图标并从新图标启动PWA，PWA可以在各个方面正常工作，但是相机无法打开。

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.

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

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.

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

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

但是可以肯定的是，此后我卸载了Chrome，结果令人遗憾，即通过Safari中的URL，PWA可以打开相机。通过桌面图标显示，无雪茄。

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.

使用以下命令中的说明实现：
https://capacitor.ionicframework.com/docs/guides/ionic-framework-app

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

这是相关的html文件：

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>

这是相关的组件文件：

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

有什么建议吗？

推荐答案

进一步挖掘之后，我发现了一个相关的SO帖子：
如何在iOS11主屏幕Web应用程序上访问相机？

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

看来这是iOS和首页PWA的已知问题，而Ionic + Capacitor目前无法解决。谢谢苹果。 ：（

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. :(

这篇关于离子+电容-iOS上的PWA移动摄像头访问-在Safari中可以使用-但从主屏幕图标上不能使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！