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?