Aucune caméra trouvée sur Chrome IOS avec CapacitorJS et Ionic

Question

J'ai créé un PWA avec JS ionique et condensateur en suivant ce guide: https://ionicframework.com/docs/react/your-first-app.

Après l'avoir ajouté à Firebase et commencé à tester le code, j'ai rencontré un problème sur Chrome sur les mobiles IOS. Il fonctionne sur Android et aussi sur les navigateurs Web.

Mais quand je clique sur le bouton de prise de photo, il dit "Aucune caméra trouvée" et le navigateur ne me demande pas de me laisser utiliser la caméra. Si j'essaye la même chose sur Safari, alors il demande la caméra.

Voici l'url pour voir le test: https://phototest-46598.web.app/tab1

Quelqu'un a-t-il le même problème? Je suppose que c'est un nouveau problème puisque le guide semble fonctionner sans problèmes.

Voici mon code - j'ai suivi le didacticiel lié mais je n'ai pas ajouté de support natif car je ne veux l'utiliser que comme PWA.

hooks / fichier 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;
}

Fichier 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

Le plug-in de l'appareil photo lors de l'exécution sur le Web utilise navigator.mediaDevices.getUserMedia, ce qui n'est pas pris en charge sur Chrome pour iOS (avant iOS 14.3).

J'ai exécuté votre application et elle indique "Aucune caméra trouvée" et en dessous se trouve un bouton "Choisir une image", si vous cliquez dessus, vous serez invité à prendre une photo ou à choisir dans la bibliothèque de photos, c'est le comportement attendu , lorsqu'il n'y a pas de caméra ou pas de prise en charge, navigator.mediaDevices.getUserMediail revient à utiliser une entrée avec un fichier de type.