Как сделать снимок (ы), когда пользователь доволен и лицо распознано с помощью face-api - PullRequest
Новая
       169

Как сделать снимок (ы), когда пользователь доволен и лицо распознано с помощью face-api

3 голосов
/ 06 января 2020

Я использую библиотеку 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 версию этого здесь :

1 Ответ

1 голос
/ 07 января 2020

Я нахожу решение этой проблемы. Я думаю, что кто-то воспользуется им или поможет ему решить какую-то проблему или завершить проект :) Я буду рад, если кто-нибудь воспользуется им.

Добавьте div с идентификатором screenshot в форму, где вы хотите хранить изображения и добавьте этот код: 

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

это добавит изображение в вашу форму, чтобы вы могли использовать его для отправки его на серверную часть проекта.

...