Home >Web Front-end >CSS Tutorial >Building a AR Profile Card with Real-Time Face Detection
Building a AR Profile Card with Real-Time Face Detection
- Mary-Kate OlsenOriginal
- 2024-11-15 14:48:02261browse
簡介
想像一張互動式 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。
？發現更多：
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!