基于vue+face-api.js實現(xiàn)前端人臉識別功能
近期做了一個前端vue實現(xiàn)人臉識別的功能，主要功能邏輯包含：人臉識別，人臉驗證，喚起攝像頭視頻流之后從三個事件（用戶點頭、搖頭、眨眼睛）中隨機(jī)選中兩個事件，待兩個事件通過判斷后人臉靜止不動3秒鐘后截取視頻流生成圖片，上傳到阿里或者騰訊oss，通過oss返回的url或者自己拼接的url去跟調(diào)取后臺接口實現(xiàn)人臉識別/人臉識別二次校驗
基于face-api.js要實現(xiàn)人臉識別功能，首先要將自己需要的模型文件下載保存在靜態(tài)目錄下，
可以通過cdn的方式在index.html中引入face-api.js
上面頁面是自己或者UI給出的前置頁面，點擊開始驗證進(jìn)入人臉識別頁面
下面代碼為人臉識別頁面靜態(tài)內(nèi)容
頁面顯示效果為下圖：
業(yè)務(wù)邏輯代碼
首先需要通過navigator.mediaDevices.getUserMedia獲取視頻流
navigator.mediaDevices.getUserMedia涉及到兼容性問題，可以自行參考資料去解決
下面為隨機(jī)三個事件中選中兩個事件的方法也可以忽略不計，可根據(jù)自身需求安排
人臉識別設(shè)置的是每一秒鐘執(zhí)行一次檢測
下面是主要的實現(xiàn)人臉識別的初始化攝像頭和調(diào)用face-api.js代碼部分：
下面方法包含了點頭，搖頭，眨眼睛三個事件的判斷邏輯代碼可能存在精度上的問題可以根據(jù)自己的實際需求進(jìn)行調(diào)整，api中都有詳細(xì)的計算公式
以下為截取到的視頻流的當(dāng)前幀的圖片上傳到oss部分代碼
不管是上傳到騰訊云還是阿里云都是大同小異，一般都是通過調(diào)用后臺封裝的接口根據(jù)臨時的SecretId，SecretKey，SecurityToken去獲取oss上傳之后的圖片的url地址
再拿到imageUrl地址之后 就可以根據(jù)自身需求去做后續(xù)處理了，比如調(diào)后臺接口進(jìn)行人臉識別或者人臉二次校驗等功能
還有就是在頁面銷毀的時候不要忘了清掉 設(shè)置的定時器，以及停止掉video的視頻流
到此這篇關(guān)于vue+face-api.js實現(xiàn)前端人臉識別功能的文章就介紹到這了,更多相關(guān)vue face-api.js人臉識別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue3之 頁面,菜單,路由的使用，文章圍繞Vue3頁面,菜單,路由相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
在項目開發(fā)中我們難免碰到需要對webpack配置更改的情況,下面這篇文章主要給大家介紹了關(guān)于vuecli中chainWebpack的常用操作舉例,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關(guān)于VUE登錄注冊頁面的相關(guān)資料,在Vue中可以使用組件來構(gòu)建登錄注冊頁面,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
基于vue+electron實現(xiàn)文件下載打開wps預(yù)覽
這篇文章主要給大家介紹了基于vue+electron實現(xiàn)文件下載打開wps預(yù)覽,文中有詳細(xì)的代碼示例供大家借鑒參考,感興趣的同學(xué)可以參考閱讀下2023-08-08
今天被vue中proxy配置困擾了一天,記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue配置文件中的proxy配置方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue router 用戶登陸功能的實例代碼,主要用到H5中的會話存儲（sessionStorage）、vue-router路由前置操作、路由元信息(meta)等知識點，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-04-04
vue項目中在可編輯div光標(biāo)位置插入內(nèi)容的實現(xiàn)代碼
這篇文章主要介紹了vue項目中在可編輯div光標(biāo)位置插入內(nèi)容的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定）
本篇文章主要介紹了vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了vue輕松實現(xiàn)水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue項目中路由跳轉(zhuǎn)頁面不變問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08