緣起
"螞蟻呀嘿,螞蟻呀呼,螞蟻呀哈" 相信最近好多人的朋友圈或者抖音都被類似視頻刷過屏!
類似的效果最早是在2020年初,那個時候大家應(yīng)該還都記得,幾乎所有的人都因為疫情原因被迫線上辦公!
工作當(dāng)然離不開開會了,這點歪果仁和中國很像,國內(nèi)我們一般用qq或者釘釘來個在線視頻會議!歪果仁也會經(jīng)常開線上會議,不過他們用的最多的是zoom這個軟件。經(jīng)常的在線會會讓人很煩躁,為什么呢?原本在家辦公就不用洗頭了,但是為了開在線視頻會議還得去專門洗個頭!
so,一個來自俄羅斯程序猿就想了一個招數(shù)惡搞一下他的同事。他基于 first-order-model 做了一個叫做Avatarify 的軟件,并且放在了全世界做大的同性交友網(wǎng)站github上。First Order Motion Model for Image Animation 簡單來說就是把一張圖片變成動態(tài)的。Avatarify ,看起來很熟悉的名字,你肯定聽過一部叫阿凡達的電影!之后程序猿小哥又基于Avatarify 做了一個蘋果app,在網(wǎng)上掀起了嗎咿呀嘿旋風(fēng),不過在上架appstore7天后在中國區(qū)就被下架了,原因不得而知。
來看一下 First Order Motion Model上的圖片動畫結(jié)果
First Order Motion Model上的swap face結(jié)果
看完以后大概能明白為什么被下架了!如果東西能被普通人隨便使用,那么我們的表情甚至動作都能被別人模擬出來,只要他有一張你的照片!所以說人臉識別不是絕對安全,什么都可以被模擬!這兩天的315晚會不知道大家看沒有看,好多商家都在非法收集的臉部信息!
上面我們提到的庫都是python的,app實現(xiàn)這樣的功能都是把圖片或者視頻傳輸給服務(wù)器,然后服務(wù)器處理文件。
瀏覽器環(huán)境人臉識別
我們今天要在瀏覽器環(huán)境下面實現(xiàn)一個簡單的人臉識別,我們會用到Tracking.js ,這是一個獨立的JavaScript庫,用于跟蹤從相機或者圖片實時收到的數(shù)據(jù)。跟蹤的數(shù)據(jù)既可以是顏色,也可以是人,也就是說我們可以通過檢測到某特定顏色,或者檢測一個人體/臉的出現(xiàn)與移動,來觸發(fā)JavaScript 事件。
trankingjs下載
我們需要先點擊后面的標(biāo)簽下載trankingjs
trankingjs使用-識別圖片
引入 tracking-min.js人臉識別庫
引入face-min.js,eye-min.js,mouth-min.js 臉部,眼睛,嘴巴等模型文件
創(chuàng)建html文件,內(nèi)容如下
tml和css比較簡單,這里我們主要來看js代碼。
注意js代碼必須一定要寫在window.onload 回調(diào)函數(shù)里面,否者獲取不到圖片的數(shù)據(jù),就沒有辦法對圖片進行識別。
創(chuàng)建識別對象
獲取的event.data是一個數(shù)組 ,數(shù)組存放識別處理出來的臉部數(shù)據(jù),數(shù)據(jù)結(jié)構(gòu)如下
{width: 61, height: 61, x: 244, y: 125}
x和y是識別出來元素的坐標(biāo),width和height是識別出來元素的寬度
處理識別結(jié)果
接下來我們只要需要把得到的結(jié)果標(biāo)記到圖片的對應(yīng)的位置即可,通過plot函數(shù)創(chuàng)建一個div,給定對應(yīng)的坐標(biāo)和寬高
然后就會看到這樣的結(jié)果,會識別出照片的眼睛、鼻子、嘴巴
trankingjs使用-識別攝像頭數(shù)據(jù)
創(chuàng)建html文件,寫入如下代碼
核心js代碼解釋如下
創(chuàng)建識別對象
創(chuàng)建識別對象并且啟用攝像頭,將攝像頭內(nèi)容輸出到video標(biāo)簽上
注意:這里的識別放大比例,步長,邊緣密度等值可以根據(jù)攝像頭距離物體遠(yuǎn)近自己調(diào)整。
處理識別結(jié)果
然后啟動起來,瀏覽器會提示是否允許開啟攝像頭!點擊允許,就會看到你英俊瀟灑(沉魚落雁)的臉龐!
最后
最近剛好也有同學(xué)再問怎么在前端通過攝像頭獲取用戶的頭像,用本文的內(nèi)容剛好可以來了解一下前端瀏覽器環(huán)境下怎么識別人臉,用本文的內(nèi)容做一個人臉識別登錄也是可以的!
更多關(guān)于前端培訓(xùn)的問題,歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗,采用全程面授高品質(zhì)、高體驗培養(yǎng)模式,擁有國內(nèi)一體化教學(xué)管理及學(xué)員服務(wù),助力更多學(xué)員實現(xiàn)高薪夢想。
注:本文部分文字和圖片來源于網(wǎng)絡(luò),如有侵權(quán),請聯(lián)系刪除。版權(quán)歸原作者所有!