当前位置：首页 > news >正文

手把手教你搭建手势识别系统：基于MediaPipe Hands的彩虹骨骼版快速部署教程

news 2026/7/14 8:35:32

手把手教你搭建手势识别系统：基于MediaPipe Hands的彩虹骨骼版快速部署教程

1. 引言：手势识别的魅力与价值

手势识别正在改变我们与数字世界的交互方式。想象一下，无需触碰屏幕，只需在空中比划几个简单手势，就能控制设备、玩游戏或者进行艺术创作。这种自然直观的交互方式，正是计算机视觉技术带给我们的惊喜。

本教程将带你从零开始，搭建一个炫酷的"彩虹骨骼版"手势识别系统。基于Google开源的MediaPipe Hands模型，我们不仅能精准检测手部21个关键点，还能用不同颜色标记每根手指，让识别结果一目了然。最棒的是，整个过程完全在本地运行，无需高端GPU，普通电脑就能流畅使用。

2. 环境准备与快速部署

2.1 系统要求

在开始之前，请确保你的开发环境满足以下要求：

操作系统：Windows 10/11、macOS 10.15+ 或 Ubuntu 18.04+
Python版本：3.7-3.9（推荐3.8）
内存：至少4GB可用内存
存储空间：500MB可用空间

2.2 一键安装依赖

打开终端或命令提示符，执行以下命令安装必要依赖：

pip install mediapipe opencv-python numpy flask

这个命令会安装四个核心库：

mediapipe：Google的手势识别模型
opencv-python：图像处理工具
numpy：数值计算库
flask：轻量级Web框架

2.3 验证安装

创建一个简单的Python脚本test_install.py，内容如下：

import cv2 import mediapipe as mp print("OpenCV版本:", cv2.__version__) print("MediaPipe版本:", mp.__version__)

运行后如果能看到版本号输出，说明环境配置成功。

3. 基础手势识别功能实现

3.1 初始化手势检测器

让我们先创建一个基础的手势检测脚本hand_detection.py：

import cv2 import mediapipe as mp # 初始化MediaPipe Hands模块 mp_hands = mp.solutions.hands hands = mp_hands.Hands( static_image_mode=True, # 静态图像模式 max_num_hands=2, # 最多检测2只手 min_detection_confidence=0.5 # 最小检测置信度 ) # 读取测试图像 image = cv2.imread('test_hand.jpg') rgb_image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB) # 进行手势检测 results = hands.process(rgb_image) if results.multi_hand_landmarks: print("成功检测到手部关键点！") else: print("未检测到手部")

3.2 测试你的第一个手势识别

准备一张包含手部的图片（命名为test_hand.jpg），放在同一目录下运行脚本。如果一切正常，你会看到检测成功的提示。

4. 彩虹骨骼可视化实现

4.1 理解手部关键点

MediaPipe Hands模型会返回21个3D关键点，编号和位置如下：

0: 手腕 1-4: 拇指（从根部到指尖） 5-8: 食指 9-12: 中指 13-16: 无名指 17-20: 小指

4.2 绘制彩色骨骼

创建rainbow_skeleton.py文件，添加以下代码：

import cv2 import numpy as np # 定义五指颜色（BGR格式） FINGER_COLORS = { 'thumb': (0, 255, 255), # 黄色 'index': (128, 0, 128), # 紫色 'middle': (255, 255, 0), # 青色 'ring': (0, 255, 0), # 绿色 'pinky': (0, 0, 255) # 红色 } def draw_rainbow_skeleton(image, landmarks): h, w = image.shape[:2] # 转换坐标到图像尺寸 landmark_coords = [(int(l.x * w), int(l.y * h)) for l in landmarks] # 手指连接顺序 connections = [ ('thumb', [0,1,2,3,4]), ('index', [0,5,6,7,8]), ('middle', [0,9,10,11,12]), ('ring', [0,13,14,15,16]), ('pinky', [0,17,18,19,20]) ] # 绘制彩色骨骼 for finger_name, indices in connections: color = FINGER_COLORS[finger_name] for i in range(len(indices)-1): start = landmark_coords[indices[i]] end = landmark_coords[indices[i+1]] cv2.line(image, start, end, color, 3) # 绘制白色关节点 for x, y in landmark_coords: cv2.circle(image, (x, y), 5, (255,255,255), -1) return image

4.3 完整示例

将检测和可视化结合起来：

# 接前面的hand_detection.py代码 if results.multi_hand_landmarks: for hand_landmarks in results.multi_hand_landmarks: image = draw_rainbow_skeleton(image, hand_landmarks.landmark) cv2.imshow('Rainbow Hand Skeleton', image) cv2.waitKey(0) cv2.destroyAllWindows()

运行后你将看到手部被彩色线条连接，每根手指都有独特的颜色。

5. 构建Web交互界面

5.1 创建Flask应用

让我们用Flask构建一个简单的Web界面。创建app.py：

from flask import Flask, request, jsonify, send_file import cv2 import numpy as np import mediapipe as mp from io import BytesIO app = Flask(__name__) # 初始化手势检测器 mp_hands = mp.solutions.hands hands = mp_hands.Hands() @app.route('/upload', methods=['POST']) def upload_file(): if 'file' not in request.files: return jsonify({'error': 'No file uploaded'}), 400 file = request.files['file'] img_bytes = file.read() img_array = np.frombuffer(img_bytes, np.uint8) image = cv2.imdecode(img_array, cv2.IMREAD_COLOR) # 手势检测 rgb_image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB) results = hands.process(rgb_image) if results.multi_hand_landmarks: for hand_landmarks in results.multi_hand_landmarks: image = draw_rainbow_skeleton(image, hand_landmarks.landmark) # 返回处理后的图像 _, img_encoded = cv2.imencode('.jpg', image) return send_file( BytesIO(img_encoded.tobytes()), mimetype='image/jpeg' ) if __name__ == '__main__': app.run(host='0.0.0.0', port=5000)

5.2 创建简单HTML界面

在templates文件夹中创建index.html：

<!DOCTYPE html> <html> <head> <title>彩虹手势识别</title> </head> <body> <h1>上传手部图片</h1> <form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="file" accept="image/*"> <button type="submit">分析手势</button> </form> <div id="result"> <h2>识别结果：</h2> <img id="resultImage" style="max-width: 500px;"> </div> <script> document.getElementById('uploadForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(this); fetch('/upload', { method: 'POST', body: formData }) .then(response => response.blob()) .then(blob => { const url = URL.createObjectURL(blob); document.getElementById('resultImage').src = url; }); }); </script> </body> </html>

5.3 运行Web应用

启动Flask应用：

python app.py

打开浏览器访问http://localhost:5000，上传手部图片即可看到彩虹骨骼效果。

6. 实用技巧与进阶功能

6.1 提高检测准确率

确保手部在图像中占据足够比例（建议至少200×200像素）
使用清晰、光线充足的图片
避免复杂背景干扰
可以调整min_detection_confidence参数（0-1之间）

6.2 实时视频处理

修改代码实现实时摄像头手势识别：

cap = cv2.VideoCapture(0) # 0表示默认摄像头 while cap.isOpened(): ret, frame = cap.read() if not ret: break rgb_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) results = hands.process(rgb_frame) if results.multi_hand_landmarks: for hand_landmarks in results.multi_hand_landmarks: frame = draw_rainbow_skeleton(frame, hand_landmarks.landmark) cv2.imshow('Real-time Hand Tracking', frame) if cv2.waitKey(1) & 0xFF == ord('q'): break cap.release() cv2.destroyAllWindows()