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

notebin 發布于2019-08-22 18:35 / 890人閱讀

摘要：識別出人臉后，要算寬度，要在一定的寬度才算人臉，可以裁剪出正方形發送檢索人臉。

人臉簽到

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

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

體驗完整過程

1.微信掃描注冊上傳頭像

手機瀏覽器打開人臉識別（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來寫些效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96014.html

Web 前端中的增強現實（AR）開發技術

摘要：增強現實以下簡稱浪潮正滾滾而來，瀏覽器作為人們最唾手可得的人機交互終端，正在大力發展技術。目前年底前端要想實現，都是靠的視頻透視式技術。但這兩個都是移動的，于是谷歌的團隊提供了和兩個庫，以便開發者能用技術來基于和開發，從而實現。本文作者 GeekPlux，博客地址：http://geekplux.com/2018/01/18/augmented-reality-development...

Jochen 2019-08-22 17:18 評論0 收藏0
前端工程師做Face Detection

摘要：身為一名前業務程序員和現前端程序員，這樣的功能還是陌生的領域。需求使用加攝像頭，通過人臉檢測，完成自動拍照功能。在的屏幕上，顯示攝像頭的實時畫面，要是畫面中檢測出人臉，則觸發拍照。這樣做的效果能夠獲得更高的，同時還能完成更遠距離臉部的捕獲。因為項目原因，需要使用人臉檢測（face detection）功能。身為一名前JAVA業務程序員和現前端程序員，這樣的功能還是陌生的領域。那能不能...

nodejh 2019-08-20 14:33 評論0 收藏0
前端人臉檢測指南

摘要：的發布已經有一些時日，其主要的提供的能力是給予前端直接可用的特征檢測的接口包括條形碼人臉文本檢測。本文將簡單的對其進行介紹，對前端進行人臉檢測進行普適性的講解。 Shape Detection API 的發布已經有一些時日，其主要的提供的能力是給予前端直接可用的特征檢測的接口（包括條形碼、人臉、文本檢測）。本文將簡單的對其進行介紹，對前端進行人臉檢測進行普適性的講解。（本文不講算法～望...

dockerclub 2019-08-22 16:43 評論0 收藏0