夜雨聆风01几行代码让电脑"看见"你的手势，从零开始做一个手指识别交互程序
你有没有过这样的想法？
在电脑前伸出手，隔空就能弹钢琴。
用手势控制屏幕上的特效，挥挥手就能触发炫酷的粒子效果。
或者只是想——让电脑"看见"你的动作，做出即时响应。
这听起来好像需要很复杂的技术？其实不然。
今天给你介绍一个神奇的工具——MediaPipe。
它就像给你的电脑装了一双AI眼睛，不用你写复杂的算法，几行代码就能让电脑看懂你的手势。
02MediaPipe 是什么？一句话版本
MediaPipe 是 Google 开源的 AI 视觉工具箱。它里面打包了各种训练好的AI模型，比如识别人脸、检测手势、追踪身体姿态等等。你不用关心这些模型是怎么训练的，直接拿来用就行。
03就像给电脑戴了一副智能手套
想象一下：
你给电脑戴上了一副智能手套。这副手套能"看见"你的手，并且能识别出：
- •
你伸出了几根手指 - •
每根手指是弯的还是直的 - •
你的手在屏幕上的位置 - •
甚至能识别你在做什么手势（比如握拳、比心、摇滚手势）
这副智能手套就是 MediaPipe Hands——专门用来检测和追踪人手的工具。
它会在你手上标出 21 个关键点（指尖、关节等位置），然后根据这些点的位置关系，判断手指的状态。
04原理揭秘：电脑是怎么"看见"手的？
MediaPipe Hands 的工作流程其实很简单：
- 1.拍照
：电脑通过摄像头实时获取画面 - 2.找手
：AI 在画面中找到手的位置 - 3.标关键点
：在手的轮廓上标出 21 个关键点的坐标 - 4.算状态
：根据关键点的相对位置，判断哪根手指是弯曲的，哪根是伸直的 - 5.输出结果
：把这些信息告诉给你的程序，让程序做出响应
整个过程在一瞬间完成，所以你看到的就是实时的手势识别效果。
05实战：5步制作手指识别交互程序
说了这么多，不如动手试试。下面是详细的操作流程，你只需要复制粘贴就能运行。
▶Step 1：准备工作
你只需要：
- •
一个电脑 - •
一个有摄像头的设备（笔记本自带摄像头就行） - •
一个代码编辑器（比如 VS Code、Work boddy、Hermes、Claude等） - •
一个现代浏览器（Chrome、Edge、Safari 都可以）
▶Step 2：把需求告诉AI!
打开你的代码编辑器(如Work boddy)，告诉它:我想做一个网页端的交互程序(通过自然语言来描述需求)
▶Step 3：复制粘贴代码
把下面的代码复制给代码编辑器,让它作为参考：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>🖐️ 手指识别 Demo</title> <style> body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: white; font-family: 'Segoe UI', sans-serif; margin: 0; padding: 20px; } .container { max-width: 800px; margin: 0 auto; } h1 { text-align: center; color: #00ffff; text-shadow: 0 0 20px rgba(0, 255, 255, 0.5); } .video-wrapper { background: #0a0a15; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); margin-bottom: 20px; } #videoElement { width: 100%; display: block; } #canvasElement { display: none; } .info-card { background: rgba(15, 52, 96, 0.6); border-radius: 15px; padding: 20px; margin-bottom: 15px; border: 1px solid rgba(0, 212, 255, 0.2); } .info-card h3 { color: #00ffff; margin-top: 0; } .finger-display { display: flex; gap: 10px; flex-wrap: wrap; } .finger-item { padding: 10px 20px; background: rgba(0, 212, 255, 0.1); border-radius: 10px; font-size: 14px; transition: all 0.3s; } .finger-item.active { background: rgba(0, 212, 255, 0.3); color: #00ffff; box-shadow: 0 0 15px rgba(0, 212, 255, 0.3); } .btn { background: linear-gradient(135deg, #00d4ff, #0088ff); color: #000; border: none; padding: 12px 30px; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5); } .controls { text-align: center; margin-top: 20px; } </style></head><body> <div class="container"> <h1>🖐️ AI手指识别 Demo</h1> <div class="video-wrapper"> <video id="videoElement" autoplay playsinline></video> <canvas id="canvasElement"></canvas> </div> <div class="info-card"> <h3>👆 检测到的手指</h3> <div class="finger-display" id="fingerDisplay"> <div class="finger-item" id="thumb">拇指</div> <div class="finger-item" id="index">食指</div> <div class="finger-item" id="middle">中指</div> <div class="finger-item" id="ring">无名指</div> <div class="finger-item" id="pinky">小指</div> </div> </div> <div class="info-card"> <h3>📊 检测信息</h3> <div>手势: <span id="gesture">未检测</span></div> <div>手指数量: <span id="fingerCount">0</span></div> </div> <div class="controls"> <button class="btn" onclick="startDetection()">🎬 开始检测</button> </div> </div> <!-- 引入 MediaPipe 库 --> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script> <script> // 初始化变量 let videoElement = null; let hands = null; let isRunning = false; // 手指名称和关键点索引 const fingerTips = [4, 8, 12, 16, 20]; // 指尖关键点 const fingerPips = [3, 6, 10, 14, 18]; // 手指中间关节 const fingerNames = ['thumb', 'index', 'middle', 'ring', 'pinky']; // 初始化函数 async function init() { videoElement = document.getElementById('videoElement'); // 创建 MediaPipe Hands 实例 hands = new Hands({ locateFile: (file) => { return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`; } }); // 配置参数 hands.setOptions({ maxNumHands: 2, // 最多检测两只手 modelComplexity: 1, // 模型复杂度 (0=快, 1=准) minDetectionConfidence: 0.7, // 检测置信度阈值 minTrackingConfidence: 0.5 // 追踪置信度阈值 }); // 设置结果回调 hands.onResults(onResults); console.log('MediaPipe Hands 初始化完成'); } // 开始检测 async function startDetection() { if (isRunning) return; try { // 请求摄像头权限 const stream = await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: 'user' } }); // 设置视频源 videoElement.srcObject = stream; isRunning = true; // 开始检测循环 detectLoop(); console.log('开始手势检测'); } catch (err) { alert(`无法访问摄像头: ${err.message}`); } } // 检测循环 async function detectLoop() { if (!isRunning) return; try { // 发送图像给 MediaPipe 处理 await hands.send({ image: videoElement }); } catch (err) { console.error('检测错误:', err); } // 继续下一帧 if (isRunning) { requestAnimationFrame(detectLoop); } } // 处理检测结果 function onResults(results) { // 重置手指状态 fingerNames.forEach(name => { document.getElementById(name).classList.remove('active'); }); let fingerCount = 0; let gesture = '未检测'; // 检查是否检测到了手 if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) { const landmarks = results.multiHandLandmarks[0]; // 检查每根手指 const fingersUp = []; for (let i = 0; i < 5; i++) { const tip = landmarks[fingerTips[i]]; const pip = landmarks[fingerPips[i]]; // 如果指尖在关节上方，说明手指伸直了 if (tip.y < pip.y) { fingersUp.push(true); document.getElementById(fingerNames[i]).classList.add('active'); fingerCount++; } else { fingersUp.push(false); } } // 检测手势 gesture = detectGesture(fingersUp); } // 更新显示 document.getElementById('fingerCount').textContent = fingerCount; document.getElementById('gesture').textContent = gesture; } // 手势检测 function detectGesture(fingersUp) { const count = fingersUp.filter(f => f).length; if (count === 0) return '✊ 握拳'; if (count === 1) { if (fingersUp[1]) return '☝️ 指向上'; if (fingersUp[0]) return '👍 竖拇指'; } if (count === 2) { if (fingersUp[1] && fingersUp[2]) return '✌️ 剪刀'; if (fingersUp[0] && fingersUp[4]) return '🤘 摇滚'; } if (count === 5) return '🖐️ 张开手'; return `${count} 根手指`; } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', init); </script></body></html>▶Step 4：运行程序
- 1.
保存文件 - 2.
用浏览器打开这个 HTML 文件（双击文件即可） - 3.
浏览器会弹出请求摄像头权限的提示，点击「允许」 - 4.
点击「开始检测」按钮
▶Step 5：见证奇迹
现在你把手放到摄像头前，就能看到：
- •
屏幕上显示你的实时画面 - •
当你伸出手指时，下面的手指标签会变成蓝色高亮 - •
手势识别会显示你当前做的是什么手势 
06代码解释
让我简单解释一下关键部分：
- 1.引入库
：通过 CDN 引入 MediaPipe Hands 和绘图工具 - 2.初始化 Hands
：创建一个 Hands 实例，配置检测参数 - 3.请求摄像头
：获取用户的摄像头权限，设置视频源 - 4.检测循环
：不断将视频帧发送给 MediaPipe 处理 - 5.处理结果
：根据返回的关键点，判断手指状态和手势
07还能做什么？扩展你的程序
这个基础程序只是起点，你还可以扩展很多功能：
▶1. 添加 MIDI 输出
让手势控制音乐！比如：
- •
每根手指对应一个音符 - •
伸出手指就播放对应的音 - •
捏合手势控制音量 
▶2. 添加视觉特效
比如：
- •
手指移动时产生粒子轨迹 - •
不同手势触发不同颜色的特效 - •
手掌位置出现发光效果 
▶3. 制作互动游戏
比如：
- •
用手势控制游戏角色 - •
手势切水果游戏 - •
手势拼图游戏
▶4. 结合其他工具
MediaPipe 还有很多其他工具：
- •Pose
：检测全身姿态 - •Face Mesh
：检测人脸关键点 - •Object Detection
：识别物体 - •Selfie Segmentation
：背景分割
08一句话总结
MediaPipe 就像给电脑装了一双 AI 眼睛——不用复杂算法，几行代码就能让电脑「看见」并理解你的手势，轻松制作各种交互程序！
DD老师 · 2026