A React.js-based web application that serves as the display interface for the Virtual Window System, delivering immersive outdoor experiences through real-time video streaming, synchronized settings control, and ambient background music.
- Secure Login System: Supports both manual login and QR code-based authentication via the Control App.
- Real-time Video Streaming: Displays live video using HLS (HTTP Live Streaming) from an RTMP source.
- Dynamic Settings Panel: Adjust brightness, volume, clock appearance, and audio settings in real time.
- Bluetooth Remote Control Integration: Connect and synchronize with the ESP32-based hardware remote.
- AI-Driven Ambient Music: Dynamically selects background sounds based on the current video content using AI-generated keywords.
- Cross-Device Synchronization: Uses WebSocket (Socket.IO) to sync settings across all connected devices (Control App, Camera App, Remote).
- Responsive UI: Built with Tailwind CSS and Material UI, ensuring compatibility across desktop and mobile devices.
-
Manual Login
- Enter your username and password.
- Redirects to the display page upon successful authentication.
-
QR Code Login
- A UUID is generated and displayed as a QR code.
- Use the Control App to scan the QR code and authenticate.
- Automatically logs the user in and loads their saved settings.
- Video Feed: Full-screen video stream from the selected source.
- Clock Widget: Real-time clock with customizable appearance (font size, color, background, 12/24-hour format).
- Settings Panel:
- Brightness
- Volume
- Clock settings
- Audio source selection
- Background music toggle (AI-curated)
All projector settings are:
- Saved on the server
- Synchronized in real-time across devices via WebSocket
- Uses AI-generated keywords from the current video stream
- Queries Freesound.org API for relevant ambient sounds
- Allows manual override or keyword-based auto-selection
- Connects via Web Bluetooth API
- Enables physical control of:
- Brightness
- Volume
- Background music
Before deploying, ensure you have:
- Node.js (v18 or higher)
- npm installed
- Access to the backend server (Flask API + Socket.IO)
- A valid SSL certificate if deploying publicly
- Install dependencies:
npm install- Configure environment variables:
Create a
.envfile with the following:
VITE_HOST=0.0.0.0
VITE_PORT=4173
VITE_HTTPS=true
VITE_API_URL=https://api.virtualwindow.cam
VITE_SSL_CERT=.cert/cert.cert
VITE_SSL_KEY=.cert/key.keyTo start the development server:
npm run devAccess the app at https://localhost:4173.