前言【SpringBoot实现人脸识别功能】去年在公司参与了一个某某机场建设智能机场的一个项目，人脸登机是其中的一个功能模块，当时只是写了后台的接口，调用人脸识别设备的api，给闸机回传数据信号，以保障该功能的正常使用 。
当时因为项目进度紧张，手里还有其他项目赶进度，也就没时间去分享这个功能的实现 。前几天刷脸进公司大楼的时候，突然想起来应该写一个功能类似的demo分享个人的一些小小的经验 。在当时项目中刷脸的设备终端是采购某某AI公司，当然咱们在demo里面也不可能买一台那东西来瞎搞，于是乎就拿系统刷脸登录来练练手，人脸识别解决方案就用百度云的吧，当然腾讯、阿里这方面也很牛逼的 。
需求分析一、人脸注册step1：人像采集 。在注册页面上用html中video组件和js调用笔记本摄像头，并抓取人像图片 。没有摄像头的笔记本、台式机的童鞋告辞吧，走好不送 。。。
step2：人像上传至项目文件夹 。将在页面采集到的人像数据转换成bash64字符传输到web后台，在后台将bash64转换成图片上传至项目文件夹 。
step3：将用户的注册信息写入数据库，用户的照片使用路径存储 。
step4：将采集到的人像信息（bash64）上传至百度云的人脸识别云端服务器 。ps这块实现也可离线私有化处理方案，有兴趣的童鞋可自行研究 。
二、人脸登录step1：人像采集 。在登录页面上用html中video组件和js调用笔记本摄像头，并抓取人像图片 。
step2：人像数据传输 。抓取的人脸图片信息回传至web后台 。
step3：人像比对 。在web后台实例化并调用百度云人脸识别的sdk，将登录页面采集到的图像数据和注册的图像信息相比对（这块是百度云人脸识别解决方案实现的，也是最牛B的地方），返回的比分大于95分即可实现登录 。
具体实现好了，前言和需求分析也哔哔了这么久了，接下来是实现和上代码了 。
一、人脸注册前端页面代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title> <style type="text/css">/**解决浏览器兼容性问题**/*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}/**/body{background: url(img/bg03.jpg) no-repeat center;}h1{color: #fff;text-align: center;line-height: 80px;}.media{width: 534px;height: 400px;margin: 40px auto 0;}#register{width: 200px;height:50px;background-color: #2196f3; margin: 60px auto 0;text-align: center;line-height: 50px;color: #fff;border-radius: 10px;}#canvas{display: none;}#shuru{width: 200px;height:50px;background-color: #2196f3; margin: 20px auto 0;} </style></head><body> <h1>百度云人脸注册</h1> <div id="shuru"> 用户名： <input type="text" name="username" id="username"/> </div><div class="media"><video id="video" width="450" height="300" src="" autoplay></video><canvas id="canvas" width="450" height="300"></canvas></div> <button id="register" >确定注册</button> <script type="text/JAVAscript" src="js/jquery-3.3.1.js"></script> <script type="text/JavaScript"> /**调用摄像头，获取媒体视频流**/ var video = document.getElementById('video'); //返回画布二维画图环境 var userContext = canvas.getContext("2d"); var getUserMedia =//浏览器兼容,表示在火狐、google、IE等浏览器都可正常支持(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)//getUserMedia.call(要调用的对象，约束条件，调用成功的函数，调用失败的函数)getUserMedia.call(navigator,{video: true,audio: false},function(localMediaStream){//获取摄像头捕捉的视频流video.srcObject=localMediaStream;},function(e){console.log("获取摄像头失败！！")}); //点击按钮注册事件var btn = document.getElementById("register");btn.onclick = function () {var username = $("#username").val();alert($("#username").val());if(username != null){//点击按钮时拿到登陆者面部信息userContext.drawImage(video,0,0,450,300);var userImgSrc = document.getElementById("canvas").toDataURL("img/png");//拿到bash64格式的照片信息var faceBase = userImgSrc.split(",")[1];//ajax异步请求$.ajax({url: "register",type: "post",data: {"faceBase": faceBase,"userName": username},success: function(result){if(result === '1'){alert("注册成功！！，点击确认跳转至登录页面");window.location.href="toLogin";}else if(result === '2'){alert("您已经注册过啦！！");}else{alert("系统错误！！");}}})}else{alert("用户名不能为空");}}</script></body></html>
推荐阅读
- 在电视上看现场直播是如何实现的？
- 如何鼓励孩子实现自己的梦想?怎么引导孩子树立梦想
- 形容梦想的诗句或名言?描写实现梦想的诗句
- Python神级操作，简单百行代码轻松实现通讯功能！
- 怎样做才能拥有财富?快速实现财富的方法
- 张良复兴韩国的理想为什么没能实现?韩国张让与张良的关系_1
- 晒红茶制作步骤,晒红茶图片大全
- 何必再苦苦折磨？一招实现你的母亲梦
- 红茶绿茶理条机,红茶针型茶
- 荣耀|网友称OS Turbo技术让酷睿i5实现i7性能 赵明回应