手势种花 HandyTulip 的技术实现
本文介绍 HandyTulip 的核心实现思路：摄像头采集、手势模型推理、稳定性判定与分阶段动画种花，确保在浏览器端实现流畅互动。
技术流程（Mermaid）
flowchart TD A[用户打开页面
User opens page] --> B[请求摄像头权限
Request camera permission] B --> C[采集视频流
Capture video stream] C --> D[加载/初始化手势模型
Init HandLandmarker] D --> E[逐帧推理手势关键点
Infer hand landmarks] E --> F[稳定性判定
Stability check] F --> G{触发条件满足？
Trigger satisfied?} G -- 否/No --> E G -- 是/Yes --> H[种花：生成 DOM 与动画
Plant tulip DOM + animation] H --> I[分阶段成长/凋谢
Stage growth/decay] I --> J[清理与重置
Cleanup + reset]
关键模块拆解
- 权限与采集：通过
getUserMedia获取视频流，设置分辨率以兼顾清晰度与性能。 - 模型加载：使用 MediaPipe 手势模型（HandLandmarker）在浏览器端推理，避免后端依赖。
- 稳定性判定：对连续若干帧的关键点进行抖动过滤，确保非误触发。
- 触发与动画：满足手势条件后插入花朵 DOM，使用 CSS 动画分阶段展示成长与凋谢。
- 状态与清理：在动画结束后清理节点并复位状态，准备下一次交互。
实现要点与经验
- 性能：控制推理帧率与动画复杂度，优先保持交互顺滑。
- 兼容性：在移动端与桌面端测试，适当降级（如关闭高开销效果）。
- 可维护：模块化拆分识别、判定、渲染，避免耦合。
- 用户提示：使用可关闭的中英双语提示（基于
localStorage），减少打扰。