玩了一個人臉識別登入

摘要： 最近溫差大，請別感冒 前言 這篇文章就沒有目錄了，直接從頭正序開始即可。 因為突然接到了一個需求，一個xx局，內部使用的移動端專案（是我們開發的），需要新增一個人臉識別登入的需求，我這邊做了一下技術調研，做了一個Demo，在此記錄一下。Demo地址放在了文章結尾。 開發 ...

最近溫差大，請別感冒

前言

這篇文章就沒有目錄了，直接從頭正序開始即可。

因為突然接到了一個需求，一個xx局，內部使用的移動端專案（是我們開發的），需要新增一個人臉識別登入的需求，我這邊做了一下技術調研，做了一個Demo，在此記錄一下。Demo地址放在了文章結尾。

開發

1、找個架子

我這邊直接用的 dva-cli ,十分方便，反正我寫demo都直接拉的這個架子。感謝作者。

2、外掛tracking.js

tracking.js庫將不同的計算機視覺演算法和技術引入瀏覽器環境。通過使用現代HTML5規範，我們使您能夠進行實時顏色跟蹤、人臉檢測以及更多——所有這些都是通過一個輕量級的核心（約7kb）和直觀的介面實現的。

傳送門tracking.js

3、外掛face-api.js

基於tracking.js的瀏覽器端人臉識別的外掛，提供了一些api

4、呼叫

直接匯入，stats.min.js是face-min

5、設計結構

這裡確認一下需求流程。

• 1、呼叫攝像頭
• 2、檢測攝像頭中有無人臉
• 3、如果有人臉，同步畫到canvas層
• 4、匯出base64
• 5、傳送給資料庫進行比對。(這部分後臺同學做，當然前端也可以本地做，但沒什麼必要)
• 6、返回比對分數，是否符合登入節點。

6、HTML結構

核心就是，需要一個video標籤顯示攝像頭內容，一個canvas畫布抓取影象。（HTML並不完全，只是展示核心）

7、引入宣告

8、效果

9、聯調

這個我就不多說了，剩下的就是業務階段，拿到了圖片，傳送給伺服器，伺服器比對過後返回給你登入結果或者一個相似度分數，這樣我們就可以判斷是否可以登入。

10、GitHub地址

傳送門: face-web

END

簡單的記錄一下一種實現方式，也算投石問路，大家可以一起交流一下。

最近又出差了，還是很忙，簡單的沉澱一下文章。謝謝各位。