ARindex14.html

<!DOCTYPE html>
<html>
<head>
  <title>MindAR Mask</title>
  <script src="https://cdn.jsdelivr.net/npm/mind-ar/dist/mind-ar.js"></script>
</head>
<body>
  <video id="mindar-video" autoplay playsinline></video>
  <canvas id="mindar-canvas" width="640" height="480"></canvas>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      // Отримання посилань на елементи video та canvas
      const video = document.getElementById('mindar-video');
      const canvas = document.getElementById('mindar-canvas');

      // Опції MindAR
      const mindAROptions = {
        video: video,
        canvas: canvas,
        useVideo: true,
        maxFaces: 1 // Максимальна кількість розпізнаних облич
      };

      // Ініціалізація MindAR з опціями
      const mindAR = new MindAR(mindAROptions);

      // Завантаження маски обличчя
      const maskImage = new Image();
      maskImage.src = 'https://images.prom.ua/3843444964_w640_h640_maska-anonimusa.jpg';

      // Додавання сцени та маски
      mindAR.onARLoad(() => {
        // Створення сцени
        const scene = new MindAR.Scene();

        // Створення об'єкта маски
        const mask = new MindAR.Object3D(maskImage);
        mask.scale.set(1.5, 1.5, 1.5); // Налаштування розміру маски (за потреби)

        // Додавання маски до сцени
        scene.addObject(mask);

        // Додавання сцени до MindAR
        mindAR.addScene(scene);
      });

      // Запуск MindAR
      mindAR.start();
    });
  </script>
</body>
</html>