眼睛注视检测

使用 JavaScript 中的机器学习来检测眼动，并构建基于注视控制的交互体验！

演示

访问 https://gaze-keyboard.netlify.app/ (在移动设备上也能很好地运行！！) 😃

灵感来源于 Android 应用程序 "Look to speak"。

该工具使用了 Tensorflow.js 的 人脸关键点检测模型。

检测内容

此工具可以检测用户是看向右侧、左侧、上方还是正前方。

使用方法

安装

作为模块安装：

npm install gaze-detection --save

代码示例

首先导入模块：

import gaze from "gaze-detection";

加载机器学习模型：

await gaze.loadModel();

然后，设置用于检测的摄像头视频流。setUpCamera 方法需要一个 video HTML 元素，如果使用非默认摄像头，还可以传入摄像头设备 ID。

const videoElement = document.querySelector("video");

const init = async () => {
  // 使用默认摄像头
  await gaze.setUpCamera(videoElement);

  // 或者使用其他摄像头输入设备
  const mediaDevices = await navigator.mediaDevices.enumerateDevices();
  const camera = mediaDevices.find(
    (device) =>
      device.kind === "videoinput" &&
      device.label.includes(/* 从可用设备列表中选择的标签*/)
  );

  await gaze.setUpCamera(videoElement, camera.deviceId);
};

开始进行预测：

const predict = async () => {
  const gazePrediction = await gaze.getGazePrediction();
  console.log("注视方向: ", gazePrediction); // 返回 'RIGHT'、'LEFT'、'STRAIGHT' 或 'TOP'
  if (gazePrediction === "RIGHT") {
    // 当用户看向右侧时执行某些操作
  }
  let raf = requestAnimationFrame(predict);
};
predict();

停止检测：

cancelAnimationFrame(raf);

Gaze-detection 快速上手指南

环境准备

• 系统要求：支持现代浏览器的操作系统（Windows、macOS、Linux），推荐使用 Chrome 或 Edge 浏览器。
• 前置依赖：
  • Node.js (v14+) 和 npm
  • 一个可用的摄像头（内置或外接）
  • 前端项目环境（支持 ES6 模块导入）

注意：该库基于 TensorFlow.js 的人脸关键点检测模型，需确保网络能访问相关模型资源。国内开发者若遇到加载缓慢问题，可尝试配置代理或使用支持加速的 CDN。

安装步骤

通过 npm 安装：

npm install gaze-detection --save

如需使用国内镜像加速安装，可临时指定淘宝镜像源：

npm install gaze-detection --save --registry=https://registry.npmmirror.com

基本使用

以下是最简使用示例，实现检测用户视线方向并输出结果。

1. HTML 结构

在页面中添加一个 <video> 元素用于显示摄像头画面：

<video autoplay playsinline muted style="display:none;"></video>

2. JavaScript 代码

import gaze from "gaze-detection";

const videoElement = document.querySelector("video");

const init = async () => {
  // 加载机器学习模型
  await gaze.loadModel();

  // 启动默认摄像头
  await gaze.setUpCamera(videoElement);

  // 开始预测
  predict();
};

const predict = async () => {
  const gazePrediction = await gaze.getGazePrediction();
  console.log("Gaze direction: ", gazePrediction); 
  // 返回值：'RIGHT', 'LEFT', 'STRAIGHT' 或 'TOP'

  if (gazePrediction === "RIGHT") {
    // 用户向右看时执行的操作
    console.log("用户看向右侧");
  }

  requestAnimationFrame(predict);
};

// 启动应用
init();

3. 停止检测（可选）

如需停止实时检测，可取消动画帧循环：

// 假设 raf 是 requestAnimationFrame 返回的 ID
cancelAnimationFrame(raf);

完成以上步骤后，即可在控制台看到实时的视线方向识别结果，并根据业务逻辑构建眼动控制交互体验。