构建具有实时人脸检测功能的 AR 个人资料卡-css教程-PHP中文网

首页

web前端

css教程

构建具有实时人脸检测功能的 AR 个人资料卡

Mary-Kate Olsen

Nov 15, 2024 pm 02:48 PM

Building a AR Profile Card with Real-Time Face Detection

简介

想象一张交互式 3D 个人资料卡，它可以跟踪您的面部动作并实时做出反应 - 这就是 3D AR 个人资料卡的本质。由 P-R 创建。 Lopez 是一位精通 JavaScript、React 和 Firebase 的高级开发人员，该卡将尖端的人脸检测技术与时尚、优质的设计相结合，具有动态发光效果、丰富的渐变和精致的布局。它非常适合在个人层面上吸引用户。

在本教程中，我们将使用 HTML、CSS 和 JavaScript 以及 TensorFlow 的 FaceMesh 构建此交互式个人资料卡，以进行实时人脸检测。该组件非常适合需要令人难忘的交互式体验的专业作品集或应用程序。对于那些对更多互动项目感兴趣的人，不要错过《角斗士之战》——一款受古罗马启发的惊心动魄的角斗士纸牌游戏，它结合了身临其境的策略和令人惊叹的视觉设计。

让我们开始创建这张个人资料卡！

第 1 步：设置 HTML 结构
我们的个人资料卡将包括用于面部检测的网络摄像头源、用户信息和社交媒体图标。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D AR Profile Card with Face Detection</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <!-- Video for webcam stream -->
  <video>



<p>Key HTML Elements<br>
Webcam Video: Captures real-time video for face detection.<br>
Profile Card: Contains profile information, including name, location, experience, skills, and links to Gladiators Battle and social media.<br>
Social Icons: Link to GitHub, LinkedIn, and Twitter (or X), providing a fully interactive and connected profile.<br>
Step 2: Styling the Profile Card with CSS<br>
The CSS brings the 3D and AR effects to life, with gradients, glowing shadows, and animations for an eye-catching experience.</p>

<p>Body and Background<br>
The body uses a radial gradient to create a soft, dark background that complements the card’s glowing effects.<br>
</p>

<pre class="brush:php;toolbar:false">body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle at center, #2d2d2d, #1b1b1b);
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

/* Webcam */
#webcam {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: -1;
}

登录后复制

个人资料卡设计
个人资料卡本身使用渐变背景、3D 变换和阴影效果来脱颖而出。

.profile-card {
  position: relative;
  width: 370px;
  padding: 35px;
  border-radius: 25px;
  background: linear-gradient(145deg, #3d3d3d, #2a2a2a);
  box-shadow: 
    0 15px 25px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(255, 215, 0, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.1);
  transform-style: preserve-3d;
  transform: perspective(1000px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

.profile-card:hover {
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(255, 215, 0, 0.7),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  transform: scale(1.03);
}

登录后复制

头像和文字样式
头像和文字的风格与卡片的高级美感相匹配，具有发光和大胆的效果。

.profile-avatar {
  width: 130px;
  height: 130px;
  background: url('avatar.jpg') center/cover;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4), 0px 0px 30px rgba(255, 215, 0, 0.5);
  transform: translateZ(70px);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.profile-name {
  font-size: 30px;
  text-align: center;
  color: #ffffff;
  margin-top: 20px;
  transform: translateZ(50px);
  background: linear-gradient(45deg, #ffd700, #ffa500, #ff4500);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
  text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
}

登录后复制

第 3 步：使用 TensorFlow FaceMesh 进行人脸检测
JavaScript 代码使用 TensorFlow 的 FaceMesh 模型来检测面部并动态设置个人资料图像。这种尖端的方法给卡片带来了 AR 的感觉。

网络摄像头和人脸检测设置
setupCameraAndModel 函数初始化网络摄像头并加载 FaceMesh 模型以开始面部跟踪。

const video = document.getElementById('webcam');
const profileAvatar = document.querySelector('.profile-avatar');

async function setupCameraAndModel() {
  const model = await facemesh.load();
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { width: 640, height: 480 }
  });
  video.srcObject = stream;
  video.addEventListener('loadeddata', () => {
    detectFaceAndCapture(model, stream);
  });
}

登录后复制

人脸检测和头像更新
detectorFaceAndCapture 函数在检测到人脸时捕获照片并将其设置为头像的背景。

async function detectFaceAndCapture(model, stream) {
  const predictions = await model.estimateFaces(video);

  if (predictions.length > 0) {
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    const imageDataUrl = canvas.toDataURL('image/png');
    profileAvatar.style.backgroundImage = `url(${imageDataUrl})`;

    stream.getTracks().forEach(track => track.stop());
    video.style.display = 'none';
  } else {
    requestAnimationFrame(() => detectFaceAndCapture(model, stream));
  }
}

// Initialize camera and model
setupCameraAndModel();

登录后复制

此方法利用 AR 技术，通过实时动态设置个人资料图片，为个人资料卡提供独特的触感。

结论
创建具有实时人脸检测功能的交互式 3D AR 个人资料卡，为任何个人或专业网站带来现代、优质的感觉。本教程结合了用于 3D 效果的 CSS 和使用 TensorFlow 进行动态人脸检测的 JavaScript，演示了增强用户交互的强大方法。如果您对更具创新性、身临其境的项目感兴趣，请不要错过 Gladiators Battle——一款令人兴奋的角斗士卡牌游戏，它将历史主题与战略游戏玩法融为一体。欲了解更多信息，请访问 GladiatorsBattle.com。

？发现更多：

探索角斗士之战：进入 https://gladiatorsbattle.com 进入古代武士和史诗般战斗的世界。
GitHub：在 https://github.com/HanGPIErr 查看代码示例和项目。
LinkedIn：关注 https://www.linkedin.com/in/pierre-romain-lopez/ 上的更新。
Twitter：在 X 上保持联系：https://x.com/GladiatorsBT。
本文是您构建视觉上令人惊叹的交互式 Web 元素的门户。加入我们，我们将继续探索将先进技术与直观、高品质设计相融合的方法。

以上是构建具有实时人脸检测功能的 AR 个人资料卡的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn