AMC - Android Management & Control

🚀 Web-based Android Device Management and Screen Mirroring Solution

Features • Demo • Installation • Usage • Tech Stack • Contributing

✨ Features

📱 Core Capabilities

Real-time Screen Mirroring - High-performance screen streaming powered by scrcpy
Remote Control - Full touch, keyboard, and gesture support
Audio Streaming - Real-time audio playback (Opus codec)
Multi-device Management - Connect and manage multiple Android devices simultaneously
Direct TCP Connection - Connect to devices via IP:PORT without installing ADB (Recommended) ⭐

🎯 Advanced Features

Mobile-Optimized - Automatic landscape rotation and touch coordinate transformation for mobile browsers
Device Auto-Discovery - Real-time device detection and status updates via WebSocket
Persistent Storage - SQLite database for device information and history
Device Information - Comprehensive device details (model, Android version, network info, battery status, etc.)
Quick Connect - Add devices by IP address directly from the UI

💡 User Experience

Modern UI - Beautiful interface built with shadcn/ui and TailwindCSS
Responsive Design - Works seamlessly on desktop and mobile devices
HTTPS Support - Secure connections with auto-generated SSL certificates
Real-time Updates - Live device status and connection state

📸 Screenshots

Desktop View - Device List

Desktop View - Screen Mirroring

📋 Prerequisites

Node.js >= 18
OpenSSL (for certificate generation)
ADB (Android Debug Bridge) - Optional, only needed for USB connections

💡 Note: ADB is optional! You can connect to devices directly via TCP by entering IP:PORT in the web interface.

Install ADB (Optional)

macOS:

brew install android-platform-tools

Linux:

sudo apt-get install adb

Windows:

Download from Android SDK Platform Tools

🛠️ Installation

# 1. Clone the repository
git clone https://github.com/o2e/android_master_scrcpy.git
cd android_master_scrcpy

# 2. Install dependencies (auto-generates SSL certificates)
npm install

# 3. Generate and push database schema
npm run db:push

# 4. (Optional) Seed database with sample data
npm run db:seed

🚀 Usage

Development Mode

# Terminal 1: Start backend server (http://localhost:8080)
npm run server:dev

# Terminal 2: Start frontend dev server (https://localhost:5173)
npm run dev

Access the application:

Frontend: https://localhost:5173
Backend API: http://localhost:8080

Production Build

npm run build
npm run server:start

📱 Connecting Android Devices

Method 1: Direct TCP Connection (Recommended) ⭐

No ADB installation required!

Enable Wireless Debugging on Android device
- Go to Settings → Developer Options → Wireless Debugging → Enable
- Tap Wireless Debugging to see the IP:PORT
Click "添加设备" (Add Device) button in the web UI
Enter the device address (e.g., 192.168.1.100:5555)
Accept authorization prompt on Android device
Start controlling!

Method 2: ADB Server Connection

Prerequisites: ADB must be installed

Via USB:

Enable USB Debugging on your Android device
Connect device via USB
Accept ADB authorization prompt
Device appears automatically in the web interface

Via WiFi:

# Step 1: Connect device via USB first
adb tcpip 5555

# Step 2: Find device IP address (Android Settings → About Phone → Status)
# Or use: adb shell ip addr show wlan0

# Step 3: Connect to device
adb connect 192.168.1.100:5555

# Step 4: Device will appear in the web interface

📦 Available Scripts

Development

npm run dev              # Start Vite dev server with HTTPS
npm run server:dev       # Start backend server with watch mode
npm run server:start     # Start backend server (production)

Build

npm run build            # Build frontend for production

Database

npm run db:push          # Push Prisma schema to database
npm run db:generate      # Generate Prisma client
npm run db:studio        # Open Prisma Studio (database GUI)
npm run db:seed          # Seed database with sample data

Certificates

npm run cert:generate    # Generate self-signed SSL certificates

🏗️ Tech Stack

Frontend

Technology	Version	Description
React	19	UI framework
TypeScript	5+	Type safety
Vite	6+	Build tool
TailwindCSS	4+	Styling
shadcn/ui	-	UI components
React Router	7+	Routing
ya-webadb	Latest	ADB over WebSocket

Backend

Technology	Version	Description
Fastify	11+	Web framework
Prisma	6+	ORM
SQLite	-	Database
ws	-	WebSocket
scrcpy	3.3.3	Screen mirroring

📁 Project Structure

