第 24 课 摄像头识别入门：MediaPipe 手势 / 姿态 / 面部关键点
本课定位
帮助老师建立摄像头互动课件的基本认知：浏览器如何拿到摄像头、MediaPipe 如何识别关键点、课堂上适合做哪些动作交互。
本课技术框架
- Web Camera API
- MediaPipe Hands
- MediaPipe Pose
- Canvas 覆盖层
学习目标
- 理解摄像头识别课件的基本原理
- 完成一个最小手势或姿态识别页面
- 掌握课堂中适合使用的动作触发场景
课前准备
- 准备摄像头可用的笔记本或外接摄像头
- 选择一个简单动作，如挥手、举手、张开手掌
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 展示摄像头识别课件的课堂效果 | 展示摄像头识别课件的课堂效果 |
| 10-20 分钟 | 讲浏览器摄像头权限、MediaPipe 输出和关键点概念 | 讲浏览器摄像头权限、MediaPipe 输出和关键点概念 |
| 20-40 分钟 | 用 Codex 做一个最小手势识别页 | 用 Codex 做一个最小手势识别页 |
| 40-55 分钟 | 测试识别效果并讨论课堂环境影响 | 测试识别效果并讨论课堂环境影响 |
| 55-60 分钟 | 整理适合本校设备的使用建议 | 整理适合本校设备的使用建议 |
核心讲授点
- 摄像头课件最适合做简洁、动作明确的交互
- 课堂环境里的光线、距离和设备性能会影响识别效果
- 先做可用的动作触发，再考虑更复杂的体感设计
课堂案例
挥手翻页与举手触发提示
用两个最简单也最贴合课堂的动作建立摄像头交互的成功体验。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“摄像头识别入门：MediaPipe 手势 / 姿态 / 面部关键点”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 场景：公开课中的挥手翻页、举手显示提示、张开手掌揭晓答案
- 设备：教室笔记本电脑 + 外接摄像头
- 页面需求：摄像头画面、关键点覆盖层、动作状态文本、大按钮重置
- 教学提醒：光线均匀、背景简单、学生站位固定
- 本次要做的课件：一个最小摄像头识别演示页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的网页课件
- 至少包含这些文件：index.html、style.css、script.js
- 如果需要摄像头识别，请优先用浏览器可直接运行的方案或 MediaPipe CDN 方案提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 场景：公开课中的挥手翻页、举手显示提示、张开手掌揭晓答案
- 设备：教室笔记本电脑 + 外接摄像头
- 页面需求：摄像头画面、关键点覆盖层、动作状态文本、大按钮重置
- 教学提醒：光线均匀、背景简单、学生站位固定
- 本次要做的课件：一个最小摄像头识别演示页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的网页课件
- 至少包含这些文件：index.html、style.css、script.js
- 如果需要摄像头识别，请优先用浏览器可直接运行的方案或 MediaPipe CDN 方案提示词 3：加入摄像头动作交互
text
请把这个课件升级成带摄像头动作交互的版本，让学生可以通过挥手、张开手掌或举手完成翻页、揭晓答案或暂停。
请直接把课件做出来。
这次课件的要求如下：
- 场景：公开课中的挥手翻页、举手显示提示、张开手掌揭晓答案
- 设备：教室笔记本电脑 + 外接摄像头
- 页面需求：摄像头画面、关键点覆盖层、动作状态文本、大按钮重置
- 教学提醒：光线均匀、背景简单、学生站位固定
- 本次要做的课件：一个最小摄像头识别演示页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的网页课件
- 至少包含这些文件：index.html、style.css、script.js
- 如果需要摄像头识别，请优先用浏览器可直接运行的方案或 MediaPipe CDN 方案本课交付物
- 一个最小手势 / 姿态识别演示页
创意扩展
- 加入动作计数
- 做“动作完成才显示答案”的课堂小游戏