실시간 얼굴 감지 기능을 갖춘 AR 프로필 카드 구축-CSS 튜토리얼-php.cn

집

웹 프론트엔드

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이 만들었습니다. JavaScript, React 및 Firebase 전문 지식을 갖춘 수석 개발자인 Lopez는 최첨단 얼굴 인식 기술과 역동적인 글로우 효과, 풍부한 그라데이션 및 정교한 레이아웃을 특징으로 하는 세련된 프리미엄 디자인을 결합합니다. 개인적인 차원에서 사용자의 참여를 유도하는 데 적합합니다.

이 튜토리얼에서는 실시간 얼굴 감지를 위해 TensorFlow의 FaceMesh와 함께 HTML, CSS, JavaScript를 사용하여 대화형 프로필 카드를 구축하겠습니다. 이 구성 요소는 기억에 남는 대화형 경험이 필요한 전문 포트폴리오나 애플리케이션에 이상적입니다. 더욱 인터랙티브한 프로젝트에 관심이 있다면 고대 로마에서 영감을 받아 몰입감 넘치는 전략과 시각적으로 뛰어난 디자인이 결합된 스릴 넘치는 검투사 카드 게임인 Gladiators Battle을 놓치지 마세요.

이 프로필 카드를 만들어 보겠습니다!

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);
  });
}

로그인 후 복사

얼굴 인식 및 아바타 업데이트
discoverFaceAndCapture 기능은 얼굴이 감지되면 사진을 캡처하여 프로필 아바타의 배경으로 설정합니다.

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 프로필 카드를 만들면 개인 웹사이트나 전문 웹사이트에 현대적이고 고급스러운 느낌을 더할 수 있습니다. 이 튜토리얼에서는 TensorFlow를 사용하여 3D 효과를 위한 CSS와 동적 얼굴 감지를 위한 JavaScript를 결합하여 사용자 상호 작용을 향상시키는 강력한 접근 방식을 보여줍니다. 보다 혁신적이고 몰입도 높은 프로젝트에 관심이 있다면 역사적 주제와 전략적 게임플레이를 결합한 흥미진진한 검투사 카드 게임인 Gladiators Battle을 놓치지 마세요. GladiatorsBattle.com에서 자세한 내용을 알아보세요.

? 더 알아보기:

검투사 전투 탐색: https://gladiatorsbattle.com에서 고대 전사와 장대한 전투의 세계로 들어가 보세요.
GitHub: https://github.com/HanGPIErr에서 코드 예제와 프로젝트를 확인하세요.
LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez/에서 업데이트를 팔로우하세요.
Twitter: https://x.com/GladiatorsBT에서 X를 통해 소통하세요.
이 기사는 시각적으로 놀라운 대화형 웹 요소를 구축하기 위한 관문입니다. 첨단 기술과 직관적인 고품질 디자인을 결합하는 방법을 계속해서 탐구하는 데 동참해 주세요.

위 내용은 실시간 얼굴 감지 기능을 갖춘 AR 프로필 카드 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.