📸 拍照视物识别应用

一个基于React的拍照识别应用，可以使用摄像头拍照并识别图像中的物体。

功能特性

• 📷 摄像头拍照: 支持前置和后置摄像头切换
• 🔍 物体识别: 自动识别图像中的物体（目前使用模拟数据）
• 📱 响应式设计: 适配手机和桌面设备
• 🎨 现代UI: 美观的用户界面和流畅的交互体验

技术栈

• React 18 - 前端框架
• Vite - 构建工具
• Capacitor - 跨平台移动应用框架
• CSS3 - 样式和动画
• MediaDevices API - 摄像头访问（Web端）
• Capacitor Camera Plugin - 原生摄像头访问（移动端）

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

构建安卓APP

# 构建并同步到安卓项目
npm run android:build

# 在Android Studio中打开项目
npm run android:open

# 直接运行到安卓设备/模拟器
npm run android:run

# 开发模式（支持热重载）
npm run android:dev

使用说明

1. 授权摄像头: 首次使用时，浏览器会请求摄像头权限，请点击"允许"
2. 拍照: 点击圆形拍照按钮进行拍照
3. 切换摄像头: 点击🔄按钮在前置和后置摄像头之间切换
4. 查看结果: 拍照后会自动分析图像并显示识别结果
5. 重新拍照: 点击"重新拍照"按钮返回拍照界面

项目结构

src/
├── components/
│   ├── Camera.jsx          # 摄像头组件
│   ├── Camera.css          # 摄像头样式
│   ├── ImageAnalysis.jsx   # 图像分析组件
│   └── ImageAnalysis.css   # 图像分析样式
├── App.jsx                 # 主应用组件
├── App.css                 # 主应用样式
└── main.jsx               # 应用入口

浏览器兼容性

• Chrome 53+
• Firefox 36+
• Safari 11+
• Edge 12+

注意: 需要HTTPS环境或localhost才能访问摄像头

安卓开发环境要求

要构建安卓APP，您需要安装以下工具：

1. Android Studio - 下载地址
2. Java Development Kit (JDK) 17+
3. Android SDK (通过Android Studio安装)
4. Android SDK Build-Tools
5. Android Virtual Device (AVD) 或真实安卓设备

环境配置

1. 安装Android Studio并打开SDK Manager
2. 安装最新的Android SDK Platform
3. 安装Android SDK Build-Tools
4. 配置环境变量：

   export ANDROID_HOME=$HOME/Android/Sdk
   export PATH=$PATH:$ANDROID_HOME/tools
   export PATH=$PATH:$ANDROID_HOME/platform-tools

扩展功能

目前应用使用模拟数据进行演示。要集成真实的图像识别服务，可以：

1. Google Vision API: 集成Google Cloud Vision API
2. Azure Computer Vision: 使用Microsoft Azure认知服务
3. AWS Rekognition: 集成Amazon Rekognition服务
4. TensorFlow.js: 使用客户端机器学习模型

开发说明

添加真实的图像识别API

在 src/components/ImageAnalysis.jsx 中的 simulateImageRecognition 函数处替换为真实的API调用：

const analyzeImageWithAPI = async (imageData) => {
  const formData = new FormData()
  formData.append('image', imageData.blob)

  const response = await fetch('/api/analyze', {
    method: 'POST',
    body: formData
  })

  return await response.json()
}

自定义样式

所有样式文件都使用CSS变量，可以轻松自定义主题颜色和布局。

许可证

MIT License