【face-api.js】前端实现，人脸捕获、表情识别、年龄性别识别、人脸比对、视频人脸追踪、摄像头人物识别

已于 2022-07-30 16:12:44 修改
阅读量5.8k 收藏 32
点赞数 7
分类专栏： 前端 文章标签： 前端
于 2022-07-27 21:16:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44240581/article/details/126019536
版权

face-api.js


效果展示

在这里插入图片描述在这里插入图片描述


准备工作

  • 官网看下简介，在线预览看下效果
  • 官方的github文件拷下来
  • npm i face-api.js
  • 把模型文件拷进你的项目
    項目目录结构

主要布局

主要是在图片或视频元素上，盖一个相同大小的canvas

<template>
  <div>
    <!--  图片/视频 捕获区  -->
    <div class="detectBox">
      <img
        v-show="!trackVideoFaces && !trackCameraFaces"
        :src="base64"
        alt=""
        width="500"
        ref="img"
        id="myImg"
        @load="detectFactory"
      >

      <video
        v-if="trackVideoFaces"
        width="500"
        ref="video"
        id="myVideo"
        muted
        playsinline
        preload
        loop
        @durationchange="$refs.video.play()"
        @play="videoStatus = 1"
        @pause="videoStatus = 0"
      >
        <source src="./media/shylock.mp4" type="video/mp4">
        抱歉，您的浏览器不支持嵌入式视频。
      </video>

      <video
        v-if="trackCameraFaces"
        @loadedmetadata=""
        ref="video"
        id="myVideo"
        autoplay
        muted
        playsinline
        @play="videoStatus = 1"
        @pause="videoStatus = 0"
      />

      <canvas ref="canvas" />
    </div>
  </div>
</template>

加载训练模型

import * as faceapi from 'face-api.js';

export default {
	methods: {
	  	// 加载模型
	    init() {
	      const toast = this.$createToast({
	        txt: '模型加载中...',
	        mask: true
	      })
	
	      toast.show();
	
	      // 加载训练好的模型
	      // ageGenderNet:          年龄、性别识别模型，大约420KB
	      // faceExpressionNet:     人脸表情识别模型，识别表情,开心，沮丧，普通，大约310KB
	      // faceLandmark68Net：    68个点人脸地标检测模型（默认模型），大约350KB
	      // faceLandmark68TinyNet：68个点人脸地标检测模型（小模型），大约80KB
	      // faceRecognitionNet:    人脸识别模型，可以比较任意两个人脸的相似性，大约6.2MB
	      // ssdMobilenetv1：       SSD 移动网络 V1，大约5.4MB，准确的最高，推理时间最慢
	      // tinyFaceDetector:      微型人脸检测器（实时人脸检测器），与 SSD Mobilenet V1 人脸检测器相比，它速度更快、体积更小且资源消耗更少，但在检测小人脸方面的表现略逊一筹。移动和网络友好
	      // mtcnn                  大约2MB
	      // tinyYolov2             识别身体轮廓的算法，不知道怎么用
	      Promise.all([
	        faceapi.nets.faceRecognitionNet.loadFromUri('./models'),
	        faceapi.nets.faceLandmark68Net.loadFromUri('./models'),
	        faceapi.nets.faceLandmark68TinyNet.loadFromUri('./models'),
	        faceapi.nets.ssdMobilenetv1.loadFromUri('./models'),
	        faceapi.nets.tinyFaceDetector.loadFromUri('./models'),
	        faceapi.nets.mtcnn.loadFromUri('./models'),
	        faceapi.nets.faceExpressionNet.loadFromUri('./models'),
	        faceapi.nets.ageGenderNet.loadFromUri('./models'),
	        // faceapi.nets.tinyYolov.loadFromUri('./models')
	      ])
	          .then((res) => {
	            this.entryFaces();
	            toast.hide();
	          })
	    },
	},
	mounted () {
    this.init();
  }
}

人脸识别

