MotionBase 📡

Real-time phone sensor streaming to your PC via WebRTC

MotionBase bridges your smartphone's motion sensors to your PC browser in real-time. No app installation needed - just scan a QR code and connect!

✨ Features

• 📱 Generic Sensor API - High-precision access to Accelerometer, Gyroscope, Gravity, and Orientation sensors
• 🔗 WebRTC + PeerJS - Peer-to-peer connection for minimal latency
• 📊 Real-time Visualization - Live graphs, 3D orientation cube, gravity ball, and axis bars
• 🎨 Modern UI - Glassmorphism design with smooth animations
• 📲 QR Code Connection - Instant pairing by scanning
• 🌐 HTTPS Ready - Works on GitHub Pages out of the box
• 📴 No Server Required - Pure static files, uses PeerJS cloud for signaling

🚀 Quick Start

Option 1: GitHub Pages (Recommended)

1. Fork this repository
2. Go to Settings > Pages
3. Set source to main branch and root folder
4. Your app will be live at https://yourusername.github.io/motionBase/

Option 2: Local Development

# Using npx serve
npx serve .

# Or Python
python -m http.server 3000

# Or any static server

Then open http://localhost:3000

📖 How to Use

1. On your PC: Open the MotionBase website
2. On your phone: Scan the QR code shown on your PC
3. Grant permission: Allow motion sensor access when prompted
4. Done!: See real-time sensor data streaming to your PC

🛠️ Technical Details

Sensors Used

Sensor	Data	Usage
Accelerometer	X, Y, Z (m/s²)	Motion detection, tilt
Gyroscope	α, β, γ (rad/s)	Rotation speed
GravitySensor	X, Y, Z (m/s²)	Device orientation relative to gravity
AbsoluteOrientationSensor	Quaternion → Euler	Compass heading, 3D orientation

Fallback Support

If Generic Sensor API isn't available, the app falls back to:

• DeviceMotionEvent for accelerometer and gyroscope
• DeviceOrientationEvent for orientation

Browser Support

• ✅ Chrome/Edge (Desktop & Android) - Full Generic Sensor API
• ✅ Firefox - DeviceMotion fallback
• ✅ Safari (iOS 13+) - Requires user permission tap
• ⚠️ iOS requires HTTPS

📁 Project Structure

motionBase/
├── index.html       # PC Host page (shows QR, receives data)
├── controller.html  # Phone Controller page (reads sensors)
├── main.js          # Host JavaScript
├── controller.js    # Controller JavaScript
├── styles.css       # Shared styles
└── README.md

🔒 Security & Privacy

• HTTPS Required: Sensor APIs require secure context (HTTPS or localhost)
• Peer-to-Peer: Data goes directly between devices, not through a server
• No Data Storage: Nothing is stored or logged remotely
• PeerJS Cloud: Only used for initial WebRTC signaling

🎮 Use Cases

• Game Controllers: Use phone as motion controller for browser games
• 3D Visualization: Control 3D models with phone orientation
• Presentations: Navigate slides with gestures
• Accessibility: Alternative input methods
• Prototyping: Test motion-based interactions

📜 License

MIT License - feel free to use in your projects!

🙏 Credits

• PeerJS - WebRTC made simple
• QRCode.js - QR code generation
• Generic Sensor API - Chrome sensor access

---

Made with ❤️ for the web