DAMO开发者矩阵

DAMO开发者矩阵 用 effet.js 快速搞定人脸识别和互动效果！

用 effet.js 快速搞定人脸识别和互动效果！

心上之秋

851人浏览 · 2024-11-13 15:54:16
心上之秋  ·  2024-11-13 15:54:16 发布

用 effet.js 快速搞定人脸识别和互动效果！

简介

近年来，随着计算机视觉技术的快速发展，基于人脸的识别与互动应用已经逐渐融入我们的日常生活。无论是手机解锁、安防监控，还是互动娱乐，人脸识别技术都发挥着至关重要的作用。在这篇博文中，我们将介绍如何使用 effet.js 框架轻松实现人脸识别及互动功能。effet.js 是一个基于 facemesh.js 的二次开发框架，旨在让开发者能够更方便地在项目中引入人脸识别相关的功能，如人脸登录、打卡、睡眠检测等。本文将结合代码和示例图片，带您深入了解如何使用这个框架。

什么是 effet.js

effet.js 是一个轻量级的人脸样式框架，专注于提供简单易用的人脸识别功能，帮助开发者快速将人脸互动功能集成到他们的应用中。该框架基于 facemesh.js 构建，并进行了进一步的优化，以提供更多样化的互动功能。例如，人脸登录、打卡、睡眠检测和人脸添加等功能，这些都可以为用户带来更具吸引力的交互体验。

主要特性
  1. 人脸登录：通过眨眼、张嘴等动作进行人脸验证，提供一种趣味和安全并存的登录方式。
  2. 人脸打卡：支持在应用中打卡，适用于各种签到、考勤场景。
  3. 睡眠检测：可用于检测用户在摄像头前是否处于睡眠状态，适合于防疲劳驾驶等应用。
  4. 人脸添加：支持通过摄像头对用户人脸进行采集和注册，方便后续识别与验证。

安装与使用

在开始使用 effet.js 之前，首先需要在项目中引入它。我们可以通过 npm 或 yarn 进行安装：

npm install face-effet.js
  • 1.

或者：

yarn add face-effet.js
  • 1.

安装完成后，我们可以在项目中引入并进行初始化。

main.js

import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 
 // 引入框架
 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')
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
HTML 结构

在实现人脸识别功能之前，我们需要先搭建一个简单的 HTML 结构，包括视频元素用于捕获摄像头画面。

示例：

<template>
   <div>
     <div id="dangqface">
     </div>
     <button @click="restart">重新验证</button>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
       editor: null
     };
   },
   mounted() {
       this.$faceEffet.init({
         el: 'dangqface',
         callBack: (data) => {
           console.log(data);
         }
       })
   },
   methods: {
     restart(){
       this.$faceEffet.restart()
     }
   }
 };
 </script>
 <style>
 #dangqface{
   width: 100%;
   height: 600px;
   position: absolute;
   transform: translate(-50%,-50%);
   left: 50%;
   top: 50%;
   overflow: hidden;
   border: 1px red solid;
 }
 </style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.

上面的代码定义了一个用于显示摄像头视频流的 video 元素。effet.js 会将人脸识别的结果实时渲染在该视频流上。

功能演示

1. 人脸登录

effet.js 提供了多种交互方式进行人脸登录，比如眨眼、张嘴等动作。以下是具体的实现步骤：

effet.init({
      el: 'myface',
      type:'checkLogin',
      callBack: (data) => {
          console.log(data);
      }
  });
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

在上面的代码中，callBack 回调函数会在检测到预设的动作后触发，例如眨眼等。

用户只需根据提示进行眨眼、张嘴等操作，即可完成身份验证。这种方式不仅增加了趣味性，还提升了安全性。

2. 人脸打卡

人脸打卡的功能适用于需要签到的场景，例如会议签到、考勤管理等。

effet.init({
     el: 'myface',
     type:'clockIn',
     callBack: (data) => {
         console.log(data);
     }
 });
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

一旦检测到人脸，系统就会自动进行打卡操作。effet.js 提供了一些额外的方法，比如 startAttendance()，可以方便地调用打卡功能。

3. 睡眠检测

通过睡眠检测功能，应用可以检测到用户的状态，以判断用户是否睡着。这在防止疲劳驾驶等场景中非常有用。

