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 結構
我們的個人資料卡將包括用於臉部偵測的網路攝影機來源、使用者資訊和社交媒體圖示。

  <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">


  <!-- 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。

？發現更多：

Explore Gladiators Battle: Step into a world of ancient warriors and epic battles at https://gladiatorsbattle.com.
GitHub: Check out code examples and projects at https://github.com/HanGPIErr.
LinkedIn: Follow updates at https://www.linkedin.com/in/pierre-romain-lopez/.
Twitter: Stay connected on X at https://x.com/GladiatorsBT.
This article is your gateway to building visually stunning and interactive web elements. Join us as we continue exploring ways to merge advanced technology with intuitive, high-quality design.

The above is the detailed content of Building a AR Profile Card with Real-Time Face Detection. For more information, please follow other related articles on the PHP Chinese website!