js实现浏览器刷脸支付

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();

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(fullFaceDescr...

点击查看剩余70%