MediaPipe Hands极速CPU版手把手教你搭建手势识别WebUI想不想用你的电脑摄像头实时捕捉手部动作让屏幕上的虚拟手指跟着你一起动今天我们就来搭建一个基于MediaPipe Hands的极速手势识别WebUI。它最大的特点就是快而且完全不需要GPU仅靠CPU就能流畅运行让你在普通电脑上也能体验高精度的手部追踪。这个项目不仅能实时检测你手部的21个关键点还会用一套酷炫的“彩虹骨骼”把它们连接起来每根手指都有专属颜色科技感十足。整个过程完全本地运行无需联网下载模型避免了各种环境报错。下面我们就从零开始一步步把它跑起来。1. 环境准备与快速部署1.1 系统要求与依赖安装这个项目对硬件要求非常友好几乎任何一台能运行Python的电脑都可以。我们推荐使用Python 3.7及以上版本。首先创建一个干净的虚拟环境是个好习惯可以避免包冲突。打开你的终端Windows用CMD或PowerShellMac/Linux用Terminal执行以下命令# 创建并激活虚拟环境以venv为例 python -m venv hand_tracking_env # Windows hand_tracking_env\Scripts\activate # Mac/Linux source hand_tracking_env/bin/activate激活虚拟环境后安装核心依赖。只需要两个主要库pip install mediapipe opencv-python-headlessmediapipe: Google出品的多媒体机器学习框架包含了我们需要的Hands模型。opencv-python-headless: 用于图像处理和摄像头读取的“无头”版本不包含GUI功能更适合服务器或Web环境。1.2 核心代码极简手势检测依赖装好后我们先写一个最基础的脚本来测试MediaPipe Hands是否工作正常。创建一个名为test_hand.py的文件输入以下代码import cv2 import mediapipe as mp # 初始化MediaPipe Hands模块 mp_hands mp.solutions.hands mp_drawing mp.solutions.drawing_utils # 启动摄像头 cap cv2.VideoCapture(0) # 配置Hands模型 with mp_hands.Hands( static_image_modeFalse, # 视频流模式 max_num_hands2, # 最多检测2只手 min_detection_confidence0.5, # 检测置信度阈值 min_tracking_confidence0.5 # 跟踪置信度阈值 ) as hands: while cap.isOpened(): success, image cap.read() if not success: print(无法读取摄像头。) break # 将BGR图像转换为RGBMediaPipe需要RGB格式 image_rgb cv2.cvtColor(image, cv2.COLOR_BGR2RGB) # 水平翻转图像获得镜像视图更直观 image_rgb cv2.flip(image_rgb, 1) # 处理图像并检测手部 results hands.process(image_rgb) # 将图像转回BGR用于OpenCV显示 image cv2.cvtColor(image_rgb, cv2.COLOR_RGB2BGR) # 如果检测到手部关键点就绘制出来 if results.multi_hand_landmarks: for hand_landmarks in results.multi_hand_landmarks: # 使用MediaPipe自带的工具绘制默认的骨骼连接 mp_drawing.draw_landmarks( image, hand_landmarks, mp_hands.HAND_CONNECTIONS, mp_drawing.DrawingSpec(color(0, 255, 0), thickness2, circle_radius2), # 关节点样式 mp_drawing.DrawingSpec(color(255, 0, 0), thickness2) # 连接线样式 ) # 显示结果 cv2.imshow(MediaPipe Hands - 基础版, image) # 按‘q’键退出 if cv2.waitKey(5) 0xFF ord(q): break # 释放资源 cap.release() cv2.destroyAllWindows()保存并运行这个脚本python test_hand.py如果一切顺利你的摄像头会打开当你把手放在镜头前时屏幕上就会出现用绿色点和蓝色线条绘制的手部骨架。恭喜核心功能已经跑通了2. 打造专属“彩虹骨骼”可视化MediaPipe自带的绘制样式比较朴素。接下来我们实现文章开头提到的“彩虹骨骼”效果让每根手指都有独特的颜色视觉效果和可辨识度都会大大提升。2.1 理解21个关键点MediaPipe Hands输出的21个关键点有固定的顺序和含义。了解它们我们才能正确地用彩线连接。下图展示了这21个点的编号和名称 此处本应有示意图我们用文字描述其连接关系简单来说0号点是手腕。每根手指有4个点从手掌根部MCP关节到指尖TIP依次是MCP、PIP、DIP、TIP。例如食指的4个点编号是5(MCP)、6(PIP)、7(DIP)、8(TIP)。2.2 实现彩虹骨骼绘制算法我们创建一个新的文件rainbow_hand.py编写自定义的绘制函数。import cv2 import mediapipe as mp import numpy as np def draw_rainbow_hand(image, hand_landmarks): 在图像上绘制彩虹色的手部骨骼。 参数: image: 要绘制的BGR图像。 hand_landmarks: MediaPipe返回的手部关键点对象。 h, w, c image.shape # 将归一化的坐标转换为图像像素坐标 landmark_points [] for lm in hand_landmarks.landmark: x, y int(lm.x * w), int(lm.y * h) landmark_points.append((x, y)) # 定义每根手指的连接点和对应的BGR颜色 # 格式: ([点索引列表], (B, G, R)) finger_connections [ ([0, 1, 2, 3, 4], (0, 255, 255)), # 拇指: 黄色 (BGR中黄色是(0,255,255)) ([0, 5, 6, 7, 8], (255, 0, 128)), # 食指: 紫色 ([0, 9, 10, 11, 12], (255, 255, 0)), # 中指: 青色 (BGR中青色是(255,255,0)) ([0, 13, 14, 15, 16], (0, 255, 0)), # 无名指: 绿色 ([0, 17, 18, 19, 20], (0, 0, 255)) # 小指: 红色 ] # 绘制彩色的骨骼连接线 for connection, color in finger_connections: for i in range(len(connection) - 1): start_idx connection[i] end_idx connection[i 1] start_point landmark_points[start_idx] end_point landmark_points[end_idx] cv2.line(image, start_point, end_point, color, thickness3) # 绘制白色的关节点 for point in landmark_points: cv2.circle(image, point, 5, (255, 255, 255), -1) # 白色实心圆点 return image # 主循环部分与之前类似只需替换绘制部分 mp_hands mp.solutions.hands cap cv2.VideoCapture(0) with mp_hands.Hands( static_image_modeFalse, max_num_hands2, min_detection_confidence0.7, min_tracking_confidence0.5 ) as hands: while cap.isOpened(): success, frame cap.read() if not success: break frame_rgb cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) frame_rgb cv2.flip(frame_rgb, 1) results hands.process(frame_rgb) frame cv2.cvtColor(frame_rgb, cv2.COLOR_RGB2BGR) if results.multi_hand_landmarks: for hand_landmarks in results.multi_hand_landmarks: # 使用我们自定义的彩虹骨骼绘制函数 frame draw_rainbow_hand(frame, hand_landmarks) cv2.imshow(Rainbow Hand Tracking, frame) if cv2.waitKey(5) 0xFF ord(q): break cap.release() cv2.destroyAllWindows()运行这个脚本你会看到手部骨架变成了彩色的每根手指一目了然。你可以尝试比“耶”、点赞或者张开手掌看看骨骼是如何跟随变化的。3. 构建基于Flask的WebUI命令行窗口的展示不够直观也不便分享。接下来我们用Flask这个轻量级Web框架把我们的手势识别程序变成一个可以通过浏览器访问的Web应用。3.1 搭建Flask应用骨架首先安装Flaskpip install flask然后创建项目文件夹例如hand_tracking_webui并在其中创建以下文件结构hand_tracking_webui/ ├── app.py # Flask主程序 ├── templates/ │ └── index.html # 网页前端 └── static/ └── style.css # 网页样式可选3.2 后端服务app.pyapp.py是核心它负责启动摄像头、处理视频流、运行模型推理并通过网络把结果绘制了骨骼的图片发送给浏览器。from flask import Flask, render_template, Response import cv2 import mediapipe as mp import numpy as np app Flask(__name__) # 复用之前的彩虹骨骼绘制函数 def draw_rainbow_hand(image, hand_landmarks): h, w, c image.shape landmark_points [] for lm in hand_landmarks.landmark: x, y int(lm.x * w), int(lm.y * h) landmark_points.append((x, y)) finger_connections [ ([0, 1, 2, 3, 4], (0, 255, 255)), ([0, 5, 6, 7, 8], (255, 0, 128)), ([0, 9, 10, 11, 12], (255, 255, 0)), ([0, 13, 14, 15, 16], (0, 255, 0)), ([0, 17, 18, 19, 20], (0, 0, 255)) ] for connection, color in finger_connections: for i in range(len(connection) - 1): start_idx connection[i] end_idx connection[i 1] cv2.line(image, landmark_points[start_idx], landmark_points[end_idx], color, 3) for point in landmark_points: cv2.circle(image, point, 5, (255, 255, 255), -1) return image # 生成视频流的生成器函数 def generate_frames(): mp_hands mp.solutions.hands cap cv2.VideoCapture(0) with mp_hands.Hands( static_image_modeFalse, max_num_hands2, min_detection_confidence0.7, min_tracking_confidence0.5 ) as hands: while True: success, frame cap.read() if not success: break # 处理图像 frame_rgb cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) frame_rgb cv2.flip(frame_rgb, 1) results hands.process(frame_rgb) frame cv2.cvtColor(frame_rgb, cv2.COLOR_RGB2BGR) # 绘制彩虹骨骼 if results.multi_hand_landmarks: for hand_landmarks in results.multi_hand_landmarks: frame draw_rainbow_hand(frame, hand_landmarks) # 将帧编码为JPEG格式 ret, buffer cv2.imencode(.jpg, frame) frame_bytes buffer.tobytes() # 以MJPEG流格式输出 yield (b--frame\r\n bContent-Type: image/jpeg\r\n\r\n frame_bytes b\r\n) cap.release() # 定义路由 app.route(/) def index(): 渲染主页面 return render_template(index.html) app.route(/video_feed) def video_feed(): 视频流路由返回MJPEG流 return Response(generate_frames(), mimetypemultipart/x-mixed-replace; boundaryframe) if __name__ __main__: # debugTrue 仅用于开发生产环境应设为False app.run(host0.0.0.0, port5000, debugTrue)3.3 前端页面templates/index.html这个HTML页面很简单主要作用是在网页中显示我们的视频流。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleMediaPipe Hands 彩虹骨骼WebUI/title style body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; padding: 20px; } h1 { color: #333; } .container { max-width: 800px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } #videoFeed { width: 100%; border: 2px solid #ccc; border-radius: 5px; } .legend { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 15px; } .color-item { margin: 0 10px; display: flex; align-items: center; } .color-box { width: 20px; height: 20px; margin-right: 5px; border-radius: 3px; } /style /head body div classcontainer h1️ MediaPipe Hands 极速CPU版 - 彩虹骨骼可视化/h1 p将您的手置于摄像头前即可实时看到21个关键点与彩虹骨骼追踪。/p img idvideoFeed src{{ url_for(video_feed) }} div classlegend div classcolor-itemdiv classcolor-box stylebackground-color: rgb(255, 255, 0);/div拇指 (黄色)/div div classcolor-itemdiv classcolor-box stylebackground-color: rgb(128, 0, 128);/div食指 (紫色)/div div classcolor-itemdiv classcolor-box stylebackground-color: rgb(0, 255, 255);/div中指 (青色)/div div classcolor-itemdiv classcolor-box stylebackground-color: rgb(0, 255, 0);/div无名指 (绿色)/div div classcolor-itemdiv classcolor-box stylebackground-color: rgb(255, 0, 0);/div小指 (红色)/div /div p stylemargin-top: 20px; color: #666;白点代表关节彩线代表手指骨骼连接。完全本地运行无需GPU。/p /div /body /html3.4 运行你的WebUI现在一切就绪。在项目根目录下运行python app.py你会在终端看到类似* Running on http://0.0.0.0:5000的输出。打开你的浏览器访问http://127.0.0.1:5000或http://你的本地IP:5000。一个简洁的网页将会打开并显示来自你摄像头的实时视频流。当你把手放在镜头前酷炫的彩虹骨骼就会实时绘制在你的手部你可以把这个地址分享给同一局域网下的其他设备他们也能看到。4. 总结通过以上步骤我们成功搭建了一个完整的、基于MediaPipe Hands的手势识别Web应用。整个过程可以总结为三个核心阶段环境与核心验证我们安装了必要的库并编写了一个简单的脚本验证MediaPipe Hands模型能在你的CPU上流畅运行。效果增强我们抛弃了默认的绘制方式实现了一套自定义的“彩虹骨骼”可视化算法让手部追踪结果更加清晰、美观每根手指都一目了然。应用封装我们使用Flask框架将本地的摄像头视频流和AI处理结果封装成了一个可以通过浏览器访问的Web服务极大地提升了易用性和可分享性。这个项目的优势非常明显极速轻量专为CPU优化在普通笔记本电脑上也能达到实时帧率。开箱即用模型内置无需额外下载环境配置简单。效果出众高精度21点检测配合彩虹骨骼可视化兼具实用性与科技感。易于扩展基于此WebUI你可以轻松地添加手势识别逻辑比如识别点赞、比耶等手势并将其转化为具体的控制指令用于PPT控制、游戏交互、智能家居控制等丰富场景。现在你已经拥有了一个强大的手势识别工具箱。接下来不妨尝试修改代码增加手势识别逻辑或者为它设计一个更漂亮的界面创造出属于你自己的交互应用吧。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
MediaPipe Hands极速CPU版：手把手教你搭建手势识别WebUI
MediaPipe Hands极速CPU版手把手教你搭建手势识别WebUI想不想用你的电脑摄像头实时捕捉手部动作让屏幕上的虚拟手指跟着你一起动今天我们就来搭建一个基于MediaPipe Hands的极速手势识别WebUI。它最大的特点就是快而且完全不需要GPU仅靠CPU就能流畅运行让你在普通电脑上也能体验高精度的手部追踪。这个项目不仅能实时检测你手部的21个关键点还会用一套酷炫的“彩虹骨骼”把它们连接起来每根手指都有专属颜色科技感十足。整个过程完全本地运行无需联网下载模型避免了各种环境报错。下面我们就从零开始一步步把它跑起来。1. 环境准备与快速部署1.1 系统要求与依赖安装这个项目对硬件要求非常友好几乎任何一台能运行Python的电脑都可以。我们推荐使用Python 3.7及以上版本。首先创建一个干净的虚拟环境是个好习惯可以避免包冲突。打开你的终端Windows用CMD或PowerShellMac/Linux用Terminal执行以下命令# 创建并激活虚拟环境以venv为例 python -m venv hand_tracking_env # Windows hand_tracking_env\Scripts\activate # Mac/Linux source hand_tracking_env/bin/activate激活虚拟环境后安装核心依赖。只需要两个主要库pip install mediapipe opencv-python-headlessmediapipe: Google出品的多媒体机器学习框架包含了我们需要的Hands模型。opencv-python-headless: 用于图像处理和摄像头读取的“无头”版本不包含GUI功能更适合服务器或Web环境。1.2 核心代码极简手势检测依赖装好后我们先写一个最基础的脚本来测试MediaPipe Hands是否工作正常。创建一个名为test_hand.py的文件输入以下代码import cv2 import mediapipe as mp # 初始化MediaPipe Hands模块 mp_hands mp.solutions.hands mp_drawing mp.solutions.drawing_utils # 启动摄像头 cap cv2.VideoCapture(0) # 配置Hands模型 with mp_hands.Hands( static_image_modeFalse, # 视频流模式 max_num_hands2, # 最多检测2只手 min_detection_confidence0.5, # 检测置信度阈值 min_tracking_confidence0.5 # 跟踪置信度阈值 ) as hands: while cap.isOpened(): success, image cap.read() if not success: print(无法读取摄像头。) break # 将BGR图像转换为RGBMediaPipe需要RGB格式 image_rgb cv2.cvtColor(image, cv2.COLOR_BGR2RGB) # 水平翻转图像获得镜像视图更直观 image_rgb cv2.flip(image_rgb, 1) # 处理图像并检测手部 results hands.process(image_rgb) # 将图像转回BGR用于OpenCV显示 image cv2.cvtColor(image_rgb, cv2.COLOR_RGB2BGR) # 如果检测到手部关键点就绘制出来 if results.multi_hand_landmarks: for hand_landmarks in results.multi_hand_landmarks: # 使用MediaPipe自带的工具绘制默认的骨骼连接 mp_drawing.draw_landmarks( image, hand_landmarks, mp_hands.HAND_CONNECTIONS, mp_drawing.DrawingSpec(color(0, 255, 0), thickness2, circle_radius2), # 关节点样式 mp_drawing.DrawingSpec(color(255, 0, 0), thickness2) # 连接线样式 ) # 显示结果 cv2.imshow(MediaPipe Hands - 基础版, image) # 按‘q’键退出 if cv2.waitKey(5) 0xFF ord(q): break # 释放资源 cap.release() cv2.destroyAllWindows()保存并运行这个脚本python test_hand.py如果一切顺利你的摄像头会打开当你把手放在镜头前时屏幕上就会出现用绿色点和蓝色线条绘制的手部骨架。恭喜核心功能已经跑通了2. 打造专属“彩虹骨骼”可视化MediaPipe自带的绘制样式比较朴素。接下来我们实现文章开头提到的“彩虹骨骼”效果让每根手指都有独特的颜色视觉效果和可辨识度都会大大提升。2.1 理解21个关键点MediaPipe Hands输出的21个关键点有固定的顺序和含义。了解它们我们才能正确地用彩线连接。下图展示了这21个点的编号和名称 此处本应有示意图我们用文字描述其连接关系简单来说0号点是手腕。每根手指有4个点从手掌根部MCP关节到指尖TIP依次是MCP、PIP、DIP、TIP。例如食指的4个点编号是5(MCP)、6(PIP)、7(DIP)、8(TIP)。2.2 实现彩虹骨骼绘制算法我们创建一个新的文件rainbow_hand.py编写自定义的绘制函数。import cv2 import mediapipe as mp import numpy as np def draw_rainbow_hand(image, hand_landmarks): 在图像上绘制彩虹色的手部骨骼。 参数: image: 要绘制的BGR图像。 hand_landmarks: MediaPipe返回的手部关键点对象。 h, w, c image.shape # 将归一化的坐标转换为图像像素坐标 landmark_points [] for lm in hand_landmarks.landmark: x, y int(lm.x * w), int(lm.y * h) landmark_points.append((x, y)) # 定义每根手指的连接点和对应的BGR颜色 # 格式: ([点索引列表], (B, G, R)) finger_connections [ ([0, 1, 2, 3, 4], (0, 255, 255)), # 拇指: 黄色 (BGR中黄色是(0,255,255)) ([0, 5, 6, 7, 8], (255, 0, 128)), # 食指: 紫色 ([0, 9, 10, 11, 12], (255, 255, 0)), # 中指: 青色 (BGR中青色是(255,255,0)) ([0, 13, 14, 15, 16], (0, 255, 0)), # 无名指: 绿色 ([0, 17, 18, 19, 20], (0, 0, 255)) # 小指: 红色 ] # 绘制彩色的骨骼连接线 for connection, color in finger_connections: for i in range(len(connection) - 1): start_idx connection[i] end_idx connection[i 1] start_point landmark_points[start_idx] end_point landmark_points[end_idx] cv2.line(image, start_point, end_point, color, thickness3) # 绘制白色的关节点 for point in landmark_points: cv2.circle(image, point, 5, (255, 255, 255), -1) # 白色实心圆点 return image # 主循环部分与之前类似只需替换绘制部分 mp_hands mp.solutions.hands cap cv2.VideoCapture(0) with mp_hands.Hands( static_image_modeFalse, max_num_hands2, min_detection_confidence0.7, min_tracking_confidence0.5 ) as hands: while cap.isOpened(): success, frame cap.read() if not success: break frame_rgb cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) frame_rgb cv2.flip(frame_rgb, 1) results hands.process(frame_rgb) frame cv2.cvtColor(frame_rgb, cv2.COLOR_RGB2BGR) if results.multi_hand_landmarks: for hand_landmarks in results.multi_hand_landmarks: # 使用我们自定义的彩虹骨骼绘制函数 frame draw_rainbow_hand(frame, hand_landmarks) cv2.imshow(Rainbow Hand Tracking, frame) if cv2.waitKey(5) 0xFF ord(q): break cap.release() cv2.destroyAllWindows()运行这个脚本你会看到手部骨架变成了彩色的每根手指一目了然。你可以尝试比“耶”、点赞或者张开手掌看看骨骼是如何跟随变化的。3. 构建基于Flask的WebUI命令行窗口的展示不够直观也不便分享。接下来我们用Flask这个轻量级Web框架把我们的手势识别程序变成一个可以通过浏览器访问的Web应用。3.1 搭建Flask应用骨架首先安装Flaskpip install flask然后创建项目文件夹例如hand_tracking_webui并在其中创建以下文件结构hand_tracking_webui/ ├── app.py # Flask主程序 ├── templates/ │ └── index.html # 网页前端 └── static/ └── style.css # 网页样式可选3.2 后端服务app.pyapp.py是核心它负责启动摄像头、处理视频流、运行模型推理并通过网络把结果绘制了骨骼的图片发送给浏览器。from flask import Flask, render_template, Response import cv2 import mediapipe as mp import numpy as np app Flask(__name__) # 复用之前的彩虹骨骼绘制函数 def draw_rainbow_hand(image, hand_landmarks): h, w, c image.shape landmark_points [] for lm in hand_landmarks.landmark: x, y int(lm.x * w), int(lm.y * h) landmark_points.append((x, y)) finger_connections [ ([0, 1, 2, 3, 4], (0, 255, 255)), ([0, 5, 6, 7, 8], (255, 0, 128)), ([0, 9, 10, 11, 12], (255, 255, 0)), ([0, 13, 14, 15, 16], (0, 255, 0)), ([0, 17, 18, 19, 20], (0, 0, 255)) ] for connection, color in finger_connections: for i in range(len(connection) - 1): start_idx connection[i] end_idx connection[i 1] cv2.line(image, landmark_points[start_idx], landmark_points[end_idx], color, 3) for point in landmark_points: cv2.circle(image, point, 5, (255, 255, 255), -1) return image # 生成视频流的生成器函数 def generate_frames(): mp_hands mp.solutions.hands cap cv2.VideoCapture(0) with mp_hands.Hands( static_image_modeFalse, max_num_hands2, min_detection_confidence0.7, min_tracking_confidence0.5 ) as hands: while True: success, frame cap.read() if not success: break # 处理图像 frame_rgb cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) frame_rgb cv2.flip(frame_rgb, 1) results hands.process(frame_rgb) frame cv2.cvtColor(frame_rgb, cv2.COLOR_RGB2BGR) # 绘制彩虹骨骼 if results.multi_hand_landmarks: for hand_landmarks in results.multi_hand_landmarks: frame draw_rainbow_hand(frame, hand_landmarks) # 将帧编码为JPEG格式 ret, buffer cv2.imencode(.jpg, frame) frame_bytes buffer.tobytes() # 以MJPEG流格式输出 yield (b--frame\r\n bContent-Type: image/jpeg\r\n\r\n frame_bytes b\r\n) cap.release() # 定义路由 app.route(/) def index(): 渲染主页面 return render_template(index.html) app.route(/video_feed) def video_feed(): 视频流路由返回MJPEG流 return Response(generate_frames(), mimetypemultipart/x-mixed-replace; boundaryframe) if __name__ __main__: # debugTrue 仅用于开发生产环境应设为False app.run(host0.0.0.0, port5000, debugTrue)3.3 前端页面templates/index.html这个HTML页面很简单主要作用是在网页中显示我们的视频流。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleMediaPipe Hands 彩虹骨骼WebUI/title style body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; padding: 20px; } h1 { color: #333; } .container { max-width: 800px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } #videoFeed { width: 100%; border: 2px solid #ccc; border-radius: 5px; } .legend { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 15px; } .color-item { margin: 0 10px; display: flex; align-items: center; } .color-box { width: 20px; height: 20px; margin-right: 5px; border-radius: 3px; } /style /head body div classcontainer h1️ MediaPipe Hands 极速CPU版 - 彩虹骨骼可视化/h1 p将您的手置于摄像头前即可实时看到21个关键点与彩虹骨骼追踪。/p img idvideoFeed src{{ url_for(video_feed) }} div classlegend div classcolor-itemdiv classcolor-box stylebackground-color: rgb(255, 255, 0);/div拇指 (黄色)/div div classcolor-itemdiv classcolor-box stylebackground-color: rgb(128, 0, 128);/div食指 (紫色)/div div classcolor-itemdiv classcolor-box stylebackground-color: rgb(0, 255, 255);/div中指 (青色)/div div classcolor-itemdiv classcolor-box stylebackground-color: rgb(0, 255, 0);/div无名指 (绿色)/div div classcolor-itemdiv classcolor-box stylebackground-color: rgb(255, 0, 0);/div小指 (红色)/div /div p stylemargin-top: 20px; color: #666;白点代表关节彩线代表手指骨骼连接。完全本地运行无需GPU。/p /div /body /html3.4 运行你的WebUI现在一切就绪。在项目根目录下运行python app.py你会在终端看到类似* Running on http://0.0.0.0:5000的输出。打开你的浏览器访问http://127.0.0.1:5000或http://你的本地IP:5000。一个简洁的网页将会打开并显示来自你摄像头的实时视频流。当你把手放在镜头前酷炫的彩虹骨骼就会实时绘制在你的手部你可以把这个地址分享给同一局域网下的其他设备他们也能看到。4. 总结通过以上步骤我们成功搭建了一个完整的、基于MediaPipe Hands的手势识别Web应用。整个过程可以总结为三个核心阶段环境与核心验证我们安装了必要的库并编写了一个简单的脚本验证MediaPipe Hands模型能在你的CPU上流畅运行。效果增强我们抛弃了默认的绘制方式实现了一套自定义的“彩虹骨骼”可视化算法让手部追踪结果更加清晰、美观每根手指都一目了然。应用封装我们使用Flask框架将本地的摄像头视频流和AI处理结果封装成了一个可以通过浏览器访问的Web服务极大地提升了易用性和可分享性。这个项目的优势非常明显极速轻量专为CPU优化在普通笔记本电脑上也能达到实时帧率。开箱即用模型内置无需额外下载环境配置简单。效果出众高精度21点检测配合彩虹骨骼可视化兼具实用性与科技感。易于扩展基于此WebUI你可以轻松地添加手势识别逻辑比如识别点赞、比耶等手势并将其转化为具体的控制指令用于PPT控制、游戏交互、智能家居控制等丰富场景。现在你已经拥有了一个强大的手势识别工具箱。接下来不妨尝试修改代码增加手势识别逻辑或者为它设计一个更漂亮的界面创造出属于你自己的交互应用吧。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
