AI + MediaPipe库:善用AI,你也能够自己制作交互程序!

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