🌌 WebAR Experience: "Image to Video" Prototype

A premium, browser-based Augmented Reality experience. This project brings static images to life by overlaying video content directly onto physical posters using MindAR and A-Frame. No app download is required—just scan and watch.

---

📱 Try It Now

Step 1: Open this link on your phone (or scan the QR code in the image below): 👉 Launch WebAR App

Step 2: Point your phone camera at the image below:

(Scan this image to see the video overlay!)

---

✨ Features

• Zero-Install AR: Runs natively in Chrome, Safari, and Firefox.
• Glassmorphism UI: Sleek, modern interface with frosted glass effects.
• Precision Tracking: Video locks onto the image corners instantly.
• Smart Audio: Unmutes audio automatically when the target is detected.
• Mobile Optimized: Solves common mobile browser blocks (autoplay/inline playback).

---

🛠️ How It Works (The Process)

This project uses Image Tracking technology. Here is the flow from start to finish:

1. The "Target": We take a normal image (like a poster) and "compile" it into a data file (.mind) that the camera can understand.
2. The Recognition: When your camera sees the physical poster, the browser compares it to the compiled data file.
3. The Overlay: Once a match is found (Homography), the code calculates the exact angle and distance of the poster.
4. The Render: It projects an MP4 video file onto that exact space, sticking to the corners even if you move the camera.

---

🚀 Quick Start Guide

1. Run it Locally (Developer)

You cannot run this by simply double-clicking index.html because browsers block camera access on local files.

Option A: VS Code (Easiest)

1. Install the "Live Server" extension.
2. Right-click index.html > Open with Live Server.

Option B: Python

# Open terminal in project folder
python3 -m http.server 8000
# Go to localhost:8000

---

🎨 Customization (Make It Yours)

Want to use your own image and video?

Step 1: Compile Your Image

1. Go to the MindAR Compiler Tool.
2. Upload your image (JPG/PNG). High contrast works best!
3. Download the targets.mind file.
4. Replace the file in assets/targets.mind.

Step 2: Swap the Video

1. Name your video video.mp4.
2. Put it in the assets/ folder.
3. Important: If your video shape is different (e.g., square vs landscape), update the width and height in index.html:

<a-video src="#vid" width="1" height="0.5625"></a-video>

---

📂 Project Structure

.
├── index.html          # The logic (HTML + A-Frame)
├── css/
│   └── style.css       # The look (Glassmorphism UI)
├── assets/
│   ├── targets.mind    # The brain (Compiled Image Data)
│   └── video.mp4       # The content (Video Overlay)
└── README.md           # You are here

📱 Troubleshooting

Issue	Solution
Spinner stuck on "Loading..."	Make sure you are using https:// (Github Pages) or localhost. Camera is blocked on unsecure HTTP.
Video doesn't play	Tap the screen once. Mobile browsers block auto-playing video with sound to save data.
Tracking is jittery	Ensure your target image has good lighting and isn't too blurry.

---

Built with ❤️ by Yuvanesh KS and Venkaatesh R using MindAR.