緣起

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

　　類似的效果最早是在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ù)攝像頭距離物體遠近自己調(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)歸原作者所有!