4C Photobooth & 57mm Thermal Tag System

An interactive photobooth installation for the 4C Film & Media Showcase. Designed to run unattended on a MacBook Air M2, grab live stream frames from a Sony ZV-E10 camera via USB UVC, composite them onto a 57mm thermal tag template, and serve a mobile-friendly local gallery for mobile downloading and thermal printing.

---

📷 System Architecture

┌─────────────────────────────────────────────┐
│               MacBook Air M2                │
│                                             │
│  ┌──────────────┐      ┌──────────────────┐ │
│  │ Booth Kiosk  │      │ Local Web Server │ │
│  │ (/booth UI)  │─────▶│ (Express API +   │ │
│  │              │writes│ static server)   │ │
│  └──────────────┘ files└──────────────────┘ │
│         │                        ▲          │
│    reads UVC frames        polls/reads      │
│         │                        │          │
│  ┌──────────────┐         ┌─────────────┐   │
│  │ Sony ZV-E10  │         │ /captures/  │   │
│  └──────────────┘         └─────────────┘   │
└─────────────────────────────────────────────┘
                     │ MacBook Wi-Fi Hotspot
                     ▼
              ┌───────────────┐
              │ Phone Gallery │
              │ (/gallery UI) │
              └───────────────┘

---

🚀 Quick Start

1. Install Dependencies

npm install

2. Start the Photobooth Server

npm start

• Booth Kiosk Screen (MacBook): http://localhost:8000/booth
• Mobile Gallery Screen (Phones): http://<Mac-Hotspot-IP>:8000/gallery

---

📸 Camera Setup (Sony ZV-E10)

1. Open camera menu: set to USB Streaming Mode -> Stability Mode.
2. Connect camera via USB cable to the MacBook Air M2.
3. Open http://localhost:8000/booth in browser and grant camera permissions.
4. Keep camera plugged in and power adapter connected.

---

📁 Project Structure

├── server.js              # Express web server & capture APIs
├── package.json           # Node dependencies & scripts
├── .gitignore             # Git ignore rules
├── assets/
│   └── template.svg       # Master 57mm thermal tag graphic template
├── captures/
│   ├── raw/               # Unprocessed captured frames
│   └── final/             # Composited 57mm print tag outputs
└── public/
    ├── booth.html         # Kiosk UI layout
    ├── gallery.html       # Mobile gallery UI layout
    ├── css/
    │   └── style.css      # Design system & styles
    └── js/
        ├── booth.js       # Camera acquisition & canvas compositing logic
        └── gallery.js     # Mobile gallery auto-polling & download logic

---

📄 License

MIT — 4C Film & Media Showcase