近期做了一個前端vue實現人臉識別的功能，主要功能邏輯包含：人臉識別，人臉驗證，喚起攝像頭視頻流之后從三個事件（用戶點頭、搖頭、眨眼睛）中隨機選中兩個事件，待兩個事件通過判斷后人臉靜止不動3秒鐘后截取視頻流生成圖片，上傳到阿里或者騰訊oss，通過oss返回的url或者自己拼接的url去跟調取后臺接口實現人臉識別/人臉識別二次校驗
基于face-api.js要實現人臉識別功能，首先要將自己需要的模型文件下載保存在靜態目錄下，
可以通過cdn的方式在index.html中引入face-api.js
上面頁面是自己或者UI給出的前置頁面，點擊開始驗證進入人臉識別頁面
?下面代碼為人臉識別頁面靜態內容
頁面顯示效果為下圖：
業務邏輯代碼
首先需要通過navigator.mediaDevices.getUserMedia獲取視頻流
navigator.mediaDevices.getUserMedia涉及到兼容性問題，可以自行參考資料去解決
下面為隨機三個事件中選中兩個事件的方法也可以忽略不計，可根據自身需求安排
人臉識別設置的是每一秒鐘執行一次檢測
下面是主要的實現人臉識別的初始化攝像頭和調用face-api.js代碼部分：
下面方法包含了點頭，搖頭，眨眼睛三個事件的判斷邏輯代碼可能存在精度上的問題可以根據自己的實際需求進行調整，api中都有詳細的計算公式
以下為截取到的視頻流的當前幀的圖片上傳到oss部分代碼
不管是上傳到騰訊云還是阿里云都是大同小異，一般都是通過調用后臺封裝的接口根據臨時的SecretId，SecretKey，SecurityToken去獲取oss上傳之后的圖片的url地址
再拿到imageUrl地址之后 就可以根據自身需求去做后續處理了，比如調后臺接口進行人臉識別或者人臉二次校驗等功能
還有就是在頁面銷毀的時候不要忘了清掉 設置的定時器，以及停止掉video的視頻流
)
