基于vue+face-api.js實現(xiàn)前端人臉識別功能
近期做了一個前端vue實現(xiàn)人臉識別的功能，主要功能邏輯包含：人臉識別，人臉驗證，喚起攝像頭視頻流之后從三個事件（用戶點頭、搖頭、眨眼睛）中隨機選中兩個事件，待兩個事件通過判斷后人臉靜止不動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ù)自身需求安排
人臉識別設(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)文章
在移動端或PC,頁面的部分內(nèi)容常常需要我們讓其在頁面滾動,這篇文章主要給大家介紹了關(guān)于vue.js滾動條插件vue-scroll的基本用法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
在最近一個項目的后臺管理系統(tǒng)中，寫前端界面時用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來詳細(xì)的介紹一下2021-09-09
vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)
在有些情況下需要使用不同的語言來完成一個項目,因此就有可能出現(xiàn)不同語言的程序之間的相互調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2024-03-03
vue限制文本輸入框只允許輸入字母、數(shù)字、禁止輸入特殊字符
這篇文章主要介紹了vue限制文本輸入框只允許輸入字母、數(shù)字、不允許輸入特殊字符,通過監(jiān)聽表單輸入的內(nèi)容,使用方法的缺陷,本文通過實例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
解決vue input或el-input type="number"輸入數(shù)字,去
文章討論了在input或el-input控件中設(shè)置type=number時,如何去除右側(cè)上下箭頭,針對el-input,推薦使用/deep/深度選擇器穿透scoped樣式限制進(jìn)行樣式覆蓋,并介紹了其適用場景及注意事項2025-10-10
WebRTC作為一種開放標(biāo)準(zhǔn)的實時通信協(xié)議,能輕松實現(xiàn)瀏覽器之間的實時音視頻通信,本次主要分享基于WebRTC的音視頻通話技術(shù),講解WebRTC原理和音視頻傳輸?shù)汝P(guān)鍵概念,通過案例實踐,帶大家掌握如何搭建一個音視頻通話應(yīng)用,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vuex給state中的對象新添加屬性遇到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue Router中應(yīng)用中間件的方法，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue router,感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了VUE3+TS獲取組件類型的方法踩坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue2.0 實現(xiàn)富文本編輯器功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05