Question

我已按照https://ionicframework.com/docs/react/your-first-app的指南使用离子和电容器JS创建了PWA。

在将其添加到firebase并启动testet代码后，我在IOS手机的Chrome上遇到问题。它适用于android以及网络浏览器。

但是，当我单击“拍照”按钮时，它显示“未找到相机”，浏览器不要求让我使用相机。如果我在Safari上尝试相同的操作，那么它将要求提供相机。

这里是查看测试的网址：https://phototest-46598.web.app/tab1

有人遇到同样的问题吗？我的猜测是这是一个新问题，因为该指南似乎可以正常工作。

这是我的代码-我已遵循链接的教程，但未添加本机支持，因为我只想将其用作PWA。

钩住/使用PhotoGallery.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;
}

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

在网络上运行时，摄像头插件使用navigator.mediaDevices.getUserMedia，Chrome for iOS（iOS 14.3之前的版本）不支持该插件。

我已经运行了您的应用，它显示“未找到相机”，并且在其下方有一个“选择图像”按钮，如果单击它，将提示您拍摄照片或从照片库中进行选择，即预期的行为，当没有相机或不支持navigator.mediaDevices.getUserMedia时，它会回退到使用类型为file的输入。

在使用CapacitorJS和Ionic的Chrome IOS上找不到相机

1 个答案: