文章目录
前言
在当今数字化的时代，用户体验变得尤为重要，尤其是在身份验证、互动和安全性方面。传统的登录方式，如密码和短信验证码，逐渐显得繁琐而低效。人脸识别技术因其便捷性和安全性，正越来越多地被应用到各类应用场景中。
在这样的背景下，我开发了 effet.js —— 一个基于 facemesh.js 的人脸样式框架，旨在为 Web 应用提供丰富而智能的人脸交互功能。effet.js 实现了从人脸登录到睡眠检测的多样化功能，并力求在开发的灵活性与用户体验之间找到平衡。
在这篇博客中，我将带你了解 effet.js 的开发历程，包括它的功能实现、技术挑战和我为推广它所做的努力。如果你对如何利用 JavaScript 和前沿技术提升用户体验感兴趣，相信这篇文章会为你提供一些有趣的思路。
一、什么是effet.js
face-effet 简称effet.js 是一款人脸样式框架
effet.js 是一个轻量级的人脸样式框架，专注于为网页带来生动的面部动画效果。通过简单的API，开发者可以轻松实现眨眼、张嘴、摇头等动态表情，使用户界面更加互动和生动。effet.js 适用于需要增强用户体验的各种应用场景，特别是在前端项目中集成复杂的人脸动态效果。
二、为什么需要使用effet.js
Effet.js是一款轻量级人脸样式框架，可以快速帮我搭建前端识别校验的一个操作，这不是最终的校验， 需要配合后端一起校验，简单操作的api，方便快速帮我们搭建人脸登录，后端我们只需要调用其他厂商的接口
比如：
虹软人脸识别
百度云人脸识别
阿里云人脸识别
腾讯云人脸识别
等等…
四、effet.js能做什么
effet.js目前主要支持核心功能点
标题是否支持速度体验人脸登录✅█████████ 90%人脸打卡✅█████████ 90%睡眠检测✅█████████ 90%人脸添加✅█████████ 90%
人脸登录：动作检测，眨眨眼，张张嘴，左右摇头检测
人脸打卡：判断摄像头距离头部远近位置来计算当前人脸是否可以打卡
睡眠检测：计算眼睛闭合度来呈现当前人脸是否在睡觉
人脸添加：计算人脸上下左右摇头的动画效果，完成人脸数据的返回
五、使用步骤
1.引入库
代码如下（我们已vue的人脸登录为示例，一个简单的人脸登录）：
通过npm命令安装，网络不好的同学们，可以尝试切换淘宝镜像
npm config set registry https://registry.npmmirror.com
安装插件
npm i face-effet -S
2.main.js中注册全局
代码如下（示例）：
import Vue from'vue'import App from'./App.vue'import router from'./router'import'./plugins/element.js'// 引入核心样式import'face-effet/effet/effet.css'// 引入核心主文件import faceEffet from'face-effet/effet/effet.js'// 注册为全局对象Vue.prototype.$faceEffet = faceEffet
Vue.config.productionTip =falsenewVue({
router,render:h=>h(App)}).$mount('#app')
2.使用
<template><div><div ref="faceVueTest" id="faceId"></div><el-button @click="startFace">开启人脸</el-button><el-button @click="restartFace">重启人脸</el-button><el-button @click="closeFace">关闭人脸</el-button></div></template><script>// $faceEffet 对象是在main.js 注册好的全局对象exportdefault{
name:"index",data(){return{}},beforeDestroy(){if(this.$faceEffet){this.$faceEffet.close();}},
methods:{startFace(){// 人脸容器的初始化this.$faceEffet.init({
el:this.$refs.faceVueTest,// 直接传入html元素 也可以直接传入字符 'faceId'
type:'checkLogin',// 人脸登录模式
callBack:this.callBack // 阶段回调函数，会打印每个执行步骤，一般是在这个方法调用后端接口})},callBack(data){// 验证过程的回调打印
console.log(data)},restartFace(){// 重启人脸容器this.$faceEffet.restart()},closeFace(){// 关闭人脸容器this.$faceEffet.close();}}}</script>
3.效果图
上面案例主要介绍了，只需简单的代码就可以完成，眨眨眼，张张嘴，左右摇头的效果
六、其他模式讲解
人脸打卡
this.$faceEffet.init({
el:this.$refs.faceVueTest,// 直接传入html元素 也可以直接传入字符 'faceId'
type:'clockIn',// 人脸打卡
callBack:this.callBack // 阶段回调函数，会打印每个执行步骤，一般是在这个方法调用后端接口})
人脸添加
this.$faceEffet.init({
el:this.$refs.faceVueTest,// 直接传入html元素 也可以直接传入字符 'faceId'
type:'addFace',// 人脸打卡
callBack:this.callBack // 阶段回调函数，会打印每个执行步骤，一般是在这个方法调用后端接口})
睡眠检测
this.$faceEffet.init({
el:this.$refs.faceVueTest,// 直接传入html元素 也可以直接传入字符 'faceId'
type:'checkSleep',// 人脸打卡
callBack:this.callBack // 阶段回调函数，会打印每个执行步骤，一般是在这个方法调用后端接口})
其实差异不大，唯一变化的是type的参数值
具体使用可以查看官方文档：https://faceeffet.com/
在官方文档中讲解了入参的具体对象
在h5中的使用
详细代码如下
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Face-effet.js 人脸登录示例</title><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="https://unpkg.com/face-effet/effet/effet.css"><scriptsrc="https://unpkg.com/face-effet/effet/effet.js"></script><style>#myface{margin-top: 350px;}</style><script>
document.addEventListener("DOMContentLoaded",function(){
effet.init({
el:'myface',callBack:(data)=>{
console.log(data);}});});</script></head><body><!-- 用于渲染人脸识别的容器 --><divid="myface"></div><buttononclick="effet.restart()">重新检测</button></body></html>
总结
effet.js 是一个基于 facemesh.js 的人脸交互框架，旨在为 Web 应用提供便捷而智能的人脸识别功能，包括登录、打卡和睡眠检测等。通过这篇博客，我将分享 effet.js 的开发历程、功能实现、以及面临的技术挑战，希望能为有兴趣提升用户体验的开发者提供一些启发。
版权归原作者 球球？ 所有， 如有侵权，请联系我们删除。