No camera found on Chrome IOS with CapacitorJS and Ionic

Issue

I have created a PWA with ionic and capacitor JS following this guide: https://ionicframework.com/docs/react/your-first-app.

After i have added it to firebase and start testet the code, i have runned into a issue on Chrome on IOS mobiles. It works on android and also web browsers.

But when i click the take photo button it says "No camera found" and the browser dont ask to let me use the camera. If i try the same thing on Safari, then it asks for the camera.

Here is the url to see the test: https://phototest-46598.web.app/tab1

Does anybody experience the same problem? My guess is that it is a new problem since the guide seems to work without problems.

Here is my code - i have followed the linked tutorial but not added native support because i only want to use it as a PWA.

hooks/usePhotoGallery.js file

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

Tab2.tsx file

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;

Solution

The camera plugin when running on web uses navigator.mediaDevices.getUserMedia, which is not supported on Chrome for iOS (prior to iOS 14.3).

I've run your app and it says "No camera found" and under it there is a "Choose image" button, if you click it you'll be prompted to take a picture or choose from the photo library, that's the expected behavior, when there is no Camera or no support for navigator.mediaDevices.getUserMedia it fallbacks to using a input with type file.

Answered By - jcesarmobile