案例 11 摄像头动作捕捉与隔空交互课件

适用学科

• 跨学科

案例目标

利用 MediaPipe 做手势翻页、举手答题和动作触发，适合公开课与互动展示。

建议技术框架

• MediaPipe
• Web Camera
• 触发反馈
• 课堂动作设计

推荐课堂结构

1. 导入问题或情境
2. 知识讲解或对象展示
3. 互动练习或操作环节
4. 反馈与总结
5. 教师提问 / 延伸思考

Codex 提示词

提示词 1：直接生成第一版课件

请直接帮我生成一版“案例 11 摄像头动作捕捉与隔空交互课件”相关的可运行课件，不要只给页面策划或设计说明。

请直接把课件做出来。

这次课件的要求如下：
- 学科：跨学科公开课
- 课题：挥手翻页、举手提示、张开手掌揭晓答案
- 重点设计：动作清晰、反馈明确、误触控制
- 页面要求：摄像头画面、状态条、反馈层、重置按钮

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的网页课件
- 至少包含这些文件：index.html、style.css、script.js
- 如果需要摄像头识别，请优先用浏览器可直接运行的方案或 MediaPipe CDN 方案

提示词 2：补互动和老师控制

请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。

请直接把课件做出来。

这次课件的要求如下：
- 学科：跨学科公开课
- 课题：挥手翻页、举手提示、张开手掌揭晓答案
- 重点设计：动作清晰、反馈明确、误触控制
- 页面要求：摄像头画面、状态条、反馈层、重置按钮

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的网页课件
- 至少包含这些文件：index.html、style.css、script.js
- 如果需要摄像头识别，请优先用浏览器可直接运行的方案或 MediaPipe CDN 方案

提示词 3：加入摄像头动作交互

请把这个课件升级成带摄像头动作交互的版本，让学生可以通过挥手、张开手掌或举手完成翻页、揭晓答案或暂停。

请直接把课件做出来。

这次课件的要求如下：
- 学科：跨学科公开课
- 课题：挥手翻页、举手提示、张开手掌揭晓答案
- 重点设计：动作清晰、反馈明确、误触控制
- 页面要求：摄像头画面、状态条、反馈层、重置按钮

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的网页课件
- 至少包含这些文件：index.html、style.css、script.js
- 如果需要摄像头识别，请优先用浏览器可直接运行的方案或 MediaPipe CDN 方案

配套素材

• gesture-classroom-scene.txt

课堂创意扩展

• 把本案例改造成游戏化版本
• 补一个教师控制面板
• 补一个适合教研分享的作品说明页