After all the calls, the full version of web face recognition login is here, this style I love

Hello everyone, I am

When I first wrote this article, I once wrote an article about face recognition based on Java. Because I didn't know what to write in the code word at the beginning, I simply made a demo of face recognition.

But what I did not 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.

From then on, I began to tirelessly answer all kinds of questions, but my energy was limited after all, and in the end I couldn't answer, so I just got a group of fans to share their experiences with each other.

When the problem appeared on a large scale, I thought about releasing a full version of the demo, but I didn’t have any energy to do a lot of work at home. I have been dragging it until now, and now I use the face recognition login function on myself. On the project, I took this opportunity to share it. try not to leave (buried) bugs for everyone this time.

’s take a look at the effect of the finished product. The online preview address is: 1619dd4f23b688 https://fire100.top . Here you can rest assured that facial images will not be collected, but facial features are extracted and not uploaded to the cloud. Let's do a demonstration below to see the effect, the recognition speed and success rate are still good.

Function flow

The logic of the whole function is very simple. The front end turns on the camera, recognizes the face, and uploads it to the background. After the backend SDK recognizes the facial features in the picture, it compares with the user's facial features in the database, and the comparison is successful. (The similarity is between 0.8 and 1 means the same person) Login, if a face is recognized but the database is not successfully compared, it will be regarded as a new user registration.

Note: If you want to apply online, you must use https to turn up the camera, and there is no restriction on local testing.

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

Apply for SDK

Do some preparatory work before starting the project. Because you are using the three-party face recognition SDK, you must first apply for an account on the platform, and then download the corresponding version of the SDK.

SDK address

There may be people who raise the bar, why don't you write personal face recognition by yourself, don't ask, just don't ask!

Currently supports Linux , Windows , IOS , Android version, each real-name authentication account can activate 100 devices, in other words, the SDK applied for the same account can run on 100 devices, generally enough.

In the downloaded SDK package directory structure, libs is the most important, samplecode has sample code, and doc has API documentation. What we need is libs in arcsoft-sdk-face-3.0.0.0.jar , and three corresponding platform engine files .dll or .so suffix files.

Project configuration

The project itself is springboot + vue separated from the front and back ends, but for my friends to use it out of the box, I integrated the front and back ends of this function, and then used a jpa for persistence. The table does not need to be built by myself, which saves everyone. time.

I encountered a little pit when using the SDK, so I will explain in detail below

First created in the springboot startup class project where the root of a lib directory, unzip the SDK out arcsoft-sdk-face-3.0.0.0.jar into them, pom.xml document introduced this 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 special attention to the 0619dd4f23bb37 packaging configuration, be sure to add includeSystemScope , so that when maven packaging, the externally imported jar package (such as the root directory or the resource file) will be packaged into the project jar, and the project on the server To run.

Without this configuration, it can run locally, because the local can find external packages 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.yml file is simpler. Create a database to store the facial feature data, fill in the appId and sdkKey obtained when applying for the SDK, and path to store the file path of the .dll or .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

Configure these and execute FireControllerApplication directly, visit: 127.0.0.1:8081/login/face .

I will not post the source code here in large sections. If you are interested, get the link and download the source code for fun.

Source download

Face Recognition complete source web log has been uploaded to the Github up, source address , if you have questions feel free to contact it.