手势种花 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 动画分阶段展示成长与凋谢。
• 状态与清理 在动画结束后清理节点并复位状态，准备下一次交互。

实现要点与经验

相关链接

• HandyTulip 互动页面
• 博客