前言

gtihub项目地址

一、项目架构

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