最近在浏览百度云平台人工智能相关产品时，萌生了做一个网页人脸识别登录的demo。以下是前端代码：实现在浏览器调用摄像头，捕捉图片后上传到服务器验证。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>sliyCode_yi</title><script src="/jquery/2.1.4/jquery.min.js"></script><style>body {margin: 0;padding: 0;height: 100%;overflow: hidden;}img {filter: blur(5px);}.img_box {position: fixed;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 300px;height: 300px;box-shadow: 0 0 30px #02a2d2;}.find_people {position: absolute;bottom: -80px;width: 300px;text-align: center;font-weight: 600;font-size: 20px;color: skyblue;}</style></head><body><img src="./bg.jpg" alt="" width="100%" height="auto"><div class="img_box"><canvas id="canvas" width="300" height="300"></canvas><p class="find_people">人脸识别登录</p></div><script>var video = document.createElement('video'),canvas = document.getElementById('canvas'),snap = document.getElementById('tack'),down = document.getElementById('down'),img = document.getElementById('img'),timer = null,vendorUrl = window.URL || window.webkitURL;var context = canvas.getContext("2d");video.width = 300;video.height = 300;//媒体对象navigator.getMedia = navigator.getUserMedia ||navagator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia;navigator.getMedia({video: true, //使用摄像头对象audio: false //不适用音频}, function(strem){//这个方法要报错：video.src = window.URL.createObjectURL(strem);video.srcObject = strem;video.onloadedmetadata = function(e) {video.play();timer = setInterval(() => {context.drawImage(video, 0, 0, canvas.width, canvas.height)}, 16);};canvas.onclick = function(){clearInterval(timer);canvas.toBlob(function(blob){var formdata = new FormData;let fileBlob = new File([blob], new Date().getTime() + '.png')formdata.append("file",fileBlob);$.ajax({url: "/facegoole",type: "post",data: formdata,processData: false,contentType: false,success: function(data){if(data.status == 0 && !!JSON.parse(data.data)['result'] && JSON.parse(data.data)['result']['user_list'][0]['score']>60){alert("登录成功");}else{alert("登录失败");}},error: function(err){console.log(err,2);}})},"image/jpeg",1)}}, function(error) {console.log(error);})</script></body></html>
以下是node版后端代码
实现接收前端传来的图片并保存到本地。验证图片与百度云平台人脸库中图片的相似度，并返回到前端。
var fileName = "";var request = require("request");var fs = require("fs");var path = require("path");//图片上传let storage = multer.diskStorage({//存储目录destination: function(req, file, cb){cb(null, path.join(__dirname,"../public/images"));},//文件名filename: function(req, file, cb){fileName = Date.now() +file.originalname.match(/(\.(jpe?g|png|gif|webp|JPG|psd))$/)[0];cb(null, fileName)}});router.post("/facegoole",function(req, res, next){fileName = "";upload(req, res, function(err){if(err instanceof multer.MulterError){//发生错误res.json({status: 1, message: "出现错误"});return;}else if(err){//发生错误res.json({status: 1, message: "出现错误"});return;}var image = fs.readFileSync(path.join(__dirname,`../public/images/${fileName}`));var base64Img = Buffer(image).toString("base64");const Url = "/rest/2.0/face/v3/search?access_token=**************************";//access_token需自己生成，见后续代码var Res = res;request.post({url: Url,headers: {"Content-Type": "application/json",},form: {image: base64Img,image_type: "BASE64",group_id_list: "unity_1"}},function(err,res,body){if(err){Res.json({status: 1,message: "操作失败"});return;}else{Res.json({status: 0, img: fileName,data:body});return;}})})})
生成access_token代码node版
//获取access_tokenvar https = require("https");var qs = require("querystring");const param = qs.stringify({"grant_type": "client_credentials",'client_id': "填写百度云平台上自己创建应用的client_id","client_secret": "填写百度云平台上自己创建应用的client_secret"})https.get({hostname: "",path: "/oauth/2.0/token?"+param,agent: false },function(res){res.pipe(process.stdout);})
以下是效果图
