前言
過年了，來點有趣的東西
最近一直在嘗試通過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裡面的內容也就開始動起來了
下面就是必要重要的內容了
面部識別
我要做的是面部識別，所有怎麼識別呢
- 讓我自己現場實現一個（不存在的，雖然在學機器學習，但是才學了幾天，還遠遠遠遠不夠）
- 找開源（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級別，好像不太夠
再找
yooyoo，眼睛鼻子都識別出來了，很屌嘛，就你了
那就直接搭node服務跑起來唄
然後簡單花了10分鐘搭了個koa2的服務
整體思路就是：
- 前端開啟
video video=>canvas=>base64=>ArrayBuffer（這個庫只能識別圖片物件或者ArrayBuffer）websocket前後端通訊- 後端處理圖片，返回
face、mouth在圖片上的位置資料 - 前端渲染嘴巴位置
- 加上鬍子
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
複製程式碼本地測試一切正常，但是部署到伺服器上的時候，還是有一些問題
- 伺服器安裝
opencv的時候有深坑 video，只能在https下用https下的websocket得升級到wss- 靜態資源訪問又遇到問題，媽的
這裡既然是前端文章，那麼我就不張開來講部署的問題了，
差不多就是這樣思路
最後
可能是今年最後一篇，寫的可能比較隨意，不知道上下文連不連貫（看官們，抱歉）
然後最後的結果就如文章最開始所見：
點選這裡看自己的效果（需要允許攝像頭呀！！）
詳細程式碼的話：
前後端都在這裡了： face-decorator