An interactive web application that explores and demonstrates native browser capabilities, bridging the gap between traditional websites and native mobile app experiences.
- Real-Time Face Detection: Accesses the device camera to detect faces with bounding boxes using the Shape Detection API.
- Barcode Scanning: Scans QR codes and barcodes in real time with automatic URL detection through the camera.
- File System Access: Opens, edits, and saves text and image files directly from the browser using the File System Access API.
- Screen Recording: Shares, records, and captures screenshots of your screen with the Screen Capture API.
- Audio Recording with Visualization: Records audio with a real-time waveform visualizer using MediaRecorder and Web Audio API.
- Device Sensors: Explores device orientation and motion with interactive 3D representations (animated cube and ball).
- Multitouch Drawing: Draws with multiple fingers simultaneously on a canvas, with mouse fallback support.
| View | Description |
|---|---|
| Native Capabilities Explorer | Main menu with navigation cards to each API demo |
| File System Access | Open, edit, save files and browse local directories |
| Web Authentication | Passwordless authentication with biometrics or security keys |
| Face Detection | Real-time face detection with overlaid bounding boxes |
| Barcode Detection | QR code and barcode scanning with clickable URL detection |
| Screen Capture | Screen sharing, video recording, and screenshot capture |
| Audio Recording | Audio recording with real-time waveform visualizer |
| Device Orientation | Device orientation (alpha/beta/gamma) with interactive 3D cube |
| Device Motion | Device acceleration and rotation with animated ball |
| Multitouch | Drawing with multiple touch contact points |
| View Transitions | Animated transitions between views with theme and layout toggles |
-
Clone the repository
git clone https://github.com/CamiloAT/native-movile-resources.git cd native-movile-resources -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open in browser: Navigate to the URL displayed in the terminal (default
http://localhost:5173).
Note: Some APIs like Face Detection require enabling "Experimental Web Platform Features" in
chrome://flags. Sensor APIs (orientation/motion) need explicit permissions on iOS 13+. Screen capture only works on desktop.
native-movile-resources/
├── index.html ← Main HTML file (full SPA shell)
├── main.js ← All API demo logic
├── style.css ← Complete design system with glassmorphism
├── package.json ← Project metadata and dependencies
├── package-lock.json ← Dependency lockfile
├── vercel.json ← Vercel deployment configuration
├── public/
│ ├── favicon.svg ← Application icon
│ └── icons.svg ← Social icons sprite (SVG)
└── src/
└── assets/ ← Original Vite template
| Layer | Technology |
|---|---|
| Languages | HTML5, CSS3, JavaScript (ES6+) |
| Build Tool | Vite 8.0.10 |
| Modules | ES Modules (type: module) |
| Fonts | Google Fonts (Inter, JetBrains Mono) |
| Icons | Google Material Icons Round |
| CSS Design | Glassmorphism, CSS Variables, CSS Grid, Responsive Design |
| Canvas | HTML5 Canvas API (particles, face detection, audio visualization) |
| Deployment | Vercel |
| Name | GitHub |
|---|---|
| Camilo Andres Arias Tenjo | @CamiloAT |
| Juan Jose Albornoz Velazco | @juanjoseing |
| Diego Fernando Aguirre Tenjo | @elcokiin |
Native Web API Development