リアルタイム顔検出を備えた AR プロファイル カードの構築

はじめに

顔の動きを追跡し、リアルタイムで反応するインタラクティブな 3D プロファイル カードを想像してください。これが 3D AR プロファイル カードの本質です。作成者: P-R. JavaScript、React、Firebase の専門知識を持つシニア開発者である Lopez 氏によるこのカードは、最先端の顔検出テクノロジーと、ダイナミックなグロー効果、豊富なグラデーション、洗練されたレイアウトを備えた洗練されたプレミアムなデザインを組み合わせています。ユーザーを個人レベルで関与させるのに最適です。

このチュートリアルでは、リアルタイムの顔検出のために、HTML、CSS、JavaScript と TensorFlow の FaceMesh を使用して、このインタラクティブなプロファイル カードを構築します。このコンポーネントは、思い出に残るインタラクティブな体験を必要とするプロフェッショナルなポートフォリオやアプリケーションに最適です。よりインタラクティブなプロジェクトに興味がある方は、古代ローマにインスピレーションを得たスリル満点の剣闘士カード ゲーム、グラディエーター バトルをお見逃しなく。没入型の戦略と視覚的に美しいデザインが組み合わされています。

このプロフィール カードを作成してみましょう!

ステップ 1: HTML 構造のセットアップ
当社のプロフィール カードには、顔検出用の Web カメラ フィード、ユーザー情報、ソーシャル メディア アイコンが含まれます。

  <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 関数は、Web カメラ フィードを初期化し、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);
  });
}

顔検出とアバターの更新
detectFaceAndCapture 関数は、顔が検出されたときに写真をキャプチャし、それをプロフィール アバターの背景として設定します。

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 プロファイル カードを作成すると、個人または専門の Web サイトにモダンでプレミアムな雰囲気がもたらされます。このチュートリアルでは、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: https://x.com/GladiatorsBT で X に接続してください。
この記事は、視覚的に魅力的でインタラクティブな Web 要素を構築するための入り口となります。高度なテクノロジーと直感的で高品質なデザインを融合する方法を引き続き模索する私たちにぜひご参加ください。

以上がリアルタイム顔検出を備えた AR プロファイル カードの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。