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

Question

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

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

但是当我点击拍照按钮时，它显示“未找到相机”并且浏览器不要求让我使用相机。如果我在 Safari 上尝试同样的事情，那么它会要求相机。

这里是url看测试：https://phototest-46598.web.app/tab1

有没有人遇到同样的问题？我的猜测是这是一个新问题，因为指南似乎没有问题。

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

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

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

网络上运行ning 使用 navigator.mediaDevices.getUserMedia 时的相机插件在 Chrome 上不支持 iOS（在 iOS 14.3 之前） .

我运行你的应用程序，它说“找不到相机”，在它下面有一个“选择图像”按钮，如果你点击它，你会被提示拍照或选择来自照片库，这是预期的行为，当没有相机或不支持 navigator.mediaDevices.getUserMedia 时，它会退回到使用带有类型文件的输入。

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

No camera found on Chrome IOS with CapacitorJS and Ionic

ios

ionic-framework

capacitor