基于 TensorFlow.js 和 Face API 的实时人脸检测

摘要

随着计算机视觉技术的发展,人脸识别已成为众多应用程序中的核心功能。本文将介绍如何利用 TensorFlow.jsFace API 创建一个简单的实时人脸检测项目。通过访问用户的摄像头,实时识别并绘制面部特征,为用户提供直观的反馈。

项目概述

本项目的目标是在浏览器中实现实时人脸检测,能够自动识别用户面部特征。用户通过摄像头访问该应用,实时查看检测到的面部框、特征点以及可能的面部表情。此项目展示了前端技术与机器学习的结合,极大地增强了用户体验。

项目效果

传送门

技术栈

  • TensorFlow.jsTensorFlow.js是一个强大的机器学习库,可以在浏览器中运行。它支持模型的训练和推断,使得我们能够在前端环境中实现深度学习功能。
  • Face APIFace API 是一个基于 TensorFlow.js 的库,专门用于面部检测和分析。它提供了一系列的工具和模型,能够检测面部位置、提取特征点以及识别面部表情。
  • ViteVite 是一个现代的前端构建工具,可以快速搭建项目。它支持快速热重载和高效的构建流程,使得开发过程更加流畅。
  • HTML5 & CSS :使用 HTML5CSS 构建用户界面,展示视频流和绘制检测结果的 Canvas。
  • JavaScript :使用 JavaScript 控制逻辑和用户交互,包括访问摄像头、调用模型、处理检测结果等。

创建项目

步骤 1:初始化 Vite 项目

  1. 打开终端,运行以下命令来创建一个 Vite 项目:
bash 复制代码
npm create vite@latest face-detection --template vanilla
cd face-detection
npm install
  1. 安装 face-api.js:
bash 复制代码
npm install face-api.js

步骤 2:项目结构 确保项目目录结构如下:

arduino 复制代码
face-detection/
│
├── index.html
├── main.js
├── package.json
├── public/
│   └── models/  (放置人脸检测模型)
└── vite.config.js

步骤 3:下载模型

你可以从 face-api.js 模型仓库 下载模型文件,将这些 .bin 文件和 manifest.json 放到 public/models 文件夹中。

好了,到这里我们已经具备了最基础的一个开发环境,下面让我们来一起实现它。

实现逻辑

1. 加载模型

在页面加载时,通过 loadModels 函数加载所需的面部检测模型,包括 TinyFaceDetectorFaceLandmark68NetFaceRecognitionNet

2. 设置摄像头

通过 setupCamera 函数访问用户的摄像头,并将视频流呈现在 HTML 的 元素中。

3. 开始检测

使用 startDetection 函数监听视频的播放事件。在视频播放时创建一个 Canvas 元素,以便在其上绘制检测结果。

4. 实时检测

使用 setInterval 定时器每 100 毫秒执行一次面部检测,调用 faceapi.detectAllFaces 方法。检测到的人脸会返回面部位置和特征点等信息,并通过 faceapi.resizeResults 函数调整结果的尺寸。

5. 绘制检测结果

清除 Canvas 上的旧绘图,使用 faceapi.draw.drawDetections 绘制检测到的面部框,使用 faceapi.draw.drawFaceLandmarks 绘制面部特征点。

6. 用户交互

用户在浏览器中实时看到面部检测的结果,展示检测到的面部特征框和点。

项目示例代码

javaScript 复制代码
import * as faceapi from 'face-api.js';

async function loadModels() {
    const MODEL_URL = '/models';
    // 加载必要的模型
    await faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL);
    await faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL);
    await faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL);
    console.log('Models loaded successfully!');
}

async function setupCamera() {
    const video = document.getElementById('video');
    const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
    video.srcObject = stream;
}

function startDetection() {
    const video = document.getElementById('video');
    video.addEventListener('play', () => {
        const canvas = faceapi.createCanvasFromMedia(video);
        document.body.append(canvas);

        const displaySize = { width: video.width, height: video.height };
        faceapi.matchDimensions(canvas, displaySize);
        setInterval(async () => {
            const detections = await faceapi.detectAllFaces(
                video,
                new faceapi.TinyFaceDetectorOptions()
            ).withFaceLandmarks().withFaceDescriptors(); // 也获取面部特征描述符

            const resizedDetections = faceapi.resizeResults(detections, displaySize);

            // 清除 canvas
            canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

            // 绘制检测到的面部
            faceapi.draw.drawDetections(canvas, resizedDetections);

            // 绘制面部特征点
            faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);

            // 绘制面部特征描述符
            faceapi.draw.drawFaceExpressions(canvas, resizedDetections); // 可选,绘制表情
        }, 100);
    });
}

(async () => {
    await loadModels();
    await setupCamera();
    startDetection();
})();

结果展示

通过上述代码,用户可以在浏览器中实时看到摄像头捕捉到的人脸,以及识别出的面部特征。项目不仅可以用于基础的人脸检测,还可以作为后续更复杂应用的基础,例如面部表情识别或身份验证。

总结

通过本项目,我们可以了解到如何结合 TensorFlow.jsFace API 实现实时人脸检测。该项目仅仅是前端技术与深度学习结合的冰山一角,让我们继续挖掘它的强大之处吧!

相关推荐
枷锁—sha几秒前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜17 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2430 分钟前
html复习
javascript·microsoft·html
汉得数字平台35 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹41 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化