一、缘起缘生
前段时间有个H5很火，上传个头像就可以显示自己穿军装的样子，无意中看到了一篇帖子叫 全民刷军装背后的AI技术及简单实现 ，里面提到了百度AI，我自己也试了一下下，效果就酱紫。
当然这个东西并不实用，只是纯粹娱乐而已，但是本人想是否可以通过这个技术，实现那种人脸识别验证，来验证如会议刷脸签到、网站刷脸登录这种高大上的技术。于是说干就干，花了将近一周时间完成了一个初步的DEMO。
二、技术储备
要实现这个系统，本人认为需要涉及到以下技术知识点，这些都是需要提前学习和积累的：
1、Nodejs
2、Express（基于后端开发）
3、Vue-Cli（基于前端开发，Vue的脚手架，没明白为啥叫脚手架o(╯□╰)o ）
4、百度AI人脸识别SDK，点击学习地址
不得不说百度AI在人工智能方面确实比其他几个大佬做的厚道，接口全面开放，而且还是免费，人家估计都在起步阶段，而百度已经甩了好几条街。。。
在网上学习了一些资料，尤其是仔细分析了百度SDK以后，接下来就开始开发啦。
三、开发步骤
1、搭建vue-cli脚手架，主要用于快速搭建一个网站，安装方法
2、在router目录中配置index.js页面路由，方便多个页面之间交互，如图：
设置了两个页面
3、新建两个页面到pages目录，其中Home是主页面，用于展示人脸识别；Main为输入页面，用于录入人员信息。
4、导入百度AI的SDK，都放在src目录中，太多了自己看吧，官方文档中有说明
5、制作Home页面，原理主要是设置了一个getVideo方法 开启摄像头 （前提是你的电脑需要有设备），然后通过takePhoto方法获得当前视频中的一帧图片，打印到canvas中（canvas支持打印绘画、图片、视频）。
DOM结构
getVideo方法
6、制作Main页面，这个页面就比较简单啦，只设置了两个输入框和一个上传图片按钮，先凑合着用吧。主要用于人员信息录入，需要先将人员相关信息建立档案，否则无法识别。
7、说了这么一堆，都是前端的东西，那么怎么和 后端实现互通 呢？别急，看看这里先
里面有方法教你怎么去模拟一个接口数据并访问，其他接口也可以这样写，以此类推。
个人理解有个文件很重要，它就是build目录中的webpack.dev.conf.js文件，主要用于开发环境下的所有配置，因此如果 只是开发环境 下，后台访问和配置相关都可以写到这个文件中。
一个接口成型
8、测试调试，经过漫长的开发和排坑，终于有一定的成效啦！
四、发布部署，前端后端，傻傻分不清
在项目测试没问题需要发布的时候，遇到了一个问题，由于发布需要使用npm run build，文件打包好上传到服务器后 所有接口会报错 ，无法正常访问，天啊撸，难道之前做的都是白做的么？后来才发现，Vue-Cli主要还是用于渲染页面的，无法承载搭建后端服务接口，因此之前才会说只能在开发环境下使用。
相信很多新手都会遇到这个问题，前端后端会傻傻分不清，当需要前后端分离的时候，那么如何解决这个问题呢？
这个时候就可以就需要用到express啦，它是基于Node.js 平台的极简、灵活的 web 应用开发框架。而我只是需要搭建一个接口服务，简单几行代码就可以搭建服务了，so easy！！
于是乎新建了一个项目作为服务端，将百度AI的项目独立出来，并建立server.js，把之前写好的方法copy过来即可，如图：
五、快点入坑吧
总结来说这个项目期间还是经历了好多次的纠结，有些问题报错略感奇葩了，但是不解决又觉得不舒服，只能入坑越入越深，如果你也想试试欢迎加入，坑坑更健康。
比如会出现跨域的问题，因为是前后端分离，所以会出现端口号或者地址不一样情况，这样就会出现跨域。解决方法就是验证跨域CORS问题，在server.js文件中设置跨域的访问即可，如图：
六、效果演示
1、信息录入地址（上传一张自拍哟）
2、人脸识别地址：欢迎进入
注意：必须使用 摄像头和 最新谷歌浏览器 ，如果第一次无法识别，请点击浏览器右上角小图标，点击 加载不安全的脚本完成
页面真的很简单吧！
