Fatal编程技术网
  • javascript/
  • Javascript 如何在使用face api检测到用户满意和人脸时拍摄图像

Javascript 如何在使用face api检测到用户满意和人脸时拍摄图像

javascript jquery

Javascript 如何在使用face api检测到用户满意和人脸时拍摄图像,javascript,jquery,face-detection,face-api,Javascript,Jquery,Face Detection,Face Api,我正在使用FaceAPI库 当face api识别face超过0.5且用户满意程度超过0.6时，我试图从视频中获取照片。我知道如何使用FaceAPI获取这些信息，但不知道如何在没有用户交互的情况下获取照片并将其放入img元素（图像的base64格式） 以下是我目前拥有的代码示例： <body> <video id="video" width="720" height="560" autoplay muted></video> <div id="scree

我正在使用FaceAPI库

当face api识别face超过0.5且用户满意程度超过0.6时，我试图从视频中获取照片。我知道如何使用FaceAPI获取这些信息，但不知道如何在没有用户交互的情况下获取照片并将其放入img元素（图像的base64格式）

以下是我目前拥有的代码示例：

<body>
<video id="video" width="720" height="560" 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>


const video=document.getElementById（'video'））
我保证([
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”）
]).然后（startVideo）
函数startVideo（）{
navigator.getUserMedia(
{视频：{}}，
stream=>video.srcObject=stream，
err=>console.error（err）
)
}
video.addEventListener（'play'，（）=>{
const canvas=faceapi.createCanvasFromMedia（视频）
document.body.append（画布）
const displaySize={width:video.width，height:video.height}
faceapi.matchDimensions（画布、显示大小）
setInterval（异步（）=>{
const detections=等待faceapi.detectAllFaces（视频，new faceapi.TinyFaceDetectorOptions（））.withFaceLandmarks（）.withFaceExpressions（）
const resizedDetections=faceapi.resizeResults（检测，显示大小）
canvas.getContext（'2d'）.drawImage（video，0，0，video.videoWidth，video.videoHeight）；
如果（resizedDetections.length>0&&resizedDetections[0]。detection.score>0.7&&resizedDetections[0]。expressions.happy>0.5）{
//在这里，我需要从照片的图像
}
}, 100)
})
有人能帮我做那部分吗

您可以找到它的html版本：

我找到了这个问题的解决方案。我想有人会用它或者帮助他解决一些问题或者完成项目：）如果有人用它，我会很高兴

在您希望存储图像的表单中添加id为
屏幕截图的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)
            }


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