# React Camera Capture

**Repository Path**: sun-zan/react-camera-capture

## Basic Information

- **Project Name**: React Camera Capture
- **Description**: 
使用 React + TypeScript + face-api.js 实现的摄像头拍照和人脸检测裁剪功能。

预览



功能

访问摄像头并实时显示视频流

拍摄照片并获取 Base64 图片

使用 face-api.js 进行人脸检测

自动裁剪检测到的最大人脸

提供 Ant Design 按钮交互
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-03-26
- **Last Updated**: 2025-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

React Camera Capture

使用 React + TypeScript + face-api.js 实现的摄像头拍照和人脸检测裁剪功能。

预览



功能

访问摄像头并实时显示视频流

拍摄照片并获取 Base64 图片

使用 face-api.js 进行人脸检测

自动裁剪检测到的最大人脸

提供 Ant Design 按钮交互

安装和运行 

git clone ...
```sh
cd react-camera-capture

npm install

npm start

```


react-camera-capture/

```sh
│── public/          # 静态资源目录
│── src/
│   ├── components/
│   │   ├── CameraCapture.tsx  # 摄像头拍照组件
│   ├── App.tsx       # 入口文件
│   ├── index.tsx     # React 渲染入口
│── package.json      # 依赖和脚本
│── README.md         # 项目说明文档

```
如何使用 CameraCapture 组件

你可以在 App.tsx 中引入 CameraCapture 组件：


依赖

React 18

TypeScript

face-api.js

Ant Design

贡献