face-api.js中加入MTCNN：進一步支持使用JS實時進行人臉跟蹤和識別

編譯：yxy

出品：ATYUN訂閱號

如果你現在正在閱讀這篇文章，那麼你可能已經閱讀了我的介紹文章（JS使用者福音：在瀏覽器中運行人臉識別）或者之前使用過face-api.js。如果你還沒有聽說過face-api.js，我建議你先閱讀介紹文章再回來閱讀本文。

和往常一樣，本文中為你準備了一個代碼示例。我們將解析一個小的應用程序，這個程序將在瀏覽器中訪問攝像頭圖像執行實時人臉檢測和人臉識別，讓我們開始吧！

使用face-api.js進行人臉檢測

到目前為止，face-api.js單獨實現了基於SSD Mobilenet v1的CNN進行人臉檢測。雖然這個是一個非常精確的人臉檢測器，但SSD並不像其他架構那麼快（在推理時間方面），並且可能無法通過這個人臉檢測器實現實時檢測，除非你或者你的用戶在他們的機器中內置了一個不錯的GPU。

事實證明，你並不總是需要那麼高的準確度，有時候你會寧願用高精度換取更快的人臉檢測器。

所以我們要用到MTCNN，它現在可以在face-ap .js中使用了！MTCNN是一種更輕量級的面部檢測器。與SSD Mobilenet v1相比：

優點：

更短的推理時間（更快的檢測速度）

同時檢測5個面部標誌點（我們「免費」獲得人臉對齊）

模型更小：相比對於6MB（量化的SSD Mobilenet v1權重）來說，它僅約2MB

可配置性：你可以調整一些參數以提高性能以滿足你的特定要求

缺點：

不如SSD Mobilenet v1準確

MTCNN – 同時進行人臉檢測和面部地標

MTCNN（Multi-task Cascaded Convolutional Neural Networks）是一種由3個階段組成的演算法，它可以檢測圖像中人臉的邊界框以及它們的5個點的面部地標。每個階段通過將其輸入通過CNN逐步改善檢測結果，CNN返回具有其分數的候選邊界框，然後是非最大抑制。

論文：https://kpzhang93.github.io/MTCNN_face_detection_alignment/paper/spl.pdf

在階段1中，輸入圖像被縮放多次以構建影像金字塔，並且圖像的每個縮放版本都通過其CNN傳遞。在第2階段和第3階段，我們為每個邊界框提取圖像塊並調整它們的大小（第2階段為24×24，第3 階段為48×48），然後通過該階段的CNN傳遞它們。除了邊界框和分數之外，階段3還為每個邊界框計算5個面部地標點。

在修改了一些MTCNN實現之後，結果表明，與SSD Mobilenet v1相比，即使在CPU上運行推斷，也可以在更低的推斷時間獲得相當可靠的檢測結果。並且，從5個面部地標點中，我們可以免費獲得面部對齊！這樣，在計算面部描述符之前，我們不必執行68點面部地標檢測作為中間步驟。

儘管在我看來這很有前景，我還是繼續在tfjs-core中實現了這一點。經過幾天的努力，我終於能夠找到一個有效的解決方案。

攝像頭人臉跟蹤和人臉識別

如前所述，我們現在將看看如何使用攝像頭實現人臉跟蹤和人臉識別。在這個例子中，我會使用我的攝像頭再次跟蹤和識別一些《生活大爆炸》主角的臉，但當然你可以使用這些代碼來跟蹤和識別自己。

要顯示網路攝像頭中的幀，只需使用如下視頻元素即可。此外，我將一個絕對定位的畫布放在視頻元素的頂部，具有相同的高度和寬度。我們將使用畫布作為透明的疊加層，稍後我們可以在上面繪製檢測結果：

載入頁面後，我們將載入MTCNN模型和人臉識別模型，以計算面部描述符。此外，我們使用navigator.getUserMedia將我們的攝像頭流附加到視頻元素：

現在程序應該會請求授予瀏覽器訪問攝像頭的許可權。在我們為視頻元素指定的onPlay回調中，我們將處理每個幀的實際加工。注意，一旦視頻開始播放，就會觸發onplay事件。

人臉檢測

正如我所說，我們可以在這裡配置一些檢測參數。默認參數：

要跟蹤攝像頭中的人臉，我們會將minFaceSize增加到至少200px。僅檢測較大尺寸的人臉使我們獲得更短的推理時間，因為網路將圖像縮小的係數更大：

如你所見，我們可以簡單地將視頻元素提供給它，就像圖像或畫布元素那樣。

通過MTCNN前向傳遞給我們一個FaceDetection數組（邊界框+得分）以及每個檢測到的人臉的FaceLandmark5。現在我們可以將結果繪製到疊加層上：

例子如下，到目前為止，我們將得到下面的結論：

計算人臉描述符

從我之前的教程中你應該已經知道，在計算任何面部描述符之前，我們需要將人臉地標的位置與人臉邊界框的位置對其。從對齊的框中，我們提取對齊的通過人臉識別網路傳遞的面部張量：

如果你覺得這樣做很麻煩，代碼太多，還有一個方便快捷的函數—faceapi.allFacesMtcnn。它可以檢測圖像中所有人臉並計算它們的描述符（類似於faceapi.allFaces）：

人臉識別

從現在開始，我們只需按照上一個教程中的方式進行操作。回想一下，為了識別人臉，在運行主循環之前，我們必須為每個我們想要識別（參考數據）的人的示例圖像預先計算一個（至少一個）面部描述符。為了做出決策，是哪一個人坐在攝像頭前面，我們將在參考數據中的面部描述符中查詢人臉描述符並返回最相似的匹配：

如果你只想跟蹤自己，只需自拍一張然後運行faceapi.allFaces就可以檢索自己臉部的面部描述符（參考描述符）。然後，可以使用faceapi.euclideanDistance直接計算查詢面部描述符的距離（從你的攝像頭圖像到參考描述符）。

最後，我們將帶有預測標籤的文本和相對於邊界框位置的距離再次繪製到覆蓋層畫布上：

然後，不要忘記調用onPlay繼續迭代處理最近的幀。就是這些！

結語

最後要注意的是，為每一幀重新計算查詢面部描述符是一種非常幼稚的方法。顯然，有更有效的方法，例如每隔x幀跟蹤和更新檢測結果的面部描述符。通常，被跟蹤的人臉的姿勢不會在幾幀中有劇烈地改變。但為了簡單起見，這樣就可以了。如果你想要從中擠出更多的fps，可以利用這一點。

示例的完整源代碼：https://github.com/justadudewhohacks/face-api.js/blob/master/examples/views/mtcnnFaceRecognitionWebcam.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！