vue+face-api.js实现前端人脸识别功能

7月前作者：TroubleMakerr 分类：Toy博客阅读(29) 违法举报

这篇具有很好参考价值的文章主要介绍了vue+face-api.js实现前端人脸识别功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

近期做了一个前端vue实现人脸识别的功能，主要功能逻辑包含：人脸识别，人脸验证，唤起摄像头视频流之后从三个事件（用户点头、摇头、眨眼睛）中随机选中两个事件，待两个事件通过判断后人脸静止不动3秒钟后截取视频流生成图片，上传到阿里或者腾讯oss，通过oss返回的url或者自己拼接的url去跟调取后台接口实现人脸识别/人脸识别二次校验

前端人脸识别,javascript,前端,vue.js,阿里云
基于face-api.js要实现人脸识别功能，首先要将自己需要的模型文件下载保存在静态目录下，

可以通过cdn的方式在index.html中引入face-api.js
前端人脸识别,javascript,前端,vue.js,阿里云

上面页面是自己或者UI给出的前置页面，点击开始验证进入人脸识别页面
下面代码为人脸识别页面静态内容
前端人脸识别,javascript,前端,vue.js,阿里云
页面显示效果为下图：

前端人脸识别,javascript,前端,vue.js,阿里云

前端人脸识别,javascript,前端,vue.js,阿里云

前端人脸识别,javascript,前端,vue.js,阿里云

前端人脸识别,javascript,前端,vue.js,阿里云

前端人脸识别,javascript,前端,vue.js,阿里云

前端人脸识别,javascript,前端,vue.js,阿里云
业务逻辑代码
首先需要通过navigator.mediaDevices.getUserMedia获取视频流
navigator.mediaDevices.getUserMedia涉及到兼容性问题，可以自行参考资料去解决

前端人脸识别,javascript,前端,vue.js,阿里云

下面为随机三个事件中选中两个事件的方法也可以忽略不计，可根据自身需求安排

前端人脸识别,javascript,前端,vue.js,阿里云

人脸识别设置的是每一秒钟执行一次检测
前端人脸识别,javascript,前端,vue.js,阿里云

下面是主要的实现人脸识别的初始化摄像头和调用face-api.js代码部分：

前端人脸识别,javascript,前端,vue.js,阿里云

前端人脸识别,javascript,前端,vue.js,阿里云

下面方法包含了点头，摇头，眨眼睛三个事件的判断逻辑代码可能存在精度上的问题可以根据自己的实际需求进行调整，api中都有详细的计算公式
前端人脸识别,javascript,前端,vue.js,阿里云

以下为截取到的视频流的当前帧的图片上传到oss部分代码
前端人脸识别,javascript,前端,vue.js,阿里云

不管是上传到腾讯云还是阿里云都是大同小异，一般都是通过调用后台封装的接口根据临时的SecretId，SecretKey，SecurityToken去获取oss上传之后的图片的url地址

前端人脸识别,javascript,前端,vue.js,阿里云

再拿到imageUrl地址之后就可以根据自身需求去做后续处理了，比如调后台接口进行人脸识别或者人脸二次校验等功能

前端人脸识别,javascript,前端,vue.js,阿里云
还有就是在页面销毁的时候不要忘了清掉设置的定时器，以及停止掉video的视频流
文章来源地址https://www.toymoban.com/news/detail-754467.html

到了这里，关于vue+face-api.js实现前端人脸识别功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

人脸识别2：InsightFace实现人脸识别Face Recognition(含源码下载)

目录人脸识别2：InsightFace实现人脸识别Face Recognition(含源码下载) 1. 前言 2. 项目安装 3. 人脸识别系统（1）人脸检测和关键点检测（2）人脸校准（3）人脸特征提取（4）人脸比对(1:1) （5）人脸搜索(1:N) （6）配置文件config （7）人脸识别优化建议 4. 人脸识别Demo效果 5. 人脸识

2024年02月05日
浏览(37)
人脸识别3：C/C++ InsightFace实现人脸识别Face Recognition(含源码)

