人臉實時簽到（three.js+tracking.js）基於瀏覽器

人臉簽到

花了一個星期作了人臉簽到的demo，github地址歡迎star,在線預覽大屏幕demo

---

先說些廢話，之前作年會的抽獎，感受好傻，如今正好在學threejs，就想作個這樣的場景來抽獎的方式，又在學人臉識別的知識，就想作人臉識別簽到，就想都作在瀏覽器中

---

體驗完整過程

• 1.微信掃描註冊上傳頭像

• 2. 手機瀏覽器打開人臉識別（ios11支持，微信瀏覽器不支持）

• 3.電腦打開大屏幕 地址 大屏幕能夠同步顯示剛剛的人臉

分享下製做過程

1.人臉識別

須要調用攝像頭，實時顯示有人臉，能夠用node或者python調用opencv之類的，可是這是後端的應用，能夠用樹莓派作個裝置，可是是瀏覽器識別，因此用tracking.js（已經好幾年沒有更新了，要識別其餘的模型的話，能夠python訓練出來模型）。識別出人臉後，要算寬度，要在必定的寬度纔算人臉，能夠裁剪出正方形發送檢索人臉。

2.人臉檢索

人臉檢索採用的是騰訊雲的智能圖像的api，須要建立我的信息，須要一個惟一的id（用的是微信的openid），一我的臉能夠添加20張類似度低於99%的圖片，一個組織能夠有2w我的，確定夠用的，接口費用很便宜，月調去量是一萬次免費

3.上傳我的信息

獲取微信openid，將照片上傳到服務器保存，並添加到騰訊雲的臉庫中

4.threejs場景

• 添加一個天空盒
• 計算球（原實例用的CSS3render，須要改爲webglrender）
• L形狀 四個須要寫頂點鏈接
• 動畫效果 用anime.JS，感受好用，爲何不用tween，由於本身剛剛學會的，因此想試一試
• 出現了人臉，須要將人臉飛到球的方塊中，須要用到座標轉換，還有四元數，才能緊貼着
• 空閒沒有人臉，會一直播放隨機圖片動畫，有人臉了會動畫結束後播放

5.socket通訊

用socket.io通訊，實時識別到人臉後，將人臉圖及時發送到大屏幕

6.ssl

由於用攝像頭識別須要ssl證書，他的請求都須要ssl，因此服務都要使用ssl證書，nginx或者apache須要配置https，而且將端口轉發,配置node服務以及socket服務的https

未完成tasks

• 會修改人臉飛入的動畫，須要有個中間點過分
• 增長粒子的動畫，任意選個圖片添加爆炸成圖片的效果
• 用寫shader來寫些效果