前言
在当今数字化的期间，用户体验变得尤为紧张，尤其是在身份验证、互动和安全性方面。传统的登录方式，如密码和短信验证码，逐渐显得繁琐而低效。人脸辨认技术因其便捷性和安全性，正越来越多地被应用到各类应用场景中。
在这样的配景下，我开辟了 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目前主要支持焦点功能点
标题是否支持速率体验人脸登录√█████████ 90%人脸打卡√█████████ 90%睡眠检测√█████████ 90%人脸添加√█████████ 90% 人脸登录：动作检测，眨眨眼，张张嘴，左右摇头检测
人脸打卡：判断摄像头间隔头部远近位置来计算当前人脸是否可以打卡
睡眠检测：计算眼睛闭合度来出现当前人脸是否在睡觉
人脸添加：计算人脸上下左右摇头的动画结果，完成人脸数据的返回
五、使用步骤
1.引入库
代码如下（我们已vue的人脸登录为示例，一个简单的人脸登录）：
通过npm命令安装，网络不好的同学们，可以实行切换淘宝镜像
- npm config set registry https://registry.npmmirror.com
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')
- <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 注册好的全局对象
- 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>
上面案例主要介绍了，只需简单的代码就可以完成，眨眨眼，张张嘴，左右摇头的结果
六、其他模式讲解
人脸打卡
- 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 // 阶段回调函数，会打印每个执行步骤，一般是在这个方法调用后端接口
- })
详细使用可以检察官方文档：https://faceeffet.com/
在官方文档中讲解了入参的详细对象
在h5中的使用
详细代码如下
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Face-effet.js 人脸登录示例</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="https://unpkg.com/face-effet/effet/effet.css">
- <script src="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>
- <!-- 用于渲染人脸识别的容器 -->
- <div id="myface"></div>
- <button onclick="effet.restart()">重新检测</button>
- </body>
- </html>
总结
effet.js 是一个基于 facemesh.js 的人脸交互框架，旨在为 Web 应用提供便捷而智能的人脸辨认功能，包罗登录、打卡和睡眠检测等。通过这篇博客，我将分享 effet.js 的开辟进程、功能实现、以及面对的技术挑衅，盼望能为有兴趣提升用户体验的开辟者提供一些启发。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
