緣起

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

　　類似的效果最早是在2020年初，那個時候大家應該還都記得，幾乎所有的人都因為疫情原因被迫線上辦公!

　　工作當然離不開開會了，這點歪果仁和中國很像，國內我們一般用qq或者釘釘來個在線視頻會議!歪果仁也會經常開線上會議，不過他們用的最多的是zoom這個軟件。經常的在線會會讓人很煩躁，為什么呢?原本在家辦公就不用洗頭了，但是為了開在線視頻會議還得去專門洗個頭!

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

　　來看一下 First Order Motion Model上的圖片動畫結果

　　First Order Motion Model上的swap face結果

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

　　上面我們提到的庫都是python的，app實現這樣的功能都是把圖片或者視頻傳輸給服務器，然后服務器處理文件。

　　瀏覽器環境人臉識別

　　我們今天要在瀏覽器環境下面實現一個簡單的人臉識別，我們會用到Tracking.js ，這是一個獨立的JavaScript庫，用于跟蹤從相機或者圖片實時收到的數據。跟蹤的數據既可以是顏色，也可以是人，也就是說我們可以通過檢測到某特定顏色，或者檢測一個人體/臉的出現與移動，來觸發JavaScript 事件。

　　trankingjs下載

　　我們需要先點擊后面的標簽下載trankingjs

　　trankingjs使用-識別圖片

　　引入 tracking-min.js人臉識別庫

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

　　創建html文件，內容如下

　　tml和css比較簡單，這里我們主要來看js代碼。

　　注意js代碼必須一定要寫在window.onload 回調函數里面，否者獲取不到圖片的數據，就沒有辦法對圖片進行識別。

　　創建識別對象

　　獲取的event.data是一個數組 ，數組存放識別處理出來的臉部數據，數據結構如下

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

　　x和y是識別出來元素的坐標，width和height是識別出來元素的寬度

　　處理識別結果

　　接下來我們只要需要把得到的結果標記到圖片的對應的位置即可，通過plot函數創建一個div，給定對應的坐標和寬高

　　然后就會看到這樣的結果，會識別出照片的眼睛、鼻子、嘴巴

　　trankingjs使用-識別攝像頭數據

　　創建html文件，寫入如下代碼

　　核心js代碼解釋如下

　　創建識別對象

　　創建識別對象并且啟用攝像頭，將攝像頭內容輸出到video標簽上

　　注意：這里的識別放大比例，步長，邊緣密度等值可以根據攝像頭距離物體遠近自己調整。

　　處理識別結果

　　然后啟動起來，瀏覽器會提示是否允許開啟攝像頭!點擊允許，就會看到你英俊瀟灑(沉魚落雁)的臉龐!

　　最后

　　最近剛好也有同學再問怎么在前端通過攝像頭獲取用戶的頭像，用本文的內容剛好可以來了解一下前端瀏覽器環境下怎么識別人臉，用本文的內容做一個人臉識別登錄也是可以的!

　　更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。

　　注：本文部分文字和圖片來源于網絡，如有侵權，請聯系刪除。版權歸原作者所有!