Long-awaited, the full version of web face recognition login is here, I love this style

Hello everyone, I'm Xiaofu~

When I first wrote the article, I once wrote an article on the face recognition function based on Java . Because I didn't know what to write at the beginning, I simply made a Demo of face recognition.

But what I didn't expect is that in the past year, many fans have added my friends to consult this small demo, because there are some small bugs in it, which caused some novice friends to fail to start successfully.

Since then, I have started to take the trouble to answer various questions, but after all, my energy is limited, and in the end I couldn't answer it, so I simply got a group of fans to share their experiences with each other.

When the problem appeared on a large scale, I thought of making a full version of the demo, but I have no energy at all for a lot of work at home, and it has been delayed until now, just now I use this face recognition login function for myself On the project, I took this opportunity to share it. This time I try not to leave (bury) bugs for everyone. Hahaha .

Take a look at the effect of the finished product before the specific operation. The online preview address is: https://fire100.top . You can rest assured here that we will not collect facial pictures, but only extract facial features and do not upload them to the cloud. Below we use Bingbing as a demonstration to see the effect. The recognition speed and success rate are still good.

Functional process

The logic of the whole function is very simple. The front-end activates the camera, recognizes the face, and takes a photo and uploads it to the background. After the back-end SDK recognizes the facial features in the picture, it compares it with the user's facial features in the database, and the comparison is successful. (Similarity between 0.8 and 1 means the same person) login. If a face is recognized but the comparison is not successful in the database, it is regarded as a new user registration.

Note: If you want to apply online, you must use https to activate the camera, and there is no limit to local testing.

Apply for SDK

Before starting the project, do some preparatory work, because the three-party face recognition SDK is used, so you must first apply for an account on the platform, and then download the corresponding version of the SDK.

Official website address: https://ai.arcsoft.com.cn/ucenter/resource/build/index.html#/login

Some people may raise the bar why you don't write your own face recognition, don't ask, you just won't!

Currently Linux, Windows, , , IOSand Androidversions are supported. Each real-name authentication account can activate 100 devices. In other words, the SDK applied for by the same account can run on 100 devices, which is generally enough.

The downloaded SDK package directory structure is the libsmost important, samplecodewith sample code and docAPI documentation. What we need is the engine files or suffix files libsinside and the three corresponding platforms.arcsoft-sdk-face-3.0.0.0.jar.dll.so

Project configuration

The project itself is separated from the front and back ends of springboot + vue, but for the sake of the friends out of the box, I integrated the front and back ends of this function, and then used one jpafor persistence. .

I encountered a little pit when using the SDK, so I will talk about it in detail below

First, create a directory in the root directory of the project where the springboot startup class is located lib, put the decompressed in the SDK arcsoft-sdk-face-3.0.0.0.jarinto it, pom.xmland introduce this in the file 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>

mavenSpecial attention should be paid to the packaging configuration, which must be added includeSystemScope, so that when maven is packaged, the externally introduced jar package (such as resourceadding an external jar package in the root directory or file) will be packaged into the project jar, and the project on the server can run.

Without this configuration, it can be run locally, because the external package can be found under lib, but there is no jar on the server.

<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.ymlThe configuration of the file is simpler. Create a database to store the facial feature data, fill in the appIdand obtained when applying for the SDK sdkKey, and the file path pathfor storing the engine file .dllor .sosuffix.

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

After configuring these, you can execute FireControllerApplicationit directly, visit: 127.0.0.1:8081/login/face.

I will not post the source code here in large sections. Interested friends can get the link to download the source code and play with it.

Source code download

The complete source code of web face recognition login has been uploaded Github. If you have any questions, please feel free to consult.

{{o.name}}

{{m.name}}