Web Interface

Custom UX/UI with real-time updates and analytics for LegacyStream

Overview

LegacyStream includes a beautiful, responsive web interface that provides real-time monitoring and control of your streaming server. The interface runs directly on your streaming ports and offers a modern, user-friendly experience.

Key Benefits

  • Real-time Monitoring - Live statistics and stream information
  • Interactive Controls - Start, stop, and configure streams
  • Mobile Responsive - Works perfectly on all devices
  • Embedded Player - HTML5 audio player for each stream
  • Analytics Dashboard - Advanced performance metrics
  • Dark Mode - Beautiful dark theme by default

Accessing the Interface

The web interface is accessible through your streaming server's HTTP port. By default, this is port 8000.

Main URLs

Main Dashboard: http://localhost:8000/ Overview of all streams and server status
Mount Points: http://localhost:8000/mounts Detailed list of all mount points
Stream Details: http://localhost:8000/{mountpoint} Individual stream information and player
Analytics Dashboard: http://localhost:8000/analytics Advanced performance analytics
Mobile Interface: http://localhost:8000/mobile Mobile-optimized interface

🔧 Configuration

You can change the port in your configuration file under [Server] section with the HttpPort parameter.

Features

Stream Information Display

Each mount point displays comprehensive information:

  • Server Type - IceCast or SHOUTcast
  • Description - Stream description and metadata
  • Format - Audio codec (MP3, AAC, etc.)
  • Started - Stream start time
  • Bitrate - Audio bitrate in kbps
  • Quality - Stream quality indicator
  • Listeners - Current listener count
  • Server URL - Direct stream URL

Embedded Audio Player

Each stream includes an HTML5 audio player that allows visitors to:

  • Play/pause the stream directly
  • Adjust volume
  • See current playback status
  • Access stream on mobile devices

Real-time Statistics

Live updates of:

  • Current listener count
  • Bandwidth usage
  • Stream uptime
  • Server performance metrics
  • Connection statistics

Real-time Updates

The web interface uses WebSocket technology to provide real-time updates without page refreshes.

WebSocket Features

// WebSocket connection
const ws = new WebSocket('ws://localhost:8000/ws');

// Listen for real-time updates
ws.onmessage = function(event) {
    const data = JSON.parse(event.data);
    
    // Update listener count
    updateListenerCount(data.listeners);
    
    // Update stream status
    updateStreamStatus(data.status);
    
    // Update performance metrics
    updatePerformance(data.performance);
};

Update Intervals

  • Listener Count: Every 1 second
  • Performance Metrics: Every 5 seconds
  • Stream Status: Every 2 seconds
  • Analytics Data: Every 10 seconds

âš¡ Performance

WebSocket updates are lightweight and efficient, using minimal bandwidth while providing instant feedback.

Interactive Controls

Administrators can control streams directly from the web interface.

Available Controls

Stream Management

  • Start/Stop streams
  • Restart streams
  • Set stream quality
  • Adjust bitrate

Configuration

  • Update stream metadata
  • Change mount point settings
  • Modify listener limits
  • Set fallback files

Monitoring

  • View detailed logs
  • Monitor performance
  • Check error rates
  • View connection stats

Authentication

Interactive controls require authentication. Configure the password in your settings:

[WebInterface]
EnableInteractiveControls=true
ControlPassword=admin123

Mobile Responsive Design

The web interface is fully optimized for mobile devices with touch-friendly controls and responsive design.

Mobile Features

  • Touch-friendly Interface - Large buttons and controls
  • Responsive Layout - Adapts to screen size
  • Mobile Player - Optimized audio player
  • Gesture Support - Swipe and tap gestures
  • Offline Support - Works with poor connections

Mobile URL

Access the mobile-optimized interface at:

http://localhost:8000/mobile

📱 Mobile Optimization

The mobile interface automatically detects device type and optimizes the layout accordingly.

Analytics Dashboard

Advanced analytics provide detailed insights into your streaming performance.

Analytics Features

Performance Metrics

  • CPU usage over time
  • Memory consumption
  • Network bandwidth
  • Disk I/O statistics

Listener Analytics

  • Peak listener times
  • Geographic distribution
  • Connection duration
  • Client types

Stream Analytics

  • Stream quality metrics
  • Error rate tracking
  • Uptime statistics
  • Bitrate analysis

Accessing Analytics

Visit the analytics dashboard at:

http://localhost:8000/analytics

API Endpoints

The web interface also provides RESTful API endpoints for programmatic access.

Available Endpoints

GET /api/stats Server statistics and performance metrics
GET /api/mountpoints List of all mount points and their status
GET /api/analytics Advanced analytics data
GET /api/relays Statistic relay information
POST /api/control/start Start a stream (requires authentication)
POST /api/control/stop Stop a stream (requires authentication)

API Response Format

{
  "status": "success",
  "data": {
    "server": {
      "uptime": 3600,
      "cpu_usage": 15.5,
      "memory_usage": 45.2
    },
    "streams": [
      {
        "mount": "/live",
        "listeners": 1250,
        "bitrate": 128,
        "status": "active"
      }
    ]
  }
}

🔗 Integration

Use these API endpoints to integrate LegacyStream with external monitoring systems or custom applications.