神刀安全网

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

一、缘起缘生

前段时间有个H5很火,上传个头像就可以显示自己穿军装的样子,无意中看到了一篇帖子叫全民刷军装背后的AI技术及简单实现,里面提到了百度AI,我自己也试了一下下,效果就酱紫。

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

当然这个东西并不实用,只是纯粹娱乐而已,但是本人想是否可以通过这个技术,实现那种人脸识别验证,来验证如会议刷脸签到、网站刷脸登录这种高大上的技术。于是说干就干,花了将近一周时间完成了一个初步的DEMO。


二、技术储备

要实现这个系统,本人认为需要涉及到以下技术知识点,这些都是需要提前学习和积累的:

1、Nodejs

2、Express(基于后端开发)

3、Vue-Cli(基于前端开发,Vue的脚手架,没明白为啥叫脚手架o(╯□╰)o )

4、百度AI人脸识别SDK,点击学习地址

不得不说百度AI在人工智能方面确实比其他几个大佬做的厚道,接口全面开放,而且还是免费,人家估计都在起步阶段,而百度已经甩了好几条街。。。

在网上学习了一些资料,尤其是仔细分析了百度SDK以后,接下来就开始开发啦。


三、开发步骤

1、搭建vue-cli脚手架,主要用于快速搭建一个网站,安装方法

2、在router目录中配置index.js页面路由,方便多个页面之间交互,如图:

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

设置了两个页面

3、新建两个页面到pages目录,其中Home是主页面,用于展示人脸识别;Main为输入页面,用于录入人员信息。

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

4、导入百度AI的SDK,都放在src目录中,太多了自己看吧,官方文档中有说明

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

5、制作Home页面,原理主要是设置了一个getVideo方法开启摄像头(前提是你的电脑需要有设备),然后通过takePhoto方法获得当前视频中的一帧图片,打印到canvas中(canvas支持打印绘画、图片、视频)。

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

DOM结构

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

getVideo方法

6、制作Main页面,这个页面就比较简单啦,只设置了两个输入框和一个上传图片按钮,先凑合着用吧。主要用于人员信息录入,需要先将人员相关信息建立档案,否则无法识别。

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

7、说了这么一堆,都是前端的东西,那么怎么和后端实现互通呢?别急,看看这里先

里面有方法教你怎么去模拟一个接口数据并访问,其他接口也可以这样写,以此类推。

个人理解有个文件很重要,它就是build目录中的webpack.dev.conf.js文件,主要用于开发环境下的所有配置,因此如果只是开发环境下,后台访问和配置相关都可以写到这个文件中。

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

一个接口成型

8、测试调试,经过漫长的开发和排坑,终于有一定的成效啦!

四、发布部署,前端后端,傻傻分不清

在项目测试没问题需要发布的时候,遇到了一个问题,由于发布需要使用npm run build,文件打包好上传到服务器后所有接口会报错,无法正常访问,天啊撸,难道之前做的都是白做的么?后来才发现,Vue-Cli主要还是用于渲染页面的,无法承载搭建后端服务接口,因此之前才会说只能在开发环境下使用。

相信很多新手都会遇到这个问题,前端后端会傻傻分不清,当需要前后端分离的时候,那么如何解决这个问题呢?

这个时候就可以就需要用到express啦,它是基于Node.js 平台的极简、灵活的 web 应用开发框架。而我只是需要搭建一个接口服务,简单几行代码就可以搭建服务了,so easy!!

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

于是乎新建了一个项目作为服务端,将百度AI的项目独立出来,并建立server.js,把之前写好的方法copy过来即可,如图:

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

五、快点入坑吧

总结来说这个项目期间还是经历了好多次的纠结,有些问题报错略感奇葩了,但是不解决又觉得不舒服,只能入坑越入越深,如果你也想试试欢迎加入,坑坑更健康。

比如会出现跨域的问题,因为是前后端分离,所以会出现端口号或者地址不一样情况,这样就会出现跨域。解决方法就是验证跨域CORS问题,在server.js文件中设置跨域的访问即可,如图:

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


六、效果演示

1、信息录入地址(上传一张自拍哟):欢迎进入(进不了可复制链接:https://www.lejuhb.com/myface/#/main )

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

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

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

其实这也是个坑

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

页面真的很简单吧!

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

效果不错,就不上镜了哈哈哈

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Nodejs开发人脸识别系统-教你实现高大上的人工智能

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址