android_master_scrcpy/
├── src/
│   ├── components/           # React components
│   │   └── ui/              # shadcn/ui components
│   ├── scrcpy/              # Screen mirroring components
│   │   ├── DeviceDetail.tsx # Main control interface
│   │   ├── TouchControl.tsx # Touch input handling
│   │   ├── AudioManager.ts  # Audio streaming
│   │   └── KeyboardControl.tsx
│   ├── server/              # Backend server
│   │   ├── routes/          # API routes
│   │   │   ├── adb.routes.ts    # ADB device management
│   │   │   └── device.routes.ts # Device registration
│   │   ├── transport/       # WebSocket & ADB transport
│   │   ├── config.ts        # Server configuration
│   │   └── index.ts         # Server entry point
│   ├── lib/                 # Utilities
│   │   ├── device-detect.ts # Mobile device detection
│   │   └── utils.ts         # Helper functions
│   ├── types/               # TypeScript type definitions
│   └── App.tsx              # Main app component
├── prisma/
│   ├── schema.prisma        # Database schema
│   └── seed.ts              # Database seeding
├── certs/                   # SSL certificates (auto-generated)
├── scripts/
│   └── generate-cert.js     # Certificate generation script
└── wadbd-4.7/              # Android ADB daemon module

🔧 Configuration

Environment Variables

Create a .env file (optional):

# Database
DATABASE_URL="file:./prisma/dev.db"

# API Configuration
VITE_API_PORT=8080
VITE_API_PROTOCOL=http

# Server
NODE_ENV=development
LOG_LEVEL=info

Server Configuration

Edit src/server/config.ts to customize:

ADB server host/port
WebSocket settings
Server port and logging

🎨 Key Features Explained

Mobile Landscape Adaptation

When using a mobile device to control an Android device in landscape mode:

Video automatically rotates 90° to fit vertical screen
Touch coordinates are transformed to match the rotated display
Users hold their phone vertically while controlling landscape apps

Device Information Collection

Automatically collects and stores:

Hardware: Model, manufacturer, CPU, memory, storage
Software: Android version, kernel version, security patch
Network: IP address, interface name
Battery: Level, status, temperature
Screen: Resolution, density, orientation
ADB: Port, status, PID

Real-time Updates

WebSocket connection for instant device status updates
Automatic reconnection on connection loss
Live device discovery without page refresh

🔐 HTTPS Setup

The project automatically generates self-signed SSL certificates during installation.

Trust the Certificate

macOS:

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain certs/localhost.crt

Windows:

certutil -addstore -f "ROOT" certs/localhost.crt

Linux:

sudo cp certs/localhost.crt /usr/local/share/ca-certificates/
sudo update-ca-certificates

Or manually trust the certificate in your browser when prompted.

🐛 Troubleshooting

Certificate Issues

If you see SSL warnings:

Regenerate certificates: npm run cert:generate
Trust the certificate (see HTTPS Setup)
Restart your browser

ADB Connection Failed

# Check ADB server status
adb devices

# Restart ADB server
adb kill-server
adb start-server

# Check device connection
adb shell echo "Connected"

Port Already in Use

Frontend port (5173): Edit vite.config.ts:

server: {
  port: 5174,  // Change port
  https: { /* ... */ }
}

Backend port (8080): Edit src/server/config.ts:

export const config = {
  server: {
    port: 8081  // Change port
  }
}

Device Not Appearing

Check USB debugging is enabled
Verify ADB connection: adb devices
Check WebSocket connection in browser console
Restart both frontend and backend servers

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Setup

Fork the repository
Create your feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Code Style

Frontend: Follow React best practices, use TypeScript strictly
Backend: Use Fastify patterns, proper error handling
Formatting: Prettier (runs on pre-commit)
Linting: ESLint (must pass before commit)

📄 License

This project is licensed under the GNU GPL v3.0 - see the LICENSE file for details.

🙏 Acknowledgments

scrcpy - The amazing screen mirroring solution
ya-webadb - ADB implementation in TypeScript
shadcn/ui - Beautiful UI components
Fastify - Fast and low overhead web framework

📚 Documentation

🔗 Links

Repository: https://github.com/o2e/android_manager_scrcpy
Issues: https://github.com/o2e/android_manager_scrcpy/issues
Pull Requests: https://github.com/o2e/android_manager_scrcpy/pulls

📊 Project Status

This project is actively maintained and open for contributions.

Roadmap

If you find this project helpful, please consider giving it a ⭐️

Made with ❤️ by the community

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
img		img
prisma		prisma
public		public
scripts		scripts
src		src
.env		.env
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
env.example.txt		env.example.txt
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

License

o2e/android_manager_scrcpy

Folders and files

Latest commit

History

Repository files navigation