目录 1. 前言 2. 项目安装（1）项目结构（2）配置开发环境(OpenCV+OpenCL+base-utils+TNN) （3）部署TNN模型（4）CMake配置（5）编译运行 3. 人脸识别系统（1）人脸识别的核心算法（2）人脸检测和关键点检测（3）人脸校准（4）人脸特征提取（5）人脸比对(1:1) （6）人脸搜索(1

2024年02月07日
浏览(34)
python实现人脸识别（face_recognition）

1、介绍本项目是世界上最强大、简洁的人脸识别库，你可以使用Python和命令行工具提取、识别、操作人脸。本项目的人脸识别是基于业内领先的C++开源库dlib中的深度学习模型，用Labeled Faces in the Wild人脸数据集进行测试，有高达99.38%的准确率。但对小孩和亚洲人脸的识别准

2024年02月02日
浏览(28)
VUE+faceApi.js实现摄像头拍摄人脸识别

需求：前端获取到摄像头信息，通过模型来进行判断人像是否在镜头中，镜头是否有被遮挡。实现步骤： 1、通过video标签来展示摄像头中的内容 2、通过canvas来绘制视频中信息进行展示 3、在拍照时候将canvas的当前帧转成图片下载依赖 face-api.js是核心依赖必须要下 element-ui为

2024年02月01日
浏览(28)
基于Face++，使用Spring Boot+Elemnet-UI实现人脸识别登录。

上一篇文章只是封装了人脸检测的一些工具类，要实现刷脸登录，我们首先得思考一个问题，就是如何将我们的人脸和登录账户信息进行绑定，让它通过人脸就能识别到当前登录的账户是谁的账户。这个问题我们可以这样解决，我浏览Face++的官网发现它还有人脸比对的一个

2024年02月04日
浏览(30)
【三十天精通Vue 3】第二十七天如何用Vue 3和TensorFlow.js实现人脸识别Web应用？

✅创作者：陈书予 🎉个人主页：陈书予的个人主页 🍁陈书予的个人社区，欢迎你的加入: 陈书予的社区 🌟专栏地址: 三十天精通 Vue 3

2024年02月03日
浏览(34)
face_recognition人脸识别与人脸检测

1、安装face_recognition库 face_recognition库的人脸识别是基于业内领先的C++开源库dlib中的深度学习模型，安装face_recognition库的同时会一并安装dlib深度学习框架。 2、face_recognition库的使用 1）load_image_file加载要识别的人脸图像这个方法主要是用于加载要识别的人脸图像，返回的数据

2024年02月13日
浏览(29)
人脸识别 Face Recognition 入门

找论文搭配 Sci-Hub 食用更佳 💪 Sci-Hub 实时更新 : https://tool.yovisun.com/scihub/ 公益科研通文献求助：https://www.ablesci.com/ 人脸识别流程：检测、对齐、（活体）、预处理、提取特征（表示）、人脸识别（验证）传统方法试图通过一两层表示来识别人脸，例如过滤响应、特征直方图

2024年02月04日
浏览(28)
最新实现人脸识别功能

一、能力背景现在人脸识别功能，只对特定主主体类目进行开放,具体主体类目参考: 人脸识别开放主题类目 | 微信社区 (qom) 二、接入能力申请人脸识别功能的详细过程,可查看微信人脸核身申请过程 | 微信开放社区 (qq.com) 三、具体使用方法

2024年01月16日
浏览(45)
OpenCV人脸识别，训练模型为cv2.face.LBPHFaceRecognizer_create()

OpenCV内部自带有三种人脸检测方式：LBPH人脸识和其他两种方法（Eigen人脸识别，FisherFace人脸识别）本次主要说明第一种方式LBPH检测。 1.创建需要训练的图片的集文件夹，和识别功能测试图片集的文件夹。图（1）训练图集文件夹图（1.1）taylorswift照片（尽量选用背景没其

2024年02月07日
浏览(35)