# Web AR clean v4

Base propre et minimale qui :

- ouvre la camera du telephone ;
- detecte une image target ;
- lance une video collee au cadre de cette image ;
- se concentre sur une seule target pour retrouver une base stable.

## Fichiers principaux

- `index.html` : page Web AR.
- `src/ar-config.js` : configuration des targets et videos.
- `src/main.js` : demarrage camera, tracking et lecture/pause video.
- `public/assets/targets/scene-01.mind` : cible compilee de la scene 01.
- `public/assets/images/scenes/scene-01-target.jpeg` : image a afficher en plein ecran.
- `public/assets/videos/scenes/scene-01-video-v2-test.mp4` : clip court de test.
- `target-preview.html` : page plein ecran pour afficher exactement la bonne target.

## Lancer le projet

Depuis le dossier du projet :

```bash
cd /Users/clementschurch/Documents/web-ar-image-target-video-clean
python3 -m http.server 8080
```

Puis ouvre :

- sur ordinateur : `http://localhost:8080`
- target plein ecran : `http://localhost:8080/target-preview.html`
- sur telephone : deploie plutot le dossier en HTTPS

## Important pour les telephones

- `file://` ne suffit pas : la camera Web demande un vrai serveur.
- sur iPhone et sur beaucoup de navigateurs mobiles, la camera demande du `HTTPS`.
- pour un test telephone realiste, heberge ce dossier sur un service statique HTTPS.

## Remplacer par tes vrais visuels et videos

### 1. Tes videos

- place tes MP4 dans `public/assets/videos/`
- privilegie un encodage `H.264 + yuv420p`
- garde `muted: true` pour un demarrage automatique fiable sur iPhone

### 2. Tes image targets

MindAR demande un fichier compile `.mind`.

Workflow :

1. prepare une ou plusieurs images targets nettes, contrastees, avec beaucoup de details visuels ;
2. compile-les avec l'outil officiel MindAR ;
3. copie le fichier `.mind` genere dans `public/assets/targets/` ;
4. mets aussi les images de preview correspondantes dans `public/assets/images/`.

## Configurer plusieurs targets

Edite `src/ar-config.js`.

Exemple :

```js
window.WEB_AR_CONFIG = {
  appName: "Mon experience AR",
  appDescription: "Une video differente par visuel reconnu.",
  imageTargetSrc: "./public/assets/targets/mes-targets.mind",
  maxTrack: 2,
  targets: [
    {
      id: "visuel-a",
      label: "Visuel A",
      description: "Premiere animation",
      targetIndex: 0,
      previewImage: "./public/assets/images/visuel-a.jpg",
      videoSrc: "./public/assets/videos/animation-a.mp4",
      width: 1,
      height: 0.65,
      position: "0 0 0",
      rotation: "0 0 0",
      loop: true,
      muted: true,
      resetOnLost: true
    },
    {
      id: "visuel-b",
      label: "Visuel B",
      description: "Deuxieme animation",
      targetIndex: 1,
      previewImage: "./public/assets/images/visuel-b.jpg",
      videoSrc: "./public/assets/videos/animation-b.mp4",
      width: 1,
      height: 1,
      position: "0 0 0",
      rotation: "0 0 0",
      loop: true,
      muted: true,
      resetOnLost: true
    }
  ]
};
```

Les `targetIndex` doivent suivre l'ordre exact utilise lors de la compilation du fichier `.mind`.

## Ajuster le cadrage de la video

Dans `src/ar-config.js`, chaque target peut regler :

- `width` et `height` : dimensions de la video sur la target ;
- `position` : decalage dans le plan ;
- `rotation` : orientation dans l'espace ;
- `resetOnLost` : remet ou non la video au debut quand la target disparait.

## Limites a connaitre

- "Tous les navigateurs" n'est jamais garanti a 100 % en Web AR, mais cette approche est l'une des plus compatibles aujourd'hui sur mobile.
- l'audio auto-play est souvent bloque sur mobile ; le prototype lit donc la video en muet par defaut.
- la qualite du tracking depend beaucoup de la qualite des visuels cibles, de la lumiere et de la stabilite du telephone.