先是录入一些图片的描述信息，然后比较描述信息，判断人脸的相似度

    /**
     * @description 录入人脸数据
     *
     * 大脸照、黑白照可能识别不出来，可以修改配置，降低人脸的置信度
     * */
    async entryFaces() {
      const imgs = document.querySelectorAll('.faceCompare img');

      for (const img of imgs) {
        /** 注意：这里不能传options，不然会报错 */
        const singleResult = await faceapi
            .detectSingleFace(img)
            .withFaceLandmarks()
            .withFaceDescriptor()
        ;

        this.faces = [
          ...this.faces,
          new faceapi.LabeledFaceDescriptors(
              img.alt,
              [singleResult.descriptor]
          )
        ]
      }
    },

   // 比较相似度
    async compareFaces() {
      const detection1 = await faceapi.detectSingleFace('reference').withFaceLandmarks().withFaceDescriptor();
      const detection2 = await faceapi.detectSingleFace('toCompare').withFaceLandmarks().withFaceDescriptor();

      if (detection1 && detection2) {
        this.similarity = Math.round(faceapi.utils.round(1 - faceapi.euclideanDistance(detection1.descriptor, detection2.descriptor)) * 100);
      } else {
        this.similarity = 0;
      }
    }

人脸检测器

人脸检测器有两种，SSD和Tiny两种，SSD较大，Tiny用于动态视频检测，精度可能没SSD高，但推算速度快，帧率也高，如果检测不到人脸，可以切换检测器，或者修改配置

	data() {
	return {
		cascadeData: [
	        {
	          value: 'SSD',
	          text: 'SSD',
	          children: [
	            { text: '0.1', value: 0.1 },
	            { text: '0.2', value: 0.2 },
	            { text: '0.3', value: 0.3 },
	            { text: '0.4', value: 0.4 },
	            { text: '0.5', value: 0.5 },
	            { text: '0.6', value: 0.6 },
	            { text: '0.7', value: 0.7 },
	            { text: '0.8', value: 0.8 },
	            { text: '0.9', value: 0.9 },
	          ]
	        },
	        {
	          value: 'Tiny',
	          text: 'Tiny',
	          children: [
	            { text: '0.1', value: 0.1, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
	            { text: '0.2', value: 0.2, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
	            { text: '0.3', value: 0.3, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
	            { text: '0.4', value: 0.4, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
	            { text: '0.5', value: 0.5, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
	            { text: '0.6', value: 0.6, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
	            { text: '0.7', value: 0.7, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
	            { text: '0.8', value: 0.8, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
	            { text: '0.9', value: 0.9, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
	          ]
	        }
	      ]
		}
	}

 	// 配置人脸检测器参数
    getFaceDetectorOptions() {
      const { selectedValue } = this;

      return selectedValue[0] === 'SSD'
          ? new faceapi.SsdMobilenetv1Options({
            minConfidence: selectedValue[1]
          })
          /**
           * @param inputSize?: number
               处理图像的大小，越小越快
               在检测较小的人脸时， 必须被32整除
               常见的大小有128、160、224、320、416、512、608 ,
               用于通过网络摄像头进行人脸跟踪我建议使用较小尺寸的，例如128、160
               用于检测较小的人脸使用较大尺寸的，例如512、608
               默认值： 416
             *  @param scoreThreshold?: number
               最小置信阈值
               默认值:0.5
           *
           * @desc inputSize和scoreThreshold的不同配置，都会影响返回结果的数量
           * */
          : new faceapi.TinyFaceDetectorOptions({
            scoreThreshold: selectedValue[1],
            inputSize: selectedValue[2]
          })
    },

略…

懒得写了，把实现代码拷下来看吧


本地开启https

因为 navigator.mediaDevices 在http://域名下无法使用，你可以用http://localhost过渡，但是如果想要在手机上预览效果，就需要配置https


手机当电脑的摄像头

手机、电脑下载iVCam

等下吃什么？
关注
  • 7
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
人脸识别：face-api.js库
hbb1_的博客
03-02 1669
Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。还有一个我觉得不错的功能就是，截取摄像头的图像，对于一些网站用这个功能来设置用户头像也是个很炫的功能。// 否则，使用Promise将调用包装到旧的navigator.getUserMedia。// 避免在新的浏览器中使用它，因为它正在被弃用。// 绘制图片（拍照功能）
Face-api.js静态页面版Demo
11-28
JavaScript人脸识别库Face-api.js的示例，无需安装nodejs，iis本地直接看效果。注意调用摄像头不能用IP访问，只能localhost，远程预览需要HTTPS；iis无扩展名文件若出现404，需在mime类型中添加扩展名【.】类型【application/octet-stream】。
uniapp_face_vue.rar
02-01
uniapp 原生实现人脸识别
2024年前端最新vue使用face-api进行人脸捕获(1)，面试官6个灵魂拷问
最新发布
2401_84123380的博客
05-13 316
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。vue页面中的代码，你们自己使用核心的方法即可。
vue2使用face-api.js实现，人脸识别
liu3325262991的博客
05-09 1711
使用vue2结合face-api.js实现人脸识别功能
探索 `face-api.js`：一个轻巧而强大的JavaScript人脸检测与识别库
gitblog_00053的博客
03-19 535
探索 face-api.js：一个轻巧而强大的JavaScript人脸检测与识别库 项目地址:https://gitcode.com/justadudewhohacks/face-api.js 项目简介 face-api.js 是一个基于TensorFlow.js的JavaScript库，专为浏览器和Node.js环境设计，用于实现人脸识别、表情识别、性别检测等一系列人工智能功能。通过这个库，开发...
vue基于face-api.js实现人脸识别
热门推荐
xuan的博客
10-12 1万+
一、face-api.js Face-api.js 是一个 JavaScript API，是基于 tensorflow.js 核心 API 的人脸检测和人脸识别的浏览器实现。它实现了一系列的卷积神经网络（CNN），它实现了三种卷积神经网络（CNN）架构，用于完成人脸检测、识别和特征点检测任务。 二、引入 npm i face-api.js 三、加载模型数据 import { detectSingleFace, nets, matchDimensions, resize...
基于TensorFlow构建的face-api.js人脸识别【代码+效果展示+在线体验】
@MIKE小助手
04-25 2441
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 项目地址 无意中看到了一个有趣的AI实时人脸追踪，不懂AI的我简单地尝试了一下。我使用的是基于TensorFlow构建的face-api.js库，事实上它可以嵌入在网站上并让网站拥有功能齐全的实时人脸检测能力，而且可与任何网络摄像头或手机摄像头配合使用。只要照着教程ctrl+c➕ctrl+v，相信你也能做出这个效果！ 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于N
web端实现基于face-api.js + facenet的人脸识别
daihaoguang的博客
12-26 1972
项目要求实现web端的人脸比对，即对比两张图片中的人脸是否为同一个人。此问题可以通过人脸识别相关模型来实现，比如经典的FaceNet。然而，图片中通常不止包含人脸，为了更好的提取人脸嵌入向量，就需要先借助人脸检测算法（如RetinaFaceMTCNN）抠出人脸部分；其次，实践发现人脸倾斜对最终的效果有较大的影响，因此还需要关键点检测算法对人脸进行对齐操作。简言之，整体流程为：1）人脸检测，2）关键点检测，对人脸进行矫正；3）人脸识别，提取嵌入向量，通过向量相似度对比实现人脸比对。
用Vue和face-api.js实现人脸表情检测
qq_62646841的博客
05-19 3106
只是简单的表情检测 其中参数可以随意修改
VUE+faceApi.js实现摄像头拍摄人脸识别
m0_46114541的博客
02-22 7547
需求：前端获取到摄像头信息，通过模型来进行判断人像是否在镜头中，镜头是否有被遮挡。实现步骤：1、通过video标签来展示摄像头中的内容2、通过canvas来绘制视频中信息进行展示3、在拍照时候将canvas的当前帧转成图片。
face_detect:微信小程序使用tensorflow.js完成前端人脸检测业务
03-13
face_detect 微信小程序使用tensorflow.js完成前端人脸检测业务
人脸签到系统。webpack4+React+Mobx+Antd的中后台系统，face-api.js调用摄像头采集人脸信息.zip
01-02
该压缩包文件“face-sign-platform-master”包含了一个基于Web技术的人脸签到系统，它集成了现代前端框架和库，如Webpack 4、React、MobX以及Ant Design，同时利用了face-api.js来处理人脸信息的采集。这个系统主要...
face-recognition-javascript-webcam-faceapi-main.zip
08-22
【标题】"face-recognition-javascript-webcam-faceapi-main.zip" 涉及的是一个使用JavaScript实现的人脸识别项目，其核心是Face API库。这个压缩包包含了开发此类应用所需的全部资源，允许开发者通过Webcam捕获视频...
face_recognition.rar_matlab_pca人脸识别_人脸识别比对_图片相似度_相似人脸
07-14
在本项目中，我们主要探讨的是基于PCA（主成分分析）的人脸识别技术。PCA是一种常用的统计学方法，常用于高维数据的降维，它能够捕获数据的主要特征，从而简化模型并提高处理效率。在人脸识别领域，PCA被用来提取...
人脸识别.rar_face recognition_globethq_人脸比对_人脸识别_图片比对
07-14
在本文中，我们将深入探讨基于LBP（Local Binary Patterns，局部二值模式）算法的人脸识别技术，这是从给定的“人脸识别.rar_face recognition_globethq_人脸比对_人脸识别_图片比对”压缩包文件中提取的关键知识点...
基于百度API的使用js实现的人脸识别Demo
08-06
在本项目中，“基于百度API的使用js实现的人脸识别Demo”是一个利用百度云的人脸识别技术，并通过JavaScript编程语言创建的简易应用示例。这个Demo旨在帮助开发者理解和实践如何在网页环境中集成百度的人脸识别服务...
face-api实现人脸识别。
qq_43198727的博客
08-28 1157
face-api人脸识别
使用face-api.js人脸识别让照片中的人物自动流汗（自动流汗黄豆/差不多得了）
幻日のヨハネ
05-15 2478
前言 face-api.js 是 JavaScript 生态的一个人脸识别库，自带了训练好的 model，上手成本低，识别效果还算不错。 官方项目：justadudewhohacks / face-api.js 话不多说，差不多得了 ???? ，先进行实战。 实战 准备 model 如果你有现成训练好的 model，可以用自己的，如果没有，我们可以用 face-api 已经给我们准备好的，不过这些准备好的 model 放在了他的仓库中，所以需要把他的仓库 clone 到本地： git clone ht
worker.js 中使用face-api.js
08-01
worker.js 是一个 JavaScript 文件，用于在浏览器中运行后台任务。而 face-api.js 则是一个 JavaScript 库，用于进行人脸识别和人脸检测等相关操作。 在 worker.js 中使用 face-api.js，可以通过下面的步骤进行： 1. 首先，需要将 face-api.js 导入到 worker.js 中。可以通过 `<script>` 标签或动态加载脚本的方法进行导入。例如，可以使用 importScripts() 函数将 face-api.js 导入到 worker.js。 2. 导入完成后，可以使用 face-api.js 提供的各种方法和函数进行人脸识别和人脸检测等操作。例如，可以使用 faceapi.detectAllFaces() 函数来检测图片中的人脸，并返回相应的人脸信息。 3. 在使用 face-api.js 进行人脸识别和人脸检测时，需要提供相应的参数和输入数据。例如，如果要检测一张图片中的人脸，需要将该图片传递给 faceapi.detectAllFaces() 函数进行处理。 4. 在人脸检测或人脸识别完成后，可以使用 face-api.js 提供的其他方法和函数对人脸进行进一步的处理。例如，可以使用 faceapi.drawLandmarks() 函数在检测到的人脸上绘制关键点和轮廓。 总结起来，worker.js 中使用 face-api.js 主要涉及到导入 face-api.js、调用 face-api.js 提供的方法和函数、传递相应的参数和输入数据以及对人脸结果进行进一步处理。通过这些步骤，我们可以在 worker.js 中使用 face-api.js 进行人脸识别和人脸检测等相关操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值