前端簡單面部識別

前言

過年了，來點有趣的東西

最近一直在嘗試經過web如何DIY視頻，怎麼捕捉視頻的行爲，給視頻加點好玩的東西,好比給視頻加一個鬍子？

如下記錄一下最近的玩具

---

live demo

點擊這裏看本身的效果（須要容許攝像頭呀！！）

效果

效果大概以下:
就是給視頻的臉上加個鬍子（我手機上有防藍光的膜，各位大爺將就着看吧）

思路

首先我作的視頻動態繪製鬍子的東西，那確定要先支持視頻吧

支持視頻

這裏代碼就很是簡單，新建一個html，寫上一個video標籤

navigator.getUserMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia

if (navigator.getUserMedia) {
    navigator.getUserMedia(
        { video: { width: 500, height: 500 } },
        function (stream) {
            var video = document.querySelector('video')
            video.srcObject = stream
            video.onloadedmetadata = function (e) {
                video.play()
            }
        },
        function (err) {
            console.log('The following error occurred: ' + err.name)
        }
    )
} else {
    console.log('getUserMedia not supported')
}

寫到這裏視頻就能夠播放了

而後咱們把這個視頻放進canvas裏,

其實就是定時採集video的內容，而後drawImage到canvas就行了

setInterval(() => {
      v.drawImage(video, 0, 0, 500, 375)
      vData = v.getImageData(0, 0, 500, 375)    
    }, 20)

這裏開始canvas裏面的內容也就開始動起來了

下面就是必要重要的內容了

面部識別

我要作的是面部識別，全部怎麼識別呢

1. 讓我本身現場實現一個（不存在的，雖然在學機器學習，可是才學了幾天，還遠遠遠遠不夠）
2. 找開源（bingo，就是你了）

開源面部識別 trackingjs

而後就是找到了一個這個 trackingjs

看了一下效果，很是好，雖然有點慢，可是知足咱們的功能

face(image)-demo
face(camera)-demo

好，那麼先在本地跑個demo試試

......而後5min過去了

且慢，好像這個識別不能識別camera的內容（camera只支持到face，不支持mouth、eye、nose級別）

mdzz

ps: 若是隻是簡單加個帽子之類的東西的話，用這個庫也就夠了

下面幾天我基本上就卡在這個環節幾天都沒有什麼好的思路

直到某天，我隨便刷的時候看到了這個實現face-detection-node-opencv

咦，她也實現了面部識別，好像這我的再trackingjs的contributor裏面見過，而後她用到了opencv，記得在今年d2的大會上主會場某幾個嘉賓也分享了ar主題的東西，也是用服務器來實現的(就是canvas的getImageData後把數據傳給後端，後端處理完再把結果返回)，當時我覺得效率會不好（在圖片傳輸方面），其實看下來好像效果還能夠

好，接下里就配上後端來寫，彷佛功能會多不少。那麼接下來就像武器大師說的：開打開打

node 識別 opencv

那麼就看opencv的node有什麼好的實現了

then，node-opencv，這個能夠識別到face級別，好像不太夠

再找

faced

yooyoo，眼睛鼻子都識別出來了，很屌嘛，就你了

那就直接搭node服務跑起來唄

而後簡單花了10分鐘搭了個koa2的服務

總體思路就是：

1. 前端開啓video
2. video => canvas => base64 => ArrayBuffer（這個庫只能識別圖片對象或者ArrayBuffer）
3. websocket先後端通信
4. 後端處理圖片，返回face、mouth在圖片上的位置數據
5. 前端渲染嘴巴位置
6. 加上鬍子

done

下面是 後端處理圖片的時間，平均大概5ms，當作玩具的話，勉強夠

start: 4.568ms
start: 3.881ms
start: 3.564ms
start: 3.690ms
start: 5.971ms
start: 4.069ms
start: 3.364ms
start: 5.054ms
start: 22.219ms
start: 5.586ms
start: 5.000ms

本地測試一切正常，可是部署到服務器上的時候，仍是有一些問題

1. 服務器安裝opencv的時候有深坑
2. video，只能在https下用
3. https 下的websocket 得升級到 wss
4. 靜態資源訪問又遇到問題，媽的

這裏既然是前端文章，那麼我就不張開來說部署的問題了，

差很少就是這樣思路

---

最後

多是今年最後一篇，寫的可能比較隨意，不知道上下文連不連貫（看官們，抱歉）

而後最後的結果就如文章最開始所見：

點擊這裏看本身的效果（須要容許攝像頭呀！！）

詳細代碼的話：

先後端都在這裏了： face-decorator

參考連接/推薦閱讀

• 咦？瀏覽器都能作人臉檢測了？
• 前端工程師作Face Detection
• faced
• node-opencv
• HTML5-Face-Detection