# zb2

**Repository Path**: jsy96/zb2

## Basic Information

- **Project Name**: zb2
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-16
- **Last Updated**: 2026-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 直播手势助播

基于 MediaPipe Tasks Vision 的网页助播工具。主播在摄像头前做出 8 种固定手势之一后，网页会识别该手势并播放对应的助播音频，适用于直播卖货中的促单提醒、口播补充、氛围音效和团队协作。

## 功能

- **无需训练**：应用内置 8 种固定手势规则，不再需要采集训练样本。
- **固定音频映射**：8 种手势分别播放 `public/mp3/1.mp3` 到 `public/mp3/8.mp3`。
- **隐私预览**：摄像头只用于识别，页面只显示手部骨架，不显示真人画面或人脸。
- **实时测试播放**：识别稳定后自动播放对应音频，并支持设置冷却时间避免重复播放。
- **本地模型资源**：MediaPipe wasm 和手部模型文件随站点静态发布到 `public/mediapipe`。
- **Vercel 部署**：项目包含 `vercel.json`，可作为纯静态 Vite 应用部署。

## 固定手势映射

| 序号 | 手势 | 音频 |
| --- | --- | --- |
| 1 | 竖起一个大拇指 | `public/mp3/1.mp3` |
| 2 | 竖起一个食指 | `public/mp3/2.mp3` |
| 3 | 竖起食指和中指 | `public/mp3/3.mp3` |
| 4 | 竖起中指、无名指和小指 | `public/mp3/4.mp3` |
| 5 | 5 个手指张开 | `public/mp3/5.mp3` |
| 6 | 竖起大拇指和小指 | `public/mp3/6.mp3` |
| 7 | 竖起大拇指和食指 | `public/mp3/7.mp3` |
| 8 | 拳头 | `public/mp3/8.mp3` |

## 目录结构

```text
.
├── index.html              # Vite HTML 入口
├── package.json            # npm 脚本与依赖
├── public
│   ├── mediapipe           # 本地托管的 MediaPipe wasm 和手部模型
│   └── mp3                 # 1.mp3 到 8.mp3 固定手势音频
├── tsconfig.json           # TypeScript 配置
├── vercel.json             # Vercel 静态部署配置
└── src
    ├── fixedGestures.ts    # 8 种固定手势规则和音频映射
    ├── main.ts             # 页面逻辑、摄像头识别、播放控制
    ├── mediapipe.ts        # MediaPipe HandLandmarker 初始化与绘制
    ├── style.css           # 页面样式
    └── types.ts            # 数据类型定义
```

## 本地运行

```bash
npm install
npm run dev
```

打开 Vite 输出的本地地址，点击「启动摄像头」。浏览器会请求摄像头权限，页面只显示手部骨架。

## 使用流程

1. 确认 `public/mp3/` 下存在 `1.mp3` 到 `8.mp3`。
2. 点击「启动摄像头」。
3. 在摄像头前做出固定 8 种手势之一。
4. 页面识别稳定后自动播放对应音频。
5. 如需验证音频，点击「依次测试 8 个音频」。

## 部署到 Vercel

可以部署。该项目是纯前端静态应用，不依赖服务器数据库或 API。

```bash
npm install
npm run build
npx vercel --prod
```

注意事项：

- 摄像头访问需要安全上下文：`https://` 或 `localhost`。Vercel 默认提供 HTTPS。
- MediaPipe wasm 和手部模型文件随站点静态发布到 `public/mediapipe`，部署后不依赖额外 CDN 加载模型。
- 8 个音频文件必须随仓库提交到 `public/mp3/`，Vercel 才会一起发布。

## 构建测试

```bash
npm run build
```

该命令会先执行 TypeScript 类型检查，再执行 Vite 生产构建。

## 版本

当前版本：`v1.0.260817-1`