使用JavaScript在浏览器中实现实时人脸情绪识别

Jara_Wong

已于 2024-07-23 11:49:08 修改

阅读量607

点赞数 21

分类专栏：前端文章标签： javascript 前端

于 2024-07-23 11:34:33 首次发布

本文链接：https://blog.csdn.net/weixin_43720253/article/details/140630022

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

face-api.js

face-api.js github 地址
介绍：它是用于在浏览器和 nodejs 中进行人脸检测和识别的 JavaScript API。提供了以下任务的预训练模型：人脸标志检测、人脸识别、年龄估计和性别识别。（face landmark detection, face recognition, age estimation, and gender recognition.）

实时人脸情绪识别 html代码

参考项目 github Face-Detection-JavaScript
创建一个models文件夹，然后放下载的模型就可以。模型下载 github 地址
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Real Time Face Expression Recognition</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        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="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
    <script>
      const video = document.getElementById("video");

      Promise.all([
        faceapi.nets.tinyFaceDetector.loadFromUri("/models"),
        faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
        faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
        faceapi.nets.faceExpressionNet.loadFromUri("/models"),
      ]).then(startVideo);

      function startVideo() {
        navigator.getUserMedia(
          { video: {} },
          (stream) => (video.srcObject = stream),
          (err) => console.error(err)
        );
      }

      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()
            .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);
      });
    </script>
  </body>
</html>

浏览器运行

效果

我就不放自己的了。。
Be like:
在这里插入图片描述

Jara_Wong

关注

21
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript在浏览器中实现实时人脸情绪识别

face-api.js 是用于在浏览器和 nodejs 中进行人脸检测和识别的 JavaScript API。提供了以下任务的预训练模型：人脸标志检测、人脸识别、年龄估计和性别识别。（face landmark detection, face recognition, age estimation, and gender recognition.）
复制链接

扫一扫

专栏目录