Nenhuma câmera encontrada no Chrome IOS com CapacitorJS e Ionic

Question

Eu criei um PWA com JS iônico e capacitor seguindo este guia: https://ionicframework.com/docs/react/your-first-app.

Depois de adicioná-lo ao firebase e começar a testar o código, tive um problema no Chrome em celulares IOS. Ele funciona no Android e também em navegadores da web.

Mas quando clico no botão tirar foto, ele diz "Nenhuma câmera encontrada" e o navegador não me pede para usar a câmera. Se eu tentar a mesma coisa no Safari, ele pede a câmera.

Aqui está o url para ver o teste: https://phototest-46598.web.app/tab1

Alguém tem o mesmo problema? Meu palpite é que é um problema novo, pois o guia parece funcionar sem problemas.

Aqui está meu código - segui o tutorial vinculado, mas não adicionei suporte nativo porque só quero usá-lo como um PWA.

arquivo hooks / usePhotoGallery.js

import { useState, useEffect } from "react";
import { useCamera } from '@ionic/react-hooks/camera';
import { CameraResultType, CameraSource, CameraPhoto, Capacitor, 
FilesystemDirectory } from "@capacitor/core";

export function usePhotoGallery() {

const { getPhoto } = useCamera();
const [photos, setPhotos] = useState<Photo[]>([]);

const takePhoto = async () => {
    const cameraPhoto = await getPhoto({
        resultType: CameraResultType.Uri,
        source: CameraSource.Camera,
        quality: 100
    });

    const fileName = new Date().getTime() + '.jpeg';
    const newPhotos = [{
        filepath: fileName,
        webviewPath: cameraPhoto.webPath
    }, ...photos];
    setPhotos(newPhotos)
};

return {
    photos,
    takePhoto
};
}

export interface Photo {
filepath: string;
webviewPath?: string;
base64?: string;
}

Arquivo Tab2.tsx

import React from 'react';
import { camera, trash, close } from 'ionicons/icons';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
IonFab, IonFabButton, IonIcon, IonGrid, IonRow,
IonCol, IonImg, IonActionSheet } from '@ionic/react';

import ExploreContainer from '../components/ExploreContainer';
import { usePhotoGallery } from '../hooks/usePhotoGallery';
import './Tab2.css';

const Tab2: React.FC = () => {
const { photos, takePhoto } = usePhotoGallery();
return (
<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Photo Gallery</IonTitle>
    </IonToolbar>
  </IonHeader>
    <IonContent>
        <IonGrid>
            <IonRow>
                {photos.map((photo, index) => (
                    <IonCol size="6" key={index}>
                        <IonImg src={photo.webviewPath} />
                    </IonCol>
                ))}
            </IonRow>
        </IonGrid>
        <IonFab vertical="bottom" horizontal="center" slot="fixed">
            <IonFabButton onClick={() => takePhoto()}>
                <IonIcon icon={camera}></IonIcon>
            </IonFabButton>
        </IonFab>
    </IonContent>
</IonPage>
 );
 };

 export default Tab2;

Answer 1

O plug-in da câmera quando executado na web usa navigator.mediaDevices.getUserMedia, o que não é compatível com o Chrome para iOS (antes do iOS 14.3).

Eu executei seu aplicativo e ele diz "Nenhuma câmera encontrada" e abaixo dele há um botão "Escolher imagem", se você clicar nele, você será solicitado a tirar uma foto ou escolher da biblioteca de fotos, esse é o comportamento esperado , quando não há câmera ou suporte para navigator.mediaDevices.getUserMediaela, recorre ao uso de uma entrada com o arquivo do tipo.