effet.init({
    el: 'myface',
    type:'checkSleep',
    callBack: (data) => {
        console.log(data);
    }
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

当检测到用户长时间闭眼时，onSleepDetected 回调函数会被触发，通知系统用户可能已经睡着，从而可以采取一些安全措施，比如发出警告音。

性能优化与多线程加载

由于 effet.js 依赖于多个文件，包括 facemesh.js 和其他模型文件，初始化加载可能较慢。因此，使用cache方法来事先缓存

在 JavaScript 中，以下是一个示例：

<template>
   <div>
     <el-row v-if="faceLoginState">
       <el-col :span="24">
         <el-form ref="form" :model="form" label-width="80px">
 
           <el-form-item label="账号">
             <el-input v-model="form.name"></el-input>
           </el-form-item>
 
           <el-form-item label="密码">
             <el-input v-model="form.pwd"></el-input>
           </el-form-item>
 
           <el-form-item label="登录">
             <el-button>登录</el-button>
             <el-button @click="faceLoginChange">切换人脸登录</el-button>
           </el-form-item>
 
         </el-form>
       </el-col>
     </el-row>
 
     <el-row v-if="!faceLoginState">
       <el-col :span="24">
         <div ref="faceVueTest" id="faceId"></div>
       </el-col>
       <el-col :span="24">
         <el-button @click="faceLoginChange">切换密码登录</el-button>
       </el-col>
     </el-row>
   </div>
 </template>
   
  <script>
  // $faceEffet 对象是在main.js 注册好的全局对象
  export default {
    name: "index",
    data(){
      return {
       form:{
         name:"",
         pwd:""
       },
       faceLoginState:true,
       faceInitState:false,// 用于标记人脸是否已经初始化，如果初始化则重启
      }
    },
    created(){
        // 在当前页面刚刚加载的时候，可以先进行缓存操作，因为在init函数也会调用当前cache函数
        // 如果已缓存，则会忽略掉，所以不必担心重复缓存的问题，
        // 从而调用init函数是不需要缓存而提升人脸容器加载速度
        this.$faceEffet.cache();
    },
    // 页面销毁的时候，需要调用close函数
    beforeDestroy(){
      if (this.$faceEffet){
        this.$faceEffet.close();
      }
    },
    methods:{
      faceLoginChange(){
          this.faceLoginState = !this.faceLoginState
          if (!this.faceLoginState){
              // 人脸登录模式 
              if (this.faceInitState){
                  this.$faceEffet.restart()
                  return;
              }
              this.faceInit()
              this.faceInitState = true // 标记已经初始化
          }else {
              // 密码登录模式
          }
      },
      faceInit(){
         this.$faceEffet.init({
             el:this.$refs.faceVueTest, // 直接传入html元素 也可以直接传入字符 'faceId'
             callBack:this.callBack // 阶段回调函数，会打印每个执行步骤，一般是在这个方法调用后端接口
         })
      },
      callBack(data){
          if (data.progressMessage === 'success'){ // 判断阶段是否成功
                 let array = data.base64Array; 
                 if (!data.base64Array || data.base64Array.length === 0){
                     return;
                 }
                 Promise.all(data.base64Array).then((base64Strings) => {
                     // base64Strings 是一个人脸图片数组
                     // 这个是模拟请求后端接口，请切换你自己的请求接口
                     http.post('/login/face',{base:base64Strings}).then(res=>{
                          if (res.code === 200){
                              // 登录成功
                              // 这里登录成功应该把后端token带过来存入前端，
                          }else {
                              // 登录失败 重启人脸容器，开始新的一轮验证
                              this.$faceEffet.restart()
                          }
                     })
                 }).catch((error) => {
                     console.error("Error resolving promises:", error);
                 });
          }        
      }
    }
  }
  </script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.

使用场景与实际案例

1. 在线教育与考勤

在在线教育场景中，effet.js 可以用于学生的签到与考勤管理。通过人脸打卡功能，教师可以轻松确认每个学生的出勤情况，并将数据实时同步到后台。

2. 企业考勤管理

在企业应用中，effet.js 可用于考勤管理系统，无需额外的硬件设备，仅通过普通摄像头即可实现高效的考勤签到。

3. 汽车安全监测

在汽车驾驶中，结合睡眠检测功能，可以实时监测驾驶员的状态，防止因疲劳驾驶而导致的交通事故，提升驾驶安全性。

小结

effet.js 是一个非常强大且易用的人脸识别框架，帮助开发者更简单地实现多样化的人脸交互功能。无论是人脸登录、打卡还是睡眠检测，都能够有效提高应用的用户体验和安全性。通过结合 JavaScript 多线程的性能优化手段，我们还可以确保在提供丰富功能的同时保持系统的高效与流畅。

希望通过这篇博文，您能够对 effet.js 有更深入的了解，并能够在自己的项目中实践这些功能。如果您对 effet.js 感兴趣，不妨在自己的应用中试一试吧！

更多资源

欢迎加入我们的社区，一起探讨与交流更多关于人脸识别和交互的有趣想法！

# javascript # 开发语言 # ecmascript # 前端
Logo
DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

[具身智能-582]：I2C 完整读写时序详解（标准 7 位地址、400kHz 快速模式，适配 RDK i2cdev 底层逻辑）

使用 Repeated START 切换读模式；不发送 STOP，直接再次生成 START，用于「写寄存器地址→连续读数据」场景，不释放总线，避免总线冲突。库内部自动封装 START、STOP、ACK 时序，无需用户操作电平；不先发寄存器地址，从机无目标地址，读出随机无效乱码。发送 1 字节寄存器偏移地址 0x02。I2C 读不能直接读，必须。（每 8bit 后必传）

avatar DAMO开发者矩阵

[具身智能-583]：RDK 提供的Python I2C 接口属于面向 /dev/i2c-x 的通用总线驱动，仅实现原始单字节收发的底层硬件通路，仅负责总线时序控制；没有针对任意一款 I2C 外设封装

RDK 提供的 Python I2C 接口属于面向/dev/i2c-x的通用总线驱动，仅实现原始单字节收发的底层硬件通路，仅负责总线时序控制；没有针对任意一款 I2C 外设封装专用操作逻辑、寄存器映射与数据解析，不属于完整的器件专用驱动程序。

avatar DAMO开发者矩阵

【无标题】

3、所有pc通告DHCP获取IP地址 ，且pc1/pc3可以正常访问pc2/pc4pc5/pc6。pc2/pc4/pc5/pc6属于同一网段，其中pc2可以访问pc4/pc5/pc6；2、pc1/pc3与pc2/pc4pc5/pc6不在同一网段；1、pc1和pc3所在接口为access，属于vlan 2；pc4可以访问pc6；pc5不能访问pc6；

avatar DAMO开发者矩阵
  • 浏览量 851
  • 收藏 0
  • 0

所有评论(0)

查看更多评论 

心上之秋

@qq_35485206
已为社区贡献15条内容