如何在用户开心并使用 face-api 检测到人脸时拍摄图像

Posted

技术标签:

【中文标题】如何在用户开心并使用 face-api 检测到人脸时拍摄图像【英文标题】:How to take image(s) when user happy and face detected using face-api 【发布时间】:2020-04-23 12:44:34 【问题描述】:

我正在使用 face-api 库。 https://github.com/justadudewhohacks/face-api.js

当 face-api 识别人脸超过 0.5 并且用户快乐超过 0.6 时,我试图从视频中获取照片。我知道如何使用 face-api 获取该信息,但不知道如何在没有用户交互的情况下获取照片并将其放入一些 img 元素(图像的 base64 格式)。

这是我到目前为止所拥有的代码示例:

<body>
<video id="video"   autoplay muted></video>
<div id="screenshot">
    <img src="" style="display: none">
<script>
const video = document.getElementById('video')

Promise.all([
    faceapi.nets.tinyFaceDetector.loadFromUri('/face-api/models'),
    faceapi.nets.faceLandmark68Net.loadFromUri('/face-api/models'),
    faceapi.nets.faceRecognitionNet.loadFromUri('/face-api/models'),
    faceapi.nets.faceExpressionNet.loadFromUri('/face-api/models')
]).then(startVideo)

function startVideo() 
    navigator.getUserMedia(
        video: ,
        stream => video.srcObject = stream,
        err => console.error(err)
    )


video.addEventListener('play', () => 
    const canvas = faceapi.createCanvasFromMedia(video)
    document.body.append(canvas)
    const displaySize = width: video.width, height: video.height
    faceapi.matchDimensions(canvas, displaySize)
    setInterval(async () => 
        const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
        const resizedDetections = faceapi.resizeResults(detections, displaySize)
        canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
        if (resizedDetections.length > 0 && resizedDetections[0].detection.score > 0.7 && resizedDetections[0].expressions.happy > 0.5) 
//HERE I NEED TO TAKE IMAGE FROM PHOTO
            
        , 100)
    )
    </script>

有人可以帮我做这部分吗?

你可以找到它的html版本here:

【问题讨论】:

【参考方案1】:

我找到了解决这个问题的方法。我认为有人会使用它或帮助他解决一些问题或完成项目:) 如果有人使用它,我会很高兴。

在您希望存储图像的表单中添加 id 为 screenshot 的 div 并添加此代码:

 if (resizedDetections.length > 0 && resizedDetections[0].detection.score > 0.7 && resizedDetections[0].expressions.happy > 0.5) 
const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);

    const img = document.createElement("img");
    img.src = canvas.toDataURL('image/webp');

    document.getElementById('screenshot').appendChild(img)
            

这将在您的表单上添加一个图像,以便您可以使用它来将其发送到项目的服务器端部分。

【讨论】:

以上是关于如何在用户开心并使用 face-api 检测到人脸时拍摄图像的主要内容,如果未能解决你的问题,请参考以下文章

使用 face-api.js 进行人脸检测后,有啥方法可以自动裁剪人脸?

教程 | face-api.js:在浏览器中进行人脸识别的JavaScript接口

仅捕获检测到的人脸正方形 JS

如何将库导入 React.js 中的网络工作者?

前端人脸识别--两张脸相似度

face-api.js with Vue.js and Electron