Nodejs开发人脸识别系统-教你实现高大上的人工智能

一、缘起缘生

前段时间有个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、信息录入地址（上传一张自拍哟）：欢迎进入（进不了可复制链接：https://www.lejuhb.com/myface/#/main ）

2、人脸识别地址：欢迎进入（进不了可复制链接：https://www.lejuhb.com/myface/）

注意：必须使用摄像头和最新谷歌浏览器，如果第一次无法识别，请点击浏览器右上角小图标，点击加载不安全的脚本完成，如图：

其实这也是个坑

页面真的很简单吧！