一个简单h5案例实现，眨眨眼，张张嘴，左右摇头的前端实现案例

最新推荐文章于 2025-04-22 13:45:21 发布

m0_74823239

最新推荐文章于 2025-04-22 13:45:21 发布

阅读量518

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/m0_74823239/article/details/144706161

版权

介绍

本文将介绍一个简单的 H5 案例，展示如何通过 JavaScript 实现一些基础的人脸识别交互功能，比如眨眼、张嘴、左右摇头等。这些功能基于 effet.js 框架，通过调用设备摄像头并结合 facemesh.js 的人脸特征检测算法，实时捕捉用户的面部动作并作出响应。这种交互方式为前端开发者提供了新颖的方式来增强用户体验，比如用于身份验证、互动游戏、打卡签到等场景。

在本案例中，我们将逐步讲解如何实现这些面部动作的检测，并将其集成到一个简单的 H5 页面中。通过眨眼确认身份、张嘴触发某个动画效果，或者左右摇头来导航页面，这些人脸交互方式可以让网页的交互性和趣味性大幅提升。

即使你是前端开发的新手，只需掌握基础的 HTML、CSS 和 JavaScript 便可以通过本文快速上手这些人脸识别的实现技巧，为你的 H5 项目注入新的活力和互动性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自定义样式案例</title>
    <script src="https://unpkg.com/face-effet/effet/effet.js"></script>
    <script>
        function start(){
            effet.init({
                el: 'loginBody',
                appearance: false, // 关闭原始样式
                callBack: (data) => {
                    console.log(data)
                    // 2, 4, 6 代表正在验证阶段，具体可查看f12打印的日志
                    if ([2, 4, 6].includes(data.step)) {
                        console.log(data.progressMessage)
                        document.getElementById('tips').innerText = data.progressMessage === 'success' ? '正在验证人脸...' : data.progressMessage;
                        document.getElementById("step-item"+data.step)?.classList.add('step-color-selected');
                    }
                    if (data.progressMessage === 'success'){
                        Promise.all(data.base64Array).then((base64Strings) => {
                            // 人脸数据，在这里可以调用你的后端接口
                            let array = base64Strings;
                            console.log(array)
                        }).catch((error) => {
                            console.error("Error resolving promises:", error);
                        });
                    }
                }
            });
        }


    </script>
    <style>
        .login-body {
            width: 300px;
            height: 500px;
            position: relative;
            overflow: hidden;
            border: 1px solid #999;
        }
        .currentImg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            z-index: 1;
        }
        .step, .tips {
            width: 120px;
            height: 20px;
            position: absolute;
            transform: translate(-50%, -50%);
            left: 50%;
            z-index: 1;
        }
        .tips {
            bottom: 15%;
            font-size: 20px;
            text-align: center;
            color: #fff;
        }
        .step {
            bottom: 8%;
        }
        .step div {
            float: left;
            width: 20px;
            height: 20px;
            margin-left: 8px;
            border: 1px solid #999;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            font-weight: 600;
            color: #999;
        }
        .step-color-selected {
            border: 1px solid #fff !important;
            color: #fff !important;
        }
    </style>
</head>
<body>
<div class="login-body" id="loginBody">
    <img class="currentImg" src="https://pic.imgdb.cn/item/670f8837d29ded1a8c19d352.webp" alt="Background Image"/>
    <div class="tips" id="tips"></div>
    <div class="step">
        <div id="step-item2">1</div>
        <div id="step-item4">2</div>
        <div id="step-item6">3</div>
    </div>
</div>

<button onclick="start()">开启人脸登录</button>

<p>具体参数可以查看官方文档，这个是一款人脸样式框架不会保持用户的人脸照片，只做人脸样式交互，具体协议查看：https://faceeffet.com/#/attention</p>
</body>
</html>