face-api.js
face-api.js github 地址
介绍:它是用于在浏览器和 nodejs 中进行人脸检测和识别的 JavaScript API。提供了以下任务的预训练模型:人脸标志检测、人脸识别、年龄估计和性别识别。(face landmark detection, face recognition, age estimation, and gender recognition.)
实时人脸情绪识别 html代码
参考项目 github Face-Detection-JavaScript
创建一个models文件夹,然后放下载的模型就可以。模型下载 github 地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Real Time Face Expression Recognition</title>
<style> body {
margin: 0; padding: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } canvas {
position: absolute; } </style>
</head>
<body>
<video id="video" width="720" height="560" autoplay muted></video>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/face-api.min.js"></script>
<script> const video = document.getElementById("video"); Promise.all([ faceapi.nets.tinyFaceDetector.loadFromUri("/models"), faceapi.nets.faceLandmark68Net.loadFromUri("/models"), faceapi.nets.faceRecognitionNet.loadFromUri("/models"), faceapi.nets.faceExpressionNet.loadFromUri("/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").clearRect(0, 0, canvas.width, canvas.height); faceapi.draw.drawDetections(canvas, resizedDetections); faceapi.draw.drawFaceLandmarks(canvas, resizedDetections); faceapi.draw.drawFaceExpressions(canvas, resizedDetections); }, 100); }); </script>
</body>
</html>
浏览器运行
效果
我就不放自己的了。。
Be like:
文章评论