构建 effet.js 人脸识别交互系统的实战之路

文章目录

构建 effet.js 人脸识别交互系统的实战之路前言一、什么是effet.js二、为什么需要使用effet.js四、effet.js能做什么五、使用步骤1.引入库2.main.js中注册全局2.使用3.效果图

六、其他模式讲解人脸打卡人脸添加睡眠检测

在h5中的使用总结

前言

在当今数字化的时代，用户体验变得尤为重要，尤其是在身份验证、互动和安全性方面。传统的登录方式，如密码和短信验证码，逐渐显得繁琐而低效。人脸识别技术因其便捷性和安全性，正越来越多地被应用到各类应用场景中。

在这样的背景下，我开发了 effet.js —— 一个基于 facemesh.js 的人脸样式框架，旨在为 Web 应用提供丰富而智能的人脸交互功能。effet.js 实现了从人脸登录到睡眠检测的多样化功能，并力求在开发的灵活性与用户体验之间找到平衡。

在这篇博客中，我将带你了解 effet.js 的开发历程，包括它的功能实现、技术挑战和我为推广它所做的努力。如果你对如何利用 JavaScript 和前沿技术提升用户体验感兴趣，相信这篇文章会为你提供一些有趣的思路。

一、什么是effet.js

face-effet 简称effet.js 是一款人脸样式框架

effet.js 是一个轻量级的人脸样式框架，专注于为网页带来生动的面部动画效果。通过简单的API，开发者可以轻松实现眨眼、张嘴、摇头等动态表情，使用户界面更加互动和生动。effet.js 适用于需要增强用户体验的各种应用场景，特别是在前端项目中集成复杂的人脸动态效果。

官网地址：https://faceeffet.com/

二、为什么需要使用effet.js

Effet.js是一款轻量级人脸样式框架，可以快速帮我搭建前端识别校验的一个操作，这不是最终的校验， 需要配合后端一起校验，简单操作的api，方便快速帮我们搭建人脸登录，后端我们只需要调用其他厂商的接口

比如：

虹软人脸识别

百度云人脸识别

阿里云人脸识别

腾讯云人脸识别

等等…

四、effet.js能做什么

effet.js目前主要支持核心功能点

人脸登录：动作检测，眨眨眼，张张嘴，左右摇头检测

人脸打卡：判断摄像头距离头部远近位置来计算当前人脸是否可以打卡

睡眠检测：计算眼睛闭合度来呈现当前人脸是否在睡觉

人脸添加：计算人脸上下左右摇头的动画效果，完成人脸数据的返回

五、使用步骤

1.引入库

代码如下（我们已vue的人脸登录为示例，一个简单的人脸登录）：

通过npm命令安装，网络不好的同学们，可以尝试切换淘宝镜像

<code>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 = false

new Vue({ -- -->

router,

render: h => h(App)

}).$mount('#app')

2.使用

<template>

<div>

<div ref="faceVueTest" id="faceId" ></div>code>

<el-button @click="startFace">开启人脸</el-button>code>

<el-button @click="restartFace">重启人脸</el-button>code>

<el-button @click="closeFace">关闭人脸</el-button>code>

</div>

</template>

<script>

// $faceEffet 对象是在main.js 注册好的全局对象

export default { -- -->

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.效果图