vue2 + tracking 實現 PC 端的人臉識別

總是會有一些奇奇怪怪的需求無法避免。記錄一下曾經專案遇到的一個需求。

需求

上傳患者真實頭像，可以有兩種選擇，一種是通過常規的檔案選擇方式上傳，第二種方式就是醫生可以呼叫電腦的攝像頭拍一張然後上傳。

分析

常規的就不用分析了，只分析第二種：

• 呼叫本地攝像頭
• 然後可以進行拍照
• 因為是患者的真實頭像，方便辨認，要求要拍到患者臉部
• 檢測到患者臉部，自動截圖，醫生只需要點選上傳即可

實現思路

首先看有不有能識別到患者臉部的前端第三方庫，如果沒有，這個需求就相對來說就麻煩一點，就是在拍照的時候需要醫生辨別能否達到上傳的要求，然後再拍照上傳也行。

基於上面的思路，開始尋找，最後確定使用 tracking.js 它的 github 地址

使用 tracking.js

• 安裝：yarn add tracking
• 使用，用一個測試 demo 來展示：

src/components/TestFace.vue

```javascript

```

src/utils/utils.js

```javascript export let userMedia = function (constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { userMedia = function (constraints, success, error) { navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error) } } else if (navigator.webkitGetUserMedia) { userMedia = function (constraints, success, error) { navigator.webkitGetUserMedia(constraints, success, error) } } else if (navigator.mozGetUserMedia) { userMedia = function (constraints, success, error) { navigator.mozGetUserMedia(constraints, success, error) } } else if (navigator.getUserMedia) { userMedia = function (constraints, success, error) { navigator.getUserMedia(constraints, success, error) } }

userMedia(constraints, success, error) } ```

最終的效果如下：

最後

首先確保有攝像頭

有時候本地除錯無法開啟攝像頭，可以在瀏覽器上輸入：chrome://flags/#unsafely-treat-insecure-origin-as-secure

然後會出現如下頁面，再操作即可：