一、緣起緣生
前段時(shí)間有個(gè)H5很火，上傳個(gè)頭像就可以顯示自己穿軍裝的樣子，無(wú)意中看到了一篇帖子叫全民刷軍裝背后的AI技術(shù)及簡(jiǎn)單實(shí)現(xiàn)，里面提到了百度AI，我自己也試了一下下，效果就醬紫。
當(dāng)然這個(gè)東西并不實(shí)用，只是純粹娛樂(lè)而已，但是本人想是否可以通過(guò)這個(gè)技術(shù)，實(shí)現(xiàn)那種人臉識(shí)別驗(yàn)證，來(lái)驗(yàn)證如會(huì)議刷臉簽到、網(wǎng)站刷臉登錄這種高大上的技術(shù)。于是說(shuō)干就干，花了將近一周時(shí)間完成了一個(gè)初步的DEMO。
二、技術(shù)儲(chǔ)備
要實(shí)現(xiàn)這個(gè)系統(tǒng)，本人認(rèn)為需要涉及到以下技術(shù)知識(shí)點(diǎn)，這些都是需要提前學(xué)習(xí)和積累的：
1、Nodejs
2、Express（基于后端開(kāi)發(fā)）
3、Vue-Cli（基于前端開(kāi)發(fā)，Vue的腳手架，沒(méi)明白為啥叫腳手架o(╯□╰)o ）
4、百度AI人臉識(shí)別SDK，點(diǎn)擊學(xué)習(xí)地址
不得不說(shuō)百度AI在人工智能方面確實(shí)比其他幾個(gè)大佬做的厚道，接口全面開(kāi)放，而且還是免費(fèi)，人家估計(jì)都在起步階段，而百度已經(jīng)甩了好幾條街。。。
在網(wǎng)上學(xué)習(xí)了一些資料，尤其是仔細(xì)分析了百度SDK以后，接下來(lái)就開(kāi)始開(kāi)發(fā)啦。
三、開(kāi)發(fā)步驟
1、搭建vue-cli腳手架，主要用于快速搭建一個(gè)網(wǎng)站，安裝方法
2、在router目錄中配置index.js頁(yè)面路由，方便多個(gè)頁(yè)面之間交互，如圖：
3、新建兩個(gè)頁(yè)面到pages目錄，其中Home是主頁(yè)面，用于展示人臉識(shí)別；Main為輸入頁(yè)面，用于錄入人員信息。
4、導(dǎo)入百度AI的SDK，都放在src目錄中，太多了自己看吧，官方文檔中有說(shuō)明
5、制作Home頁(yè)面，原理主要是設(shè)置了一個(gè)getVideo方法開(kāi)啟攝像頭（前提是你的電腦需要有設(shè)備），然后通過(guò)takePhoto方法獲得當(dāng)前視頻中的一幀圖片，打印到canvas中（canvas支持打印繪畫、圖片、視頻）。
6、制作Main頁(yè)面，這個(gè)頁(yè)面就比較簡(jiǎn)單啦，只設(shè)置了兩個(gè)輸入框和一個(gè)上傳圖片按鈕，先湊合著用吧。主要用于人員信息錄入，需要先將人員相關(guān)信息建立檔案，否則無(wú)法識(shí)別。
7、說(shuō)了這么一堆，都是前端的東西，那么怎么和后端實(shí)現(xiàn)互通呢？別急，看看這里先
里面有方法教你怎么去模擬一個(gè)接口數(shù)據(jù)并訪問(wèn)，其他接口也可以這樣寫，以此類推。
個(gè)人理解有個(gè)文件很重要，它就是build目錄中的webpack.dev.conf.js文件，主要用于開(kāi)發(fā)環(huán)境下的所有配置，因此如果只是開(kāi)發(fā)環(huán)境下，后臺(tái)訪問(wèn)和配置相關(guān)都可以寫到這個(gè)文件中。
8、測(cè)試調(diào)試，經(jīng)過(guò)漫長(zhǎng)的開(kāi)發(fā)和排坑，終于有一定的成效啦！
四、發(fā)布部署，前端后端，傻傻分不清
在項(xiàng)目測(cè)試沒(méi)問(wèn)題需要發(fā)布的時(shí)候，遇到了一個(gè)問(wèn)題，由于發(fā)布需要使用npm run build，文件打包好上傳到服務(wù)器后所有接口會(huì)報(bào)錯(cuò)，無(wú)法正常訪問(wèn)，天啊擼，難道之前做的都是白做的么？后來(lái)才發(fā)現(xiàn)，Vue-Cli主要還是用于渲染頁(yè)面的，無(wú)法承載搭建后端服務(wù)接口，因此之前才會(huì)說(shuō)只能在開(kāi)發(fā)環(huán)境下使用。
相信很多新手都會(huì)遇到這個(gè)問(wèn)題，前端后端會(huì)傻傻分不清，當(dāng)需要前后端分離的時(shí)候，那么如何解決這個(gè)問(wèn)題呢？
這個(gè)時(shí)候就可以就需要用到express啦，它是基于Node.js 平臺(tái)的極簡(jiǎn)、靈活的 web 應(yīng)用開(kāi)發(fā)框架。而我只是需要搭建一個(gè)接口服務(wù)，簡(jiǎn)單幾行代碼就可以搭建服務(wù)了，so easy??！
于是乎新建了一個(gè)項(xiàng)目作為服務(wù)端，將百度AI的項(xiàng)目獨(dú)立出來(lái)，并建立server.js，把之前寫好的方法copy過(guò)來(lái)即可，如圖：
五、快點(diǎn)入坑吧
總結(jié)來(lái)說(shuō)這個(gè)項(xiàng)目期間還是經(jīng)歷了好多次的糾結(jié)，有些問(wèn)題報(bào)錯(cuò)略感奇葩了，但是不解決又覺(jué)得不舒服，只能入坑越入越深，如果你也想試試歡迎加入，坑坑更健康。
比如會(huì)出現(xiàn)跨域的問(wèn)題，因?yàn)槭乔昂蠖朔蛛x，所以會(huì)出現(xiàn)端口號(hào)或者地址不一樣情況，這樣就會(huì)出現(xiàn)跨域。解決方法就是驗(yàn)證跨域CORS問(wèn)題，在server.js文件中設(shè)置跨域的訪問(wèn)即可，如圖：
六、效果演示
1、信息錄入地址（上傳一張自拍喲）：歡迎進(jìn)入（進(jìn)不了可復(fù)制鏈接：https://www.lejuhb.com/myface/#/main?）
2、人臉識(shí)別地址：歡迎進(jìn)入（進(jìn)不了可復(fù)制鏈接：https://www.lejuhb.com/myface/）
注意：必須使用攝像頭和最新谷歌瀏覽器，如果第一次無(wú)法識(shí)別，請(qǐng)點(diǎn)擊瀏覽器右上角小圖標(biāo)，點(diǎn)擊加載不安全的腳本完成，如圖：
