首页 前端知识 构建effet.js人脸识别交互系统的实战之路

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

2024-10-27 22:10:49 前端知识 前端哥 921 685 我要收藏

文章目录

  • 前言
  • 一、什么是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目前主要支持核心功能点

标题是否支持速度体验
人脸登录█████████ 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 = false

new Vue({
  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 注册好的全局对象
  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.效果图

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

上面案例主要介绍了,只需简单的代码就可以完成,眨眨眼,张张嘴,左右摇头的效果

六、其他模式讲解

人脸打卡

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中的使用

详细代码如下

<!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 的开发历程、功能实现、以及面临的技术挑战,希望能为有兴趣提升用户体验的开发者提供一些启发。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19266.html
标签
cookie交互
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!