项目实战：构建 Effet.js 人脸识别交互系统的实战之路

一只蜗牛儿

978人浏览 · 2024-11-06 16:29:51

一只蜗牛儿 · 2024-11-06 16:29:51 发布

Effet.js 是一个功能强大的 JavaScript 库，专注于人脸识别与图像处理。它可以实现动态的面部检测、姿态识别等功能，非常适合用来开发 Web 端的互动项目。本篇文章将带你一步步使用 Effet.js 实现一个基础的人脸识别交互系统，通过大量代码案例来详细讲解每一个开发过程。

一、Effet.js 简介

Effet.js 提供了对人脸特征点的快速检测，并且支持面部动态跟踪、面部姿态识别、笑容检测等功能。其核心是基于机器学习的算法，通过对用户面部进行检测，获取到眼睛、鼻子、嘴巴等关键点的位置，实现实时交互。

二、项目开发环境准备

我们首先需要在项目中引入 Effet.js，可以通过 CDN 或直接下载库文件的方式进行。

1. 引入 Effet.js

通过 CDN 引入 Effet.js：

<script src="https://cdn.jsdelivr.net/npm/effet.js"></script>

或者直接下载 Effet.js 并在本地引入：

<script src="path/to/effet.min.js"></script>

2. 创建基本的 HTML 结构

接下来，我们创建一个简单的 HTML 页面，包含一个用于视频显示的 <video> 标签和一个用于人脸检测的 <canvas> 标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Effet.js 人脸识别交互系统</title>
</head>
<body>
    <h1>Effet.js 人脸识别交互系统</h1>
    <video id="video" autoplay muted></video>
    <canvas id="canvas"></canvas>
    <script src="path/to/effet.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

<video> 元素用于显示摄像头捕获的视频，而 <canvas> 元素则用于绘制人脸识别的结果。

三、初始化摄像头与 Effet.js

1. 获取用户摄像头权限并显示视频

在 JS 文件 script.js 中编写代码，使用浏览器的 getUserMedia API 访问摄像头，并将视频流传递给 <video> 元素：

const video = document.getElementById('video');

navigator.mediaDevices.getUserMedia({ video: true })
    .then((stream) => {
        video.srcObject = stream;
    })
    .catch((err) => {
        console.error("Error accessing webcam: ", err);
    });

2. 初始化 Effet.js 并加载人脸检测器

接下来初始化 Effet.js 并加载人脸检测模型：

// 初始化 Effet.js 检测器
const effet = new Effet();
effet.loadModel().then(() => {
    console.log("Effet.js 模型加载成功");
}).catch((error) => {
    console.error("Effet.js 模型加载失败: ", error);
});

在此处，我们通过 effet.loadModel() 加载人脸识别模型，确保在后续代码中可以使用它来检测面部特征。

四、实现人脸识别与绘制关键点

1. 捕捉视频帧并进行人脸识别

在摄像头初始化完成并且 Effet.js 模型加载完毕后，我们可以在 requestAnimationFrame 的循环中不断捕捉视频帧并进行人脸识别：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = video.width;
canvas.height = video.height;

// 检测并绘制人脸关键点
function detectFace() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    effet.detect(video).then((faces) => {
        faces.forEach((face) => {
            const keypoints = face.landmarks;
            keypoints.forEach((point) => {
                ctx.beginPath();
                ctx.arc(point.x, point.y, 2, 0, Math.PI * 2);
                ctx.fillStyle = 'red';
                ctx.fill();
            });
        });
    });
    requestAnimationFrame(detectFace);
}

// 开始检测
detectFace();

在 detectFace 函数中，我们使用 effet.detect(video) 方法对视频帧进行检测，获取人脸的关键点信息，然后使用 canvas 绘制关键点。

2. 绘制边框与识别提示

除了关键点，通常我们还会绘制一个人脸边框来指示识别区域。可以通过 face.boundingBox 获取每个人脸的边框信息：

faces.forEach((face) => {
    const { x, y, width, height } = face.boundingBox;
    
    // 绘制边框
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.strokeRect(x, y, width, height);

    // 绘制人脸识别提示
    ctx.fillStyle = 'blue';
    ctx.font = '12px Arial';
    ctx.fillText('Face Detected', x, y - 10);
});

此代码会在检测到人脸时绘制边框并显示提示。

五、实现面部交互功能

1. 检测微笑

Effet.js 支持一些基本的面部表情检测，例如微笑检测。我们可以通过 face.smilingProbability 检测微笑：

faces.forEach((face) => {
    if (face.smilingProbability > 0.5) {
        ctx.fillText('Smiling!', x, y - 30);
    }
});

当 face.smilingProbability 的值大于 0.5 时，我们就可以认为用户正在微笑，显示相应提示。

2. 交互功能：眨眼检测

Effet.js 还可以检测眨眼动作。我们可以通过检测 face.leftEyeOpenProbability 和 face.rightEyeOpenProbability：

faces.forEach((face) => {
    if (face.leftEyeOpenProbability < 0.2 && face.rightEyeOpenProbability < 0.2) {
        ctx.fillText('Winking!', x, y - 50);
    }
});

当左右眼的打开概率都小于 0.2 时，认为用户眨眼。

六、添加背景特效（选做）

为了让识别效果更酷炫，可以在背景中添加动态特效。比如，当检测到人脸时，可以给背景添加一个模糊效果。

document.body.style.background = 'rgba(0, 0, 0, 0.5)';

或更进一步，通过 CSS3 实现背景模糊：

body {
    backdrop-filter: blur(5px);
}

七、完整代码

以下是完整的项目代码汇总：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Effet.js 人脸识别交互系统</title>
</head>
<body>
    <h1>Effet.js 人脸识别交互系统</h1>
    <video id="video" autoplay muted></video>
    <canvas id="canvas"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/effet.js"></script>
    <script>
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        navigator.mediaDevices.getUserMedia({ video: true })
            .then((stream) => {
                video.srcObject = stream;
                video.play();
            }).catch((err) => {
                console.error("Error accessing webcam: ", err);
            });

        const effet = new Effet();
        effet.loadModel().then(() => {
            console.log("Effet.js 模型加载成功");
            detectFace();
        });

        function detectFace() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            effet.detect(video).then((faces) => {
                faces.forEach((face) => {
                    const { x, y, width, height } = face.boundingBox;
                    ctx.strokeStyle = 'blue';
                    ctx.lineWidth = 2;
                    ctx.strokeRect(x, y, width, height);
                    ctx.fillText('Face Detected', x, y - 10);

                    if (face.smilingProbability > 0.5) {
                        ctx.fillText('Smiling!', x, y - 30);
                    }
                });
            });
            requestAnimationFrame(detectFace);
        }
    </script>
</body>
</html>