gpt4 book ai didi

javascript - 当用户高兴并且使用face-api检测到面部时如何拍摄图像

转载 作者:行者123 更新时间:2023-12-01 01:31:02 28 4
gpt4 key购买 nike

我正在使用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 :

最佳答案

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

在您想要存储图像的表单中添加带有 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)
}

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

关于javascript - 当用户高兴并且使用face-api检测到面部时如何拍摄图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59604209/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com