js实现浏览器刷脸支付
现在支付宝的刷脸支付开始大面积推广,超时的收银台都配备了支付宝的刷脸支付,手机app端都开始支持刷脸支付。
那么刷脸支付的流程是这样的呢?
通过摄像头实时捕获到用户的视频画面传输到云端进行身份识别,然后检测该身份有没有账号,有的话就检测余额或信用额度,如果够的话就直接扣除,交易完成,当然这中间可以设置用户输入密码,对于小额的支付,为了用户体验,一般都是直接免密支付。
那么js可不可以实现这样一个刷脸的支付程序呢,能,但是为了安全,js的代码只能运行在商户的电子设备上。
今天我们使用face-api来实现一个摄像头捕获用户视频并且识别身份的过程,刷脸支付的前提是用户的照片信息已经存储在电脑上,这个后期可以放在服务器上存储,为了简单实现刷脸支付的流程,我们这里就不进行活体检测了。
一、准备客户的照片
准备客户的照片
二、编写js
1、加载模型
$("#status").html("模型加载中,请稍后"); await faceapi.nets.ssdMobilenetv1.loadFromUri('models'); await faceapi.nets.faceLandmark68Net.loadFromUri('models'); await faceapi.nets.faceRecognitionNet.loadFromUri('models'); $("#status").html("模型加载完毕,请上传参考图"); $("#step-one").show();本次用到了ssdMobilenetv1、faceLandmark68Net、faceRecognitionNet三个模型
2、编写参考人物图像facematch
const inputImgEl = $('#refImg').get(0) const canvas = $('#refImgOverlay').get(0) const optionss = new faceapi.SsdMobilenetv1Options({ minConfidence }) const fullFaceDescriptions = await faceapi .detectAllFaces(inputImgEl, optionss) .withFaceLandmarks() .withFaceDescriptors() if (!fullFaceDescriptions.length) { return } // create FaceMatcher with automatically assigned labels // from the detection results for the reference image faceMatcher = new faceapi.FaceMatcher(fullFaceDescriptions) faceapi.matchDimensions(canvas, inputImgEl) // resize detection and landmarks in case displayed image is smaller than // original size const resizedResults = faceapi.resizeResults(fullFaceDescriptions, inputImgEl) // draw boxes with the corresponding label as text const labels = faceMatcher.labeledDescriptors .map(ld => ld.label) resizedResults.forEach(({ detection, descriptor }) => { $("#step-two").show(); $("#status").html("参考图识别成功,请打开摄像头进行支付识别"); const label = faceMatcher.findBestMatch(descriptor).toString() const options = { label } const drawBox = new faceapi.draw.DrawBox(detection.box, options) drawBox.draw(canvas) })3、打开摄像头识别
<script> const videoEl = $('#inputVideo').get(0) if (videoEl.paused || videoEl.ended) return setTimeout(() => onPlay()) if (!faceMatcher) { return } const optionss = new faceapi.SsdMobilenetv1Options({ minConfidence }) // const inputImgEl = $('#queryImg').get(0) // const canvas = $('#Overlay').get(0) const ts = Date.now() const results = await faceapi.detectAllFaces(videoEl, optionss) .withFaceLandmarks().withFaceDescriptors() //faceapi.matchDimensions(canvas, inputImgEl) updateTimeStats(Date.now() - ts) if (results) { const canvas = $('#overlay').get(0) const dims = faceapi.matchDimensions(canvas, videoEl, true) const resizedResult = faceapi.resizeResults(results, dims) if (withBoxes) { resizedResult.forEach(({ detection, descriptor }) => { const label = faceMatcher.findBestMatch(descriptor).toString() console.log(faceMatcher.findBestMatch(descriptor).label); const options = { label } if (faceMatcher.findBestMatch(descriptor).label == 'unknown') { $("#status").html("识别错误,不是参考图本人"); } else { //调用支付接口 $("#status").html("刷脸支付成功"); } const drawBox = new faceapi.draw.DrawBox(detection.box, options) drawBox.draw(canvas) }) } const { age, gender, genderProbability } = resizedResult // interpolate gender predictions over last 30 frames // to make the displayed age more stable const interpolatedAge = interpolateAgePredictions(age) new faceapi.draw.DrawTextField( [ `${faceapi.round(interpolatedAge, 0)} 岁`, `${gender} (${faceapi.round(genderProbability)})` ], //results.detection.box.bottomLeft ).draw(canvas) } setTimeout(() => onPlay()) </script>
项目webide地址:http://editor.bfw.wiki/Editor/Open.html?projectid=15731252228909890037&file=facepay.html
点击左上角预览-新窗口预览或手机预览
网友评论0