首页 前端知识 vue 使用 face-api.js 实现人脸识别

vue 使用 face-api.js 实现人脸识别

2024-07-30 22:07:23 前端知识 前端哥 376 674 我要收藏

HTML 代码如下

<div class="videoBox" id="videoBox">
  <video ref="videoPlayer" width="800" height="600" autoplay muted playsinline></video>
  <canvas ref="overlay"></canvas>
</div>

把模型放到 public 文件夹内的 models 文件夹内

模型下载地址:
GitHub
蓝奏云

引入 face-api.min.js

face-api 地址:
GitHub
蓝奏云

import "./assets/js/face-api.min.js";

在 created 方法内加载模型

Promise.all([
  // 用于人脸检测的高精度模型
  faceapi.nets.ssdMobilenetv1.loadFromUri("./models"),
  // 用于人脸检测的小型模型,速度快但精度略低
  // faceapi.nets.tinyFaceDetector.loadFromUri("./models"),
  // 用于检测 68 个面部特征点
  faceapi.nets.faceLandmark68Net.loadFromUri("./models"),
  // 用于检测 68 个面部特征点的小型模型
  // faceapi.nets.faceLandmark68TinyNet.loadFromUri("./models"),
  // 用于人脸识别
  faceapi.nets.faceRecognitionNet.loadFromUri("./models"),
  // 用于估计年龄和性别
  faceapi.nets.ageGenderNet.loadFromUri("./models"),
  // 用于检测面部表情(如快乐、悲伤、愤怒等)
  faceapi.nets.faceExpressionNet.loadFromUri("./models"),
])
  .then(() => {
   
    this.$nextTick(() => {
   
转载请注明出处或者链接地址:https://www.qianduange.cn//article/14652.html
标签
评论
发布的文章

AE、Lottie、JSON简单介绍

2024-08-12 10:08:42

VSCode配置settings.json

2024-08-12 10:08:42

JSON 格式说明

2024-08-12 10:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!