基于TensorFlow构建的face-api.js人脸识别【代码+效果展示+在线体验】-CSDN博客

文章目录

前言
一、项目架构
二、环境
三、具体实现
四、效果图
五、在线体验
总结✨✨

前言

无意中看到了一个有趣的AI实时人脸追踪，不懂AI的我简单地尝试了一下。我使用的是基于TensorFlow构建的face-api.js库，事实上它可以嵌入在网站上并让网站拥有功能齐全的实时人脸检测能力，而且可与任何网络摄像头或手机摄像头配合使用。只要照着教程ctrl+c➕ctrl+v🤣相信你也能做出这个效果！

一、项目架构

ai-
    │  models
   	│  │age_gender_model-shard1
    │  │age_gender_model-weights_manifest.json
    │  │face_expression_model-shard1
    │  │face_expression_model-weights_manifest.json  
    │  │face_landmark_68_model-shard1      
    │  │face_landmark_68_model-weights_m
    │  │face_landmark_68_tiny_model-shar
    │  │face_landmark_68_tiny_model-weig
    │  │face_recognition_model-shard1
    │  │face_recognition_model-shard2
    │  │face_recognition_model-weights_manifest.json
    │  │mtcnn_model-shard1
    │  │mtcnn_model-weights_manifest.json
    │  │ssd_mobilenetv1_model-shard1
    │  │ssd_mobilenetv1_model-shard2
    │  │ssd_mobilenetv1_model-weights_
    │  │tiny_face_detector_model-shard1
    │  │tiny_face_detector_model-weights_
    │index.html
    │fun.js
    │faceapi.min.js

二、环境

window10 ➕vscode➕浏览器

三、具体实现

1️⃣index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./faceapi.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        canvas {
            position: absolute;

        }
    </style>
</head>

<body>
    <video id="video" width="720" height="560" autoplay muted></video>
    <script src="./faceapi.min.js"></script>
    <script src="./fun.js"></script>
</body>

</html>

2️⃣fun.js

代码如下（示例）：

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

const startVideo = () => {
    navigator.getUserMedia = navigator.getUserMedia = (navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia);
    navigator.getUserMedia(
        { video: {} },
        (stream) => (video.srcObject = stream),
        (err) => console.log(err)
    );
};

// startVideo();

//console.log(faceapi.nets)
// ageGenderNet
// faceExpressionNet
// faceLandmark68Net
// faceLandmark68TinyNet
// faceRecognitionNet
// ssdMobilenetv1
// tinyFaceDetector
// tinyYolov2

//加载训练好的模型（weight，bias）
// ageGenderNet 识别性别和年龄
// faceExpressionNet 识别表情,开心，沮丧，普通
// faceLandmark68Net 识别脸部特征用于mobilenet算法
// faceLandmark68TinyNet 识别脸部特征用于tiny算法
// faceRecognitionNet 识别人脸
// ssdMobilenetv1 google开源AI算法除库包含分类和线性回归
// tinyFaceDetector 比Google的mobilenet更轻量级，速度更快一点
// mtcnn  多任务CNN算法，一开浏览器就卡死
// tinyYolov2 识别身体轮廓的算法，不知道怎么用

// faceapi.nets.tinyFaceDetector.loadFromUri('http://www.battlesoldier.top/resource/faceApi/weights'),
// faceapi.nets.faceLandmark68Net.loadFromUri('http://www.battlesoldier.top/resource/faceApi/weights'),
// faceapi.nets.faceRecognitionNet.loadFromUri('http://www.battlesoldier.top/resource/faceApi/weights'),
// faceapi.nets.faceExpressionNet.loadFromUri('http://www.battlesoldier.top/resource/faceApi/weights'),
Promise.all([
    faceapi.nets.tinyFaceDetector.loadFromUri('./models'),
    faceapi.nets.faceLandmark68Net.loadFromUri('./models'),
    faceapi.nets.faceRecognitionNet.loadFromUri('./models'),
    faceapi.nets.faceExpressionNet.loadFromUri('./models'),

]).then(startVideo());

video.addEventListener('play', () => {
    // 制作定位 canvas
    const canvas = document.createElement('canvas');
    canvas.style.position = 'absolute';
    document.body.append(canvas);

    // 配置显示尺寸
    const displaySize = { width: video.width, height: video.height };
    faceapi.matchDimensions(canvas, displaySize);

    // 每 100ms 去绘制
    setInterval(async () => {
        // 识别位置, 脸部特征, 表情
        const detections = await faceapi
            .detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
            .withFaceLandmarks()
            .withFaceExpressions();

        // 调整尺寸
        const resizedDetections = faceapi.resizeResults(detections, displaySize);

        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);
});