Ionic React Capacitor如何使用第三方相机或实现自定义相机

方案1：唤起第三方相机应用选择弹窗 #

@capacitor/camera原生逻辑本身支持拉起应用选择器，仅在自定义ROM无任何注册拍照意图的应用时才会报错，适配逻辑如下：

• 首先保留原有调用逻辑，添加promptLabelHeader参数强制Android端显示应用选择弹窗，不会直接唤起默认应用
• 捕获无可用相机的错误后，通过@capacitor/app-launcher插件自定义拉起所有支持拍照的第三方应用
  参考代码：

import { Camera, CameraResultType, CameraSource } from "@capacitor/camera";
import { AppLauncher } from '@capacitor/app-launcher';
import { App } from '@capacitor/app';

export function usePhotoGallery() { 
  const scatta = async () => {
    try {
      const cameraPhoto = await Camera.getPhoto({
        resultType: CameraResultType.Uri,
        source: CameraSource.Camera,
        quality: 100,
        // Android端强制显示应用选择弹窗标题
        promptLabelHeader: "选择拍照应用",
        promptLabelCancel: "取消"
      });
      return cameraPhoto;
    } catch (e) {
      // 捕获无可用相机应用的报错
      if (e.message.includes('No Activity found to handle Intent') || e.message.includes('未找到相机应用')) {
        // 构造安卓拍照意图拉起所有适配的第三方相机
        const captureIntent = 'intent://media#Intent;action=android.media.action.IMAGE_CAPTURE;end';
        const { value: canOpen } = await AppLauncher.canOpenUrl({ url: captureIntent });
        if (canOpen) {
          await AppLauncher.openUrl({ url: captureIntent });
          // 可通过App.addListener('appUrlOpen')监听拍照返回的文件URI
          return;
        }
        throw new Error('未检测到可用的相机应用，请安装第三方相机后重试');
      }
      throw e;
    }
  };

  return {
    scatta,
  };
}

注：iOS系统强制内置相机应用，不存在该场景，无需额外适配

方案2：自定义内置相机功能 #

如果设备确实没有任何第三方相机应用，可直接在应用内实现自定义相机，不依赖外置应用，推荐使用社区插件@capacitor-community/camera-preview，直接调用系统相机硬件，适配逻辑如下：

• 安装插件后配置相机、存储权限，在页面预留DOM节点承载相机预览层
• 自定义实现拍照、切换摄像头、闪光灯控制等交互逻辑
  参考代码：

import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';

// 启动自定义相机预览
const startCustomCamera = async () => {
  const options: CameraPreviewOptions = {
    position: 'rear',
    parent: 'camera-preview-box', // 页面上预留的预览容器DOM id
    width: window.innerWidth,
    height: window.innerHeight - 180, // 底部预留操作按钮区域
    toBack: false,
  };
  await CameraPreview.start(options);
};

// 自定义拍照逻辑
const takeCustomPhoto = async () => {
  const captureRes = await CameraPreview.capture({
    quality: 100,
  });
  // captureRes.value为照片base64格式，可自行转换为Blob或本地URI
  await CameraPreview.stop(); // 拍照完成关闭预览
  return captureRes.value;
};

注：自定义相机兼容性最高，可完全控制交互逻辑，但需要自行适配不同机型的预览比例、权限申请交互。

内容的提问来源于stack exchange，提问作者giuseppe