faceapi在浏览器中人脸识别是否为同一个人(示例)

faceapi在浏览器中人脸识别是否为同一个人(示例)

faceapi在浏览器中人脸识别是否为同一个人(示例)

人工智能从最初的python到后来的js端,跨越了语言的障碍,在人脸识别领域,faceapi做得是比较细的,他能够在浏览器上从摄像头、视频、图片中识别人脸轮廓,识别人物的心情及年龄性别,是不是很强大,直接在浏览器上就能开发人工智能应用

下面我们用faceapi做个试验

就是人脸比对,看相似的可能性

我们今天使用bfwone的动态加载库的方式进行

首先引入bfwone,并动态加载我们的依赖项faceapi.js

然后我们在依赖库加载完后,加载我们今天识别人物相似性的模型库

await faceapi.nets.ssdMobilenetv1.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models');
await faceapi.nets.faceLandmark68Net.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models');
await faceapi.nets.faceRecognitionNet.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models');

加载模型库需要一段时间,根据你的网络情况而定

加载完后我们先将其中一张照片作为参照,创建人脸识别描述匹配对象

 const results = await faceapi
                .detectAllFaces(referinput)
                .withFaceLandmarks()
                .withFaceDescriptors()
                console.log(results);
                if (!results.length) {
                    return
                }
const faceMatcher = new faceapi.FaceMatcher(results)

好了,接下来对第二张图片进行识别,获得的人脸描述对象

进行一个对别,就可以看到不是同一个人的几率了

完整代码如下,可点击代码右上角直接在线编辑运行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=face-api&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {

            const referinput = document.getElementById('referimg');
            const queryinput = document.getElementById('queryimg');
             const status = document.getElementById('status');
            var  init = async function() {

                await faceapi.nets.ssdMobilenetv1.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models');
                await faceapi.nets.faceLandmark68Net.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models');
                await faceapi.nets.faceRecognitionNet.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models');
                console.log("load model complete");
                status.innerHTML="模型加载完毕,开始识别";
                

                // await faceapi.nets.faceRecognitionNet.loadFromUri('/bfwrepo/model');
                const results = await faceapi
                .detectAllFaces(referinput)
                .withFaceLandmarks()
                .withFaceDescriptors()
                console.log(results);
                if (!results.length) {
                    return
                }
                const faceMatcher = new faceapi.FaceMatcher(results)


                const singleResult = await faceapi
                .detectSingleFace(queryinput)
                .withFaceLandmarks().withFaceDescriptor();
                console.log(singleResult);

                if (singleResult) {
                    const bestMatch = faceMatcher.findBestMatch(singleResult.descriptor)
 console.log(bestMatch);
                    document.getElementById('result').innerHTML = bestMatch._distance.toString()+"%";
                    console.log(bestMatch.toString())
                }
            }
            init();
        });

    </script>
</head>
<body>
    <img id="referimg" src="/bfwrepo/image/faceapi/1.png" />
    <img id="queryimg" src="/bfwrepo/image/faceapi/2.png" />
     <div id="status">
       模型加载中,请稍后
    </div>
    <div>
        不是同一个人的几率是<span id="result"></span>
    </div>
    <canvas id="myCanvas" />
</body>
</html>

下一篇我们介绍一个年纪及性别识别


{{collectdata}}

网友评论0

阿里云香港主机,免备案大优惠 打开浏览器开发html,体验云开发的乐趣bfweditor 打开浏览器即可开发php,bfwstudio
其他文章