前言

近些年來，隨著生物識別技術的逐漸成熟，基於深度學習的人臉識別技術取得了突破性進展，準確率顯著提高。現階段，人臉識別身份驗證作為非常重要的身份驗證方式，已被廣泛的應用於諸多行業和領域，例如：支付寶付款、刷臉簽到等方面。

其優點在於，以人臉為識別對象，識別過程更加友好、便捷，只需被識別者進入攝像範圍內即可，不會引起被識別者的反感和警惕。目前，市面上的應用場景主要集中在移動端，而基於 Web 瀏覽器端的人臉識別身份驗證方案較少。

本文將介紹基於 Web 瀏覽器端的人臉識別身份驗證的整體方案，以及重點講解如何在 Web 瀏覽器中實現人臉自動採集。

場景描述及分析

適用場景：人臉識別身份實名認證。用戶使用人臉識別身份驗證功能時，只需要將人臉對準攝像頭，程序自動對人臉進行檢測。如果檢測到當前攝像頭可視區域內僅存在唯一一個人臉，則採集當前人臉圖片進行人臉對比、活體檢測、身份證識別等多項組合能力，快速完成用戶身份核驗。
從上述場景描述中，分析出幾個關鍵問題及解決方案：
- 考慮到 Web 端性能，活體檢測交由服務端處理比較合適。具體可參考百度 AI 活體檢測 (https://ai.baidu.com/tech/face/faceliveness)
- 個人身份證上的高清照片是無法直接獲取到的。可以使用 百度 AI 的實名身份認證服務 (https://ai.baidu.com/tech/face/personverify)，將待比對的人臉圖片 + 身份證號碼 + 姓名上傳到百度 AI 服務，會返回圖片的匹配度（0~100）。其底層調用的也是公安的實名認證接口
- 使用開源的人臉採集 JS 庫。需要支持單個和多個人臉檢測
- 經橫向對比目前常用的開源人臉採集 JS 庫，Face-api.js 在性能和準確度上更勝一籌
- face-api.js ：基於 TensorFlow.js 內核，實現了三種卷積神經網絡架構，用於完成人臉檢測、識別和特徵點檢測任務，可以在瀏覽器中進行人臉識別。其內部實現了一個非常輕巧，快速，準確的 68 點面部標誌探測器。支持多種 tf 模型，微小模型僅為 80kb。另外，它還支持 GPU 加速，相關操作可以使用 WebGL 運行
- tracking.js : 一個獨立的 JavaScript 庫，主要實現了顏色和人（人臉、五官等）的跟蹤檢測。可以通過檢測到某特定顏色，或者檢測一個人體/臉的出現與移動，來觸發 JavaScript 事件，然後對人臉進行採集。Tracking.js 是使用 CPU 進行計算的，在圖像的矩陣運算效率上，相對 GPU 要慢一些
- 通過 navigator.mediaDevices.getUserMedia API（基於 WebRTC）可以獲取到攝像頭拍攝的實時視頻流數據
- 問題一：如何獲取到攝像頭拍攝的實時視頻流數據？
- 問題二：如何檢測到實時視頻流中存在唯一人臉，並進行採集？
- 問題三：實名身份驗證怎麼實現？如何獲取到身份證上的高清照片進行比對？
- 問題四：活體檢測怎麼實現？

整體方案

主要分為以下幾個關鍵步驟：
- 調用攝像頭（需獲得用戶授權允許），獲取攝像頭的視頻流數據
- 使用 face-api.js 識別視頻流中的人臉特徵點，定位出人臉的位置
- 符合人臉特徵時，暫停視頻流，根據視頻流當前幀，繪製圖像
- 將圖像轉成 Base64 編碼，上傳到服務端
- 服務端調用百度 AI 的接口，與身份證上的圖片信息進行比對，並進行活體檢測

實現細節

在上述方案中，想必大家對攝像頭檢測、實時視頻流數據獲取、Canvas 圖片繪製這些都比較熟悉，我這邊就不詳細講解了。部分同學沒接觸過也沒關係，具體實現比較簡單，可以直接看源碼 (https://github.com/Angela-Chen/face-api-demo)，源碼裡面關於這些都有詳細的註解。

下面我詳細講下，如何使用 face-api.js 在實時視頻流中進行人臉的檢測

1、引入 face-api

script 標籤方式，獲取 最新腳本 (https://github.com/justadudewhohacks/face-api.js/tree/master/dist)

<script src="face-api.js"></script>

或者 使用 npm 方式

npm install face-api.js

2、加載模型數據

「

加載模型數據是異步操作。需要等模型數據加載完成後，才能開始人臉檢測。

// 加載所有模型數據，models 是存放模型數據文件的目錄
await faceapi.loadModels('/models'); 
// 加載單個指定的模型數據
await faceapi.loadTinyFaceDetectorModel('/models');
await faceapi.loadSsdMobilenetv1Model('/models');
await faceapi.loadMtcnnModel('/models');

3、檢測人臉

「

當人臉被檢測到符合模型的配置參數後，就會被認為檢測到人臉了，然後返回一個detection對象，包括了人臉匹配度、人臉坐標等信息。可用於後續自定義繪製人臉邊界框，以及閾值的邏輯判斷。

faceapi.detectAllFaces ：檢測圖像中的所有人臉
faceapi.detectSingleFace ：檢測單個人臉，返回圖像中具有最高置信度得分的人臉

// 數據源支持：HTMLImageElement | HTMLVideoElement | HTMLCanvasElement 類型
// 不同的模型有不同的配置參數，下面會詳細介紹
const detections1 = await faceapi.detectAllFaces(待檢測的數據源, 模型的配置參數);
const detections2 = await faceapi.detectSingleFace(待檢測的數據源, 模型的配置參數);

4、常用人臉檢測模型介紹

(1) Tiny Face Detector 是一款性能非常高的實時人臉檢測模型，與 SSD Mobilenet V1 人臉檢測模型相比，它更快，更小，資源消耗更少，量化模型的大小僅為 190 KB（tiny_face_detector_model），但它在檢測小臉時的表現稍差。加載時長 8 ms左右

// 模型的配置參數
new faceapi.TinyFaceDetectorOptions({
  // 輸入的數據源大小，這個值越小，處理速度越快。常用值：128, 160, 224, 320, 416, 512, 608
  inputSize: number,  // default: 416
  // 用於過濾邊界的分數閾值，大於等於這個值才被認為檢測到了人臉，然後返回一個detection對象
  scoreThreshold: number  // default: 0.5
});

(2) SSD Mobilenet V1 對於面部檢測，該模型實現了基於 MobileNetV1 的 SSD（單次多核檢測器）。神經網絡將計算圖像中每個面部的位置，並將返回邊界框以及每個面部的機率。該面部檢測器旨在獲得檢測面部邊界框而不是低推理時間的高精度。量化模型的大小約為 5.4 MB（ssd_mobilenetv1_model）。加載時長 2-3s 左右

// 模型的配置參數
new faceapi.SsdMobilenetv1Options({
  // 最小置信值，大於等於這個值才被認為檢測到了人臉，然後返回一個detection對象
  minConfidence: number,  // default: 0.5
  // 最多返回人臉的個數
  maxResults: number  // default: 100
});

(3) MTCNN MTCNN（多任務級聯卷積神經網絡）代表了 SSD Mobilenet v1 和 Tiny Yolo v2 的替代面部檢測模型，它提供了更多的配置空間。通過調整輸入參數，MTCNN 應該能夠檢測各種面部邊界框大小。MTCNN 是一個 3 級級聯 CNN，它同時返回 5 個面部標誌點以及每個面的邊界框和分數。此外，型號尺寸僅為 2 MB。加載時長 1-2s 左右

// 模型的配置參數
new faceapi.MtcnnOptions({
  // 人臉尺寸的最小值，小於這個尺寸的人臉不會被檢測到
  minFaceSize: number,  // default: 20
  // 用於過濾邊界的分數閾值，分別可以設置3個階段盒子的閾值。
  scoreThresholds: number[],  // default: [0.6, 0.7, 0.7]
  // 比例因子用於計算圖像的比例步長
  scaleFactor: number,  // default: 0.709
  // 經過CNN的輸入圖像縮放版本的最大數量。數字越小，檢測時間越短，但相對準確度會差一些。
  maxNumScales: number,  // default: 10
  // 手動設置縮放步長 scaleSteps
  scaleSteps?: number[],
});

特別說明:
- 模型的配置參數設置非常重要，需要慢慢的微調，能優化識別性能和比對的正確性
- 實測下來，Tiny Face Detector 模型的性能非常好，檢測的準確度也不錯，只有人臉很小的時候，會有較大偏差，scoreThreshold 閾值為 0.6 時最佳

注意事項

由於 Web 端的人臉識別將依賴於本地攝像頭的喚起，因此，對於本地攝像頭的調用需要進行詳細的錯誤捕獲和處理，以便明確的提示用戶該如何操作。下面已枚舉出所有可能出現的報錯：

const errorMap = {
 'NotAllowedError': '攝像頭已被禁用，請在系統設置或者瀏覽器設置中開啟後重試',
 'AbortError': '硬體問題，導致無法訪問攝像頭',
 'NotFoundError': '未檢測到可用攝像頭',
 'NotReadableError': '作業系統上某個硬體、瀏覽器或者網頁層面發生錯誤，導致無法訪問攝像頭',
 'OverConstrainedError': '未檢測到可用攝像頭',
 'SecurityError': '攝像頭已被禁用，請在系統設置或者瀏覽器設置中開啟後重試',
 'TypeError': '類型錯誤，未檢測到可用攝像頭'
};

await navigator.mediaDevices.getUserMedia({video: true})
  .catch((error) => {
    if (errorMap[error.name]) {
      alert(errorMap[error.name]);
    }
});

http 協議下，Chrome 瀏覽器無法調用本地攝像頭
- Chrome 瀏覽器出於安全性的考慮，現只支持 HTTPS 協議和 localhost 下，調用攝像頭。HTTP 協議下是無法調用攝像頭的。如果一定要在 HTTP下調用到攝像頭，只能修改 Chrome 瀏覽器的配置項，但不建議這麼做

源碼獲取

查看源碼 (https://github.com/Angela-Chen/face-api-demo)

基於 Web 端的人臉識別身份驗證「實踐」

前言

場景描述及分析

整體方案

實現細節

注意事項

源碼獲取

推薦JavaScript經典實例學習資料文章