緣起

　　"螞蟻呀嘿，螞蟻呀呼，螞蟻呀哈" 相信最近好多人的朋友圈或者抖音都被類似視頻刷過(guò)屏!

　　類似的效果最早是在2020年初，那個(gè)時(shí)候大家應(yīng)該還都記得，幾乎所有的人都因?yàn)橐咔樵虮黄染€上辦公!

　　工作當(dāng)然離不開開會(huì)了，這點(diǎn)歪果仁和中國(guó)很像，國(guó)內(nèi)我們一般用qq或者釘釘來(lái)個(gè)在線視頻會(huì)議!歪果仁也會(huì)經(jīng)常開線上會(huì)議，不過(guò)他們用的最多的是zoom這個(gè)軟件。經(jīng)常的在線會(huì)會(huì)讓人很煩躁，為什么呢?原本在家辦公就不用洗頭了，但是為了開在線視頻會(huì)議還得去專門洗個(gè)頭!

　　so，一個(gè)來(lái)自俄羅斯程序猿就想了一個(gè)招數(shù)惡搞一下他的同事。他基于 first-order-model 做了一個(gè)叫做Avatarify 的軟件，并且放在了全世界做大的同性交友網(wǎng)站github上。First Order Motion Model for Image Animation 簡(jiǎn)單來(lái)說(shuō)就是把一張圖片變成動(dòng)態(tài)的。Avatarify ，看起來(lái)很熟悉的名字，你肯定聽過(guò)一部叫阿凡達(dá)的電影!之后程序猿小哥又基于Avatarify 做了一個(gè)蘋果app，在網(wǎng)上掀起了嗎咿呀嘿旋風(fēng)，不過(guò)在上架appstore7天后在中國(guó)區(qū)就被下架了，原因不得而知。

　　來(lái)看一下 First Order Motion Model上的圖片動(dòng)畫結(jié)果

　　First Order Motion Model上的swap face結(jié)果

　　看完以后大概能明白為什么被下架了!如果東西能被普通人隨便使用，那么我們的表情甚至動(dòng)作都能被別人模擬出來(lái)，只要他有一張你的照片!所以說(shuō)人臉識(shí)別不是絕對(duì)安全，什么都可以被模擬!這兩天的315晚會(huì)不知道大家看沒(méi)有看，好多商家都在非法收集的臉部信息!

　　上面我們提到的庫(kù)都是python的，app實(shí)現(xiàn)這樣的功能都是把圖片或者視頻傳輸給服務(wù)器，然后服務(wù)器處理文件。

　　瀏覽器環(huán)境人臉識(shí)別

　　我們今天要在瀏覽器環(huán)境下面實(shí)現(xiàn)一個(gè)簡(jiǎn)單的人臉識(shí)別，我們會(huì)用到Tracking.js ，這是一個(gè)獨(dú)立的JavaScript庫(kù)，用于跟蹤從相機(jī)或者圖片實(shí)時(shí)收到的數(shù)據(jù)。跟蹤的數(shù)據(jù)既可以是顏色，也可以是人，也就是說(shuō)我們可以通過(guò)檢測(cè)到某特定顏色，或者檢測(cè)一個(gè)人體/臉的出現(xiàn)與移動(dòng)，來(lái)觸發(fā)JavaScript 事件。

　　trankingjs下載

　　我們需要先點(diǎn)擊后面的標(biāo)簽下載trankingjs

　　trankingjs使用-識(shí)別圖片

　　引入 tracking-min.js人臉識(shí)別庫(kù)

　　引入face-min.js，eye-min.js，mouth-min.js 臉部，眼睛，嘴巴等模型文件

　　創(chuàng)建html文件，內(nèi)容如下

　　tml和css比較簡(jiǎn)單，這里我們主要來(lái)看js代碼。

　　注意js代碼必須一定要寫在window.onload 回調(diào)函數(shù)里面，否者獲取不到圖片的數(shù)據(jù)，就沒(méi)有辦法對(duì)圖片進(jìn)行識(shí)別。

　　創(chuàng)建識(shí)別對(duì)象

　　獲取的event.data是一個(gè)數(shù)組 ，數(shù)組存放識(shí)別處理出來(lái)的臉部數(shù)據(jù)，數(shù)據(jù)結(jié)構(gòu)如下

　　{width: 61, height: 61, x: 244, y: 125}

　　x和y是識(shí)別出來(lái)元素的坐標(biāo)，width和height是識(shí)別出來(lái)元素的寬度

　　處理識(shí)別結(jié)果

　　接下來(lái)我們只要需要把得到的結(jié)果標(biāo)記到圖片的對(duì)應(yīng)的位置即可，通過(guò)plot函數(shù)創(chuàng)建一個(gè)div，給定對(duì)應(yīng)的坐標(biāo)和寬高

　　然后就會(huì)看到這樣的結(jié)果，會(huì)識(shí)別出照片的眼睛、鼻子、嘴巴

　　trankingjs使用-識(shí)別攝像頭數(shù)據(jù)

　　創(chuàng)建html文件，寫入如下代碼

　　核心js代碼解釋如下

　　創(chuàng)建識(shí)別對(duì)象

　　創(chuàng)建識(shí)別對(duì)象并且啟用攝像頭，將攝像頭內(nèi)容輸出到video標(biāo)簽上

　　注意：這里的識(shí)別放大比例，步長(zhǎng)，邊緣密度等值可以根據(jù)攝像頭距離物體遠(yuǎn)近自己調(diào)整。

　　處理識(shí)別結(jié)果

　　然后啟動(dòng)起來(lái)，瀏覽器會(huì)提示是否允許開啟攝像頭!點(diǎn)擊允許，就會(huì)看到你英俊瀟灑(沉魚落雁)的臉龐!

　　最后

　　最近剛好也有同學(xué)再問(wèn)怎么在前端通過(guò)攝像頭獲取用戶的頭像，用本文的內(nèi)容剛好可以來(lái)了解一下前端瀏覽器環(huán)境下怎么識(shí)別人臉，用本文的內(nèi)容做一個(gè)人臉識(shí)別登錄也是可以的!

　　更多關(guān)于前端培訓(xùn)的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。

　　注：本文部分文字和圖片來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除。版權(quán)歸原作者所有!