文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用face-api在用户高兴和人脸检测时拍摄图像

问如何使用face-api在用户高兴和人脸检测时拍摄图像
EN

Stack Overflow用户

提问于 2020-01-06 05:08:43

回答 1查看 563关注 0票数 3

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

我试图从视频中获取一张照片，当face-api识别出的人脸超过0.5，而用户的幸福感超过0.6。我发现了如何使用face-api获取这些信息，但不知道如何在没有用户交互的情况下获取照片并将其放入一些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>

有人能帮我解决这个问题吗？

您可以找到它的html版本的here

javascript

jquery

face-detection

face-api

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-08 04:53:42

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

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59604209

复制

相似问题

问如何使用face-api在用户高兴和人脸检测时拍摄图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用face-api在用户高兴和人脸检测时拍摄图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用face-api在用户高兴和人脸检测时拍摄图像
EN