如何将RoboFlow模型接入React Native Expo Camera实现拍照推理

一、先确认RoboFlow API核心配置 #

• 核对API密钥和模型端点URL：端点格式应为https://detect.roboflow.com/[你的模型名]/[版本号]，必须在请求头中携带Authorization: Bearer [你的API密钥]
• 确保模型已发布（非草稿状态），版本号与控制台一致

二、处理本地图片的编码转换 #

React Native拍摄的图片是本地URI，无法直接传给RoboFlow API，需要转成Base64或Blob：

转Base64（推荐） #

使用Expo的FileSystem工具：

import * as FileSystem from 'expo-file-system';

const convertToBase64 = async (imageUri) => {
  const base64Str = await FileSystem.readAsStringAsync(imageUri, {
    encoding: FileSystem.EncodingType.Base64,
  });
  return `data:image/jpeg;base64,${base64Str}`;
};

转Blob（适合大图片） #

const uriToBlob = async (imageUri) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = () => resolve(xhr.response);
    xhr.onerror = () => reject(new Error('图片转Blob失败'));
    xhr.open('GET', imageUri, true);
    xhr.send();
  });
};

三、修正Axios请求逻辑 #

Base64请求示例 #

import axios from 'axios';

const runInference = async (base64Image, apiKey, endpoint) => {
  try {
    const res = await axios.post(
      endpoint,
      { image: base64Image, format: 'json' },
      {
        headers: {
          'Authorization': `Bearer ${apiKey}`,
          'Content-Type': 'application/json',
        },
      }
    );
    return res.data; // 返回推理结果
  } catch (err) {
    // 打印详细错误信息排查
    console.error('推理请求失败:', err.response?.data || err.message);
    throw err;
  }
};

Blob请求示例 #

const runInferenceWithBlob = async (imageUri, apiKey, endpoint) => {
  const blob = await uriToBlob(imageUri);
  const formData = new FormData();
  formData.append('file', blob, 'inference-image.jpg');

  try {
    const res = await axios.post(endpoint, formData, {
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        // 不要手动设置Content-Type，让axios自动处理multipart/form-data
      },
    });
    return res.data;
  } catch (err) {
    console.error('Blob请求失败:', err.response?.data || err.message);
    throw err;
  }
};

四、配置应用权限 #

在Expo项目的app.json中添加相机和存储权限：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "需要访问相机拍摄照片进行AI识别",
        "NSPhotoLibraryUsageDescription": "需要访问相册选择照片进行AI识别"
      }
    },
    "android": {
      "permissions": ["CAMERA", "READ_EXTERNAL_STORAGE", "WRITE_EXTERNAL_STORAGE"]
    }
  }
}

裸React Native项目需在AndroidManifest.xml和Info.plist中对应配置权限。

五、错误排查要点 #

• 打开Chrome DevTools的Network面板，检查请求的状态码、请求头、请求体是否符合RoboFlow要求：
  • 401 Unauthorized：API密钥错误或Authorization头格式有误
  • 404 Not Found：模型端点URL错误（检查模型名、版本号）
  • 400 Bad Request：图片编码错误、参数名错误（RoboFlow接受image或file参数）
  • CORS问题：Expo Snack测试时可依赖内置代理，生产环境需在RoboFlow控制台配置允许跨域的域名

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