JSExpertMax 手势控制器 - JS Expert 周 7.0

欢迎来到第七届 JavaScript Expert 周。这是开始我们旅程的初始代码。

请为该项目标上一颗星 🌟

实时演示

• 要测试最终项目，请点击这里

预览

先决条件

• 本项目使用 Node.js v19.6 创建。
• 建议在 Unix 环境（Linux）中运行该项目。如果您使用 Windows，推荐安装 Windows Subsystem for Linux，因为课程中会展示一些 Windows 上可能不存在的 Linux 命令。

重要提示

• 每天 18:00 我都会将当天课程的代码上传到 classes 文件夹。如果您要从头开始项目，请先删除 classes 文件夹！

运行

• 在包含 package.json 文件的目录下执行 npm ci 来恢复依赖包。
• 执行 npm start，然后在浏览器中访问 http://localhost:3000 查看页面。

功能清单

• 标题列表

  • [] - 搜索框在输入搜索词时不应卡顿。
  • [] - 应在屏幕上绘制手势，并确保背景元素仍可点击 🙌
  • [] - 当使用张开的手掌时，应触发向上滚动 🖐
  • [] - 当使用握紧的手掌时，应触发向下滚动 ✊
  • [] - 当使用捏合手势时，应触发对最近元素的点击 🤏🏻
  • [] - 移动屏幕上的元素时，应在相关元素上触发 :hover 事件。

• 视频播放器

  • [] - 应能通过眨眼来播放或暂停视频 😁
  • [] - 所有机器学习处理都应通过 Web Worker 完成。

挑战

• [] - 第 1 课：区分左右眼的眨眼，并更新日志以显示是哪只眼睛眨了。
• [] - 第 2 课：识别单独的手势并在日志中打印出来。
• [] - 第 3 课：修复视频标题横幅，使其位于手势图像之后并可点击。
• [] - 第 4 课：在视频播放器中也使用虚拟手势。

进阶挑战：实现单元测试并达到 100% 的覆盖率。

课程中提到的链接：

• 所有链接已汇总在 referencias.md 中。

注意事项

• 如有任何关于挑战的问题，请在我们的社区中提问，我们的目标是以有趣的方式帮助您学习。有问题就去那里问吧！

• 完成任何一项挑战后，请将其发送到 Discord 社区的 #desafios 频道。

常见问题解答

• browser-sync 在 Windows 上总是报错且无法启动：
  • 解决方案：将 browser-sync 替换为 http-server。
    1. 使用 npm i -D http-server 安装 http-server。
    2. 在 package.json 中删除所有 browser-sync 相关命令，并替换为 npx http-server .。
    3. 现在项目将在 :8080 端口运行，因此请在浏览器中访问 http://localhost:8080/。
    • 唯一的缺点是，当您更改代码时，项目不会自动重新加载，每次修改都需要手动刷新页面。
• 浏览器出现 “WebGL 不受此设备支持” 错误：
  • 在 Chrome 中输入 chrome://gpu/ 检查 WebGL 是否已启用。
  • 可能的解决方案：
    1. 选项 1：启用硬件加速（如果可用）。
       • Chrome => 设置 > 系统 > 在可用时使用硬件加速。
       • Firefox => 浏览器选项 > 性能 > 在可用时使用硬件加速。
    2. 选项 2：更新显卡驱动程序。
       • 详情请参阅 webgl-is-not-supported-on-chrome-firefox。
    3. 选项 3：将 WebGL 切换为 CPU（速度较慢）或 WebAssembly。
       • https://blog.tensorflow.org/2020/03/introducing-webassembly-backend-for-tensorflow-js.html
    • （感谢 Discord 社区中的用户 Volpin）

布局说明

• 界面基于 gunnarhawk 的项目 Streaming Service。

JSExpertMax 手势控制器快速上手指南

本指南帮助开发者快速启动 JSExpertMax Gesture Controller（Semana JS Expert 7.0 初始模板），这是一个基于机器学习的网页手势交互项目。

环境准备

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

• Node.js: 推荐使用 v19.6 版本（项目基于此版本创建）。
• 操作系统:
  • 首选 Unix/Linux 环境。
  • Windows 用户: 强烈建议安装并使用 WSL2 (Windows Subsystem for Linux)，因为部分课程命令依赖 Linux 环境，在原生 Windows 下可能无法执行。
• 浏览器: 支持 WebGL 的现代浏览器（如 Chrome 或 Firefox）。请确保已开启硬件加速。

安装步骤

1. 克隆或下载项目代码到本地。
2. 清理初始状态（可选）： 如果您希望从零开始完成挑战，请删除项目根目录下的 classes 文件夹。该文件夹包含每日课程的参考答案。

   rm -rf classes
   

3. 安装依赖： 进入项目根目录（包含 package.json 的文件夹），运行以下命令安装所需包：

   npm ci
   

   提示：国内用户若下载缓慢，可临时配置淘宝镜像源： npm config set registry https://registry.npmmirror.com

基本使用

安装完成后，按照以下步骤启动项目并查看效果：

1. 启动开发服务器： 在终端执行：

   npm start
   

2. 访问应用： 打开浏览器，访问地址： http://localhost:3000

3. 功能体验： 允许浏览器访问摄像头后，您将看到手部追踪演示。您可以尝试以下基础交互（具体实现需参考后续挑战任务）：

   • 张开手掌 🖐：向上滚动页面
   • 握紧拳头 ✊：向下滚动页面
   • 捏合手势 🤏🏻：点击最近元素
   • 眨眼 😁：控制视频播放/暂停

现在您已成功运行项目，可以开始探索代码并尝试完成 README 中列出的功能挑战了。