3 分钟搞定 web 人脸识别登录,这样式爱了

简介: 就是这么丝滑

大家好,我是小富~

在我最开始写文章的时候曾经写过一篇文章 基于 Java 实现的人脸识别功能,因为刚开始码字不知道写点什么,就简单弄了个人脸识别的Demo。

但让我没想到的是,在过去的一年里有好多好多粉丝加我好友咨询这个小demo,因为里边有点小bug,导致一些新手朋友不能成功启动。

从此我就开启不厌其烦的解答各种疑问,不过我精力毕竟有限,最后实在回答不过来,干脆弄了个群粉丝互相分享经验。

问题大面积出现的时候我就想过再出一个完整版的demo,可家里工作一大堆事搞得一点精力都没有,一直拖到了现在,正好现在把这个人脸识别登录功能用在了自己的项目上,借此机会分享出来了,这次尽可能不给大家留(埋)bug 哈哈哈

具体操作之前先看下成品的效果,线上预览地址:https://fire100.top,这里大家可以放心,不会收集面部图片,只是提取了面部特征,并没有上传云端。下边我们来做个演示看看效果,识别速度和成功率还是不错的。

功能流程

整个功能的逻辑很简单,前端调起摄像头,识别到人脸后拍照上传到后台,后端SDK识别出图片中的人脸特征后,与数据库内的用户人脸特征做比对,比对成功(相似度在0.8~1之间即算同一个人)登录,如识别到人脸但数据库内未比对成功则视为新用户注册。

注意:如果要在线上应用,必须要使用https才能调起摄像头,本地测试没有限制。

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c47626d95004f1c9be9d9a5fee55500~tplv-k3u1fbpfcp-zoom-1.image

申请SDK

启动项目之前先做一点准备工作,因为使用的是三方的人脸识别SDK,所以要先在平台申请一个账号,然后在下载对应版本的SDK。

SDK地址

可能会有人抬杠为啥你不自己写个人脸识别,别问,问就是不会!

目前支持LinuxWindowsIOSAndroid版本,每个实名认证的账号可以激活100台设备,换句话说就是同一个账号申请的SDK可以在100个设备上运行,一般情况下够用了。

下载的SDK包目录结构中libs最为重要,samplecode里有示例代码,doc有API文档。我们需要的是libs里边的arcsoft-sdk-face-3.0.0.0.jar、和三个对应平台的引擎文件.dll或者.so后缀的文件。

项目配置

项目本身是springboot + vue 前后端分离的,但为了小伙伴们开箱即用,我把这个功能前后端整合在一起,再用个 jpa做持久化,表也不用自己建了,给大家省点时间。

使用SDK的时候遇到过一点小坑,所以下边说的详细一点

首先在springboot启动类所在项目根目录下创建一个lib目录,将SDK中解压出的arcsoft-sdk-face-3.0.0.0.jar放进去,pom.xml文件中引入这个 Jar

<dependency>
   <groupId>com.arcsoft.face</groupId>
    <artifactId>arcsoft-sdk-face</artifactId>
    <version>3.0.0.0</version>
    <scope>system</scope>
    <systemPath>${basedir}/lib/arcsoft-sdk-face-3.0.0.0.jar</systemPath>
</dependency>

maven打包配置要特别注意一点,一定要加上includeSystemScope,这样 maven 打包时会将外部引入的jar包(比如在根目录下或resource文件下新加外部jar包)打包到项目jar中,服务器上项目才能运行。

不加此配置,本地可以运行,因为本地可以再lib下找到外部包,但是服务器上jar中是没有的。

<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <version>${spring-boot.version}</version>
    <configuration>
        <includeSystemScope>true</includeSystemScope>
        <fork>true</fork>
        <mainClass>com.firebook.FireBookApplication</mainClass>
        <skip>false</skip>
    </configuration>
</plugin>

application.yml 文件的配置更简单,搞个数据库存放人脸特征数据,填写申请SDK时得到的appIdsdkKey,以及 path 为存放引擎文件.dll或者.so后缀的文件路径。

spring:
  datasource:
#    type: com.zaxxer.hikari.HikariDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/face?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
# 人脸识别-windows
face:
  appId: #*********************
  sdkKey: #*********************
  path: D://face

配置好这些直接执行FireControllerApplication就可以了,访问:127.0.0.1:8081/login/face

这里源码我就不大段大段往出贴了,感兴趣的小伙伴自行获取链接下载源码玩玩吧。

源码下载

web人脸识别登录的完整源码已经上传到Github了,源码地址 ,如果有问题随时咨询吧。

相关文章
|
6月前
|
存储 数据库 数据安全/隐私保护
实现一个简单的Web应用,要求可以进行用户注册和登录。
实现一个简单的Web应用,要求可以进行用户注册和登录。
71 3
|
6月前
|
编解码 前端开发 Java
大华相机接入web页面实现人脸识别
大华相机接入web页面实现人脸识别
138 0
|
6月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
70 0
|
27天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
38 2
|
2月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
45 11
|
3月前
|
前端开发
炫酷登录页大变身:5分钟带你入门Web动效设计
炫酷登录页大变身:5分钟带你入门Web动效设计
|
3月前
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
40 0
|
3月前
|
开发者 前端开发 UED
打造企业专属形象:Vaadin主题与样式定制,让你的Web应用脱颖而出!
【8月更文挑战第31天】在Web应用开发中,界面设计至关重要。Vaadin框架提供强大的主题和样式定制功能,助力开发者打造符合品牌形象的独特外观。本文详细介绍了Vaadin主题的概念及创建流程,并演示了如何通过CSS和SCSS定制组件样式,使用主题继承扩展现有主题,以及为特定组件设置专属样式。遵循这些最佳实践,不仅能提升用户体验,还能增强品牌的识别度,让你的应用更加出众。
36 0
|
5月前
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
89 1
Web前端网站(一) - 登录页面及账号密码验证
|
4月前
|
JavaScript 前端开发
Web Components详解-Shadow DOM样式控制
Web Components详解-Shadow DOM样式控制
122 3