SmileToUnlock 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00953/article/details/141584606

SmileToUnlock 开源项目教程

SmileToUnlockThis library uses ARKit Face Tracking in order to catch user's smile.项目地址:https://gitcode.com/gh_mirrors/smi/SmileToUnlock

1. 项目的目录结构及介绍

SmileToUnlock/
├── README.md
├── LICENSE
├── index.html
├── css/
│   └── style.css
├── js/
│   ├── face-api.min.js
│   └── script.js
└── images/
    └── smile.png

README.md: 项目说明文件，包含项目的基本信息和使用说明。
LICENSE: 项目的开源许可证。
index.html: 项目的主页面文件。
css/: 存放项目的样式文件。
- style.css: 主要的样式文件。
js/: 存放项目的JavaScript文件。
- face-api.min.js: 用于面部识别的库文件。
- script.js: 项目的主要脚本文件。
images/: 存放项目的图片资源。
- smile.png: 示例图片。

2. 项目的启动文件介绍

项目的启动文件是 index.html。这个文件包含了页面的基本结构和引用到的CSS和JavaScript文件。用户可以通过打开这个文件来启动项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile To Unlock</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="videoContainer">
        <video id="video" width="720" height="560" autoplay muted></video>
    </div>
    <canvas id="canvas" width="720" height="560" style="display:none;"></canvas>
    <div id="smileMessage">Smile to unlock!</div>

    <script src="js/face-api.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

3. 项目的配置文件介绍

项目中主要的配置文件是 js/script.js。这个文件包含了项目的逻辑和面部识别的配置。

// 加载面部识别模型
Promise.all([
    faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
    faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
    faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(startVideo);

// 启动视频流
function startVideo() {
    navigator.mediaDevices.getUserMedia({ video: {} })
        .then(stream => {
            video.srcObject = stream;
        })
        .catch(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);

        if (detections[0] && detections[0].expressions.happy > 0.5) {
            document.getElementById('smileMessage').innerText = 'Unlocked!';
        } else {
            document.getElementById('smileMessage').innerText = 'Smile to unlock!';
        }
    }, 100);
});

这个脚本文件首先加载了面部识别所需的模型，然后启动视频流，并在视频播放时定期检测面部表情。如果检测到笑脸，则显示“Unlocked!”消息。

SmileToUnlockThis library uses ARKit Face Tracking in order to catch user's smile.项目地址:https://gitcode.com/gh_mirrors/smi/SmileToUnlock