千呼萬喚,web人臉識別登入完整版來了,這樣式我愛了

程式設計師內點事 發表於 2021-11-23

在我最開始寫文章的時候曾經寫過一篇文章 基於 Java 實現的人臉識別功能,因為剛開始碼字不知道寫點什麼,就簡單弄了個人臉識別的Demo。

但讓我沒想到的是,在過去的一年裡有好多好多粉絲加我好友諮詢這個小demo,因為裡邊有點小bug,導致一些新手朋友不能成功啟動。

千呼萬喚,web人臉識別登入完整版來了,這樣式我愛了

從此我就開啟不厭其煩的解答各種疑問,不過我精力畢竟有限,最後實在回答不過來,乾脆弄了個群粉絲互相分享經驗。

問題大面積出現的時候我就想過再出一個完整版的demo,可家裡工作一大堆事搞得一點精力都沒有,一直拖到了現在,正好現在把這個人臉識別登入功能用在了自己的專案上,藉此機會分享出來了,這次儘可能不給大家留(埋)bug 哈哈哈

千呼萬喚,web人臉識別登入完整版來了,這樣式我愛了

具體操作之前先看下成品的效果,線上預覽地址:fire100.top,這裡大家可以放心,不會收集面部圖片,只是提取了面部特徵,並沒有上傳雲端。下邊我們以冰冰來做個演示看看效果,識別速度和成功率還是不錯的。

千呼萬喚,web人臉識別登入完整版來了,這樣式我愛了

功能流程

整個功能的邏輯很簡單,前端調起攝像頭,識別到人臉後拍照上傳到後臺,後端SDK識別出圖片中的人臉特徵後,與資料庫內的使用者人臉特徵做比對,比對成功(相似度在0.8~1之間即算同一個人)登入,如識別到人臉但資料庫內未比對成功則視為新使用者註冊。

注意:如果要線上上應用,必須要使用https才能調起攝像頭,本地測試沒有限制。

千呼萬喚,web人臉識別登入完整版來了,這樣式我愛了

申請SDK

啟動專案之前先做一點準備工作,因為使用的是三方的人臉識別SDK,所以要先在平臺申請一個賬號,然後在下載對應版本的SDK。

官網地址: ai.arcsoft.com.cn/ucenter/res…

可能會有人抬槓為啥你不自己寫個人臉識別,別問,問就是不會!

目前支援LinuxWindowsIOSAndroid版本,每個實名認證的賬號可以啟用100臺裝置,換句話說就是同一個賬號申請的SDK可以在100個裝置上執行,一般情況下夠用了。

千呼萬喚,web人臉識別登入完整版來了,這樣式我愛了

下載的SDK包目錄結構中libs最為重要,samplecode裡有示例程式碼,doc有API文件。我們需要的是libs裡邊的arcsoft-sdk-face-3.0.0.0.jar、和三個對應平臺的引擎檔案.dll或者.so字尾的檔案。

千呼萬喚,web人臉識別登入完整版來了,這樣式我愛了

專案配置

專案本身是springboot + vue 前後端分離的,但為了小夥伴們開箱即用,我把這個功能前後端整合在一起,再用個 jpa做持久化,表也不用自己建了,給大家省點時間。

使用SDK的時候遇到過一點小坑,所以下邊說的詳細一點

首先在springboot啟動類所在專案根目錄下建立一個lib目錄,將SDK中解壓出的arcsoft-sdk-face-3.0.0.0.jar放進去,pom.xml檔案中引入這個 Jar

千呼萬喚,web人臉識別登入完整版來了,這樣式我愛了

<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了,原始碼地址 github.com/chengxy-nds… ,如果有問題隨時諮詢吧。

千呼萬喚,web人臉識別登入完整版來了,這樣式我愛了

本作品採用《CC 協議》,轉載必須註明作者和本文連結
【18230062509】