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

<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

点击左上角预览-新窗口预览或手机预览