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