A professional, enterprise-grade live streaming encoder with SCTE-35 ad marker and scheduler support, inspired by AWS Elemental MediaLive. Built with Next.js 15, TypeScript, and featuring a stunning orange/dark gradient theme.

• Live Streaming Encoder: Professional-grade video encoding with multiple input/output support
• SCTE-35 Integration: Complete ad marker and scheduling system
• Multi-format Support: RTMP, SRT, NDI, UDP, and DeckLink input sources
• Real-time Monitoring: System health, channel status, and performance metrics
• Channel Management: Create, configure, and manage multiple streaming channels
• Encoding Profiles: Advanced video/audio encoding presets and configurations
• Event Scheduling: Automated ad break scheduling and triggering
• Professional UI: AWS Elemental MediaLive-inspired dark theme with orange accents

• Next.js 15: Latest Next.js with App Router and server components
• TypeScript: Full type safety throughout the application
• Tailwind CSS 4: Modern utility-first CSS framework
• shadcn/ui: Professional UI component library
• Prisma ORM: Database management with SQLite
• Docker Support: Containerized deployment ready
• WebSocket Support: Real-time updates and notifications
• REST API: Complete backend API for all operations

• AWS Elemental MediaLive Theme: Professional dark theme with orange gradients
• Responsive Design: Mobile, tablet, and desktop optimized
• Real-time Updates: Live status updates and monitoring
• Professional Navigation: Multi-level sidebar with collapsible sections
• Interactive Dashboard: Comprehensive system overview and metrics
• Advanced Filtering: Search and filter capabilities across all sections
• Accessibility: WCAG compliant with proper contrast and navigation

• Node.js 18+
• npm or yarn
• Git

1. Clone the repository

   git clone https://github.com/yourusername/medialive-encoder.git
   cd medialive-encoder

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up the database

   npm run db:push

4. Start the development server

   npm run dev
   # or
   yarn dev

5. Open your browser Navigate to http://localhost:3000

medialive-encoder/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── api/               # API routes
│   │   │   ├── streams/        # Stream management API
│   │   │   ├── adbreaks/       # Ad break management API
│   │   │   └── encoding/       # Encoding session API
│   │   ├── channels/          # Channel management page
│   │   ├── dashboard/         # Main dashboard
│   │   ├── inputs/            # Input sources management
│   │   ├── profiles/          # Encoding profiles
│   │   ├── layout.tsx         # Root layout
│   │   └── page.tsx           # Home page (redirect)
│   ├── components/            # Reusable components
│   │   ├── layout/            # Layout components
│   │   │   ├── sidebar.tsx     # Navigation sidebar
│   │   │   └── header.tsx      # Page header
│   │   ├── theme-toggle.tsx   # Theme toggle
│   │   └── ui/                # shadcn/ui components
│   ├── lib/                   # Utility libraries
│   │   ├── db.ts              # Database client
│   │   ├── socket.ts          # WebSocket logic
│   │   └── utils.ts           # Utility functions
│   └── app/
│       └── globals.css         # Global styles and AWS theme
├── prisma/
│   └── schema.prisma          # Database schema
├── public/                    # Static assets
├── docker-compose.yml         # Docker configuration
├── Dockerfile                 # Docker image
├── .gitignore                # Git ignore rules
├── package.json              # Project dependencies
├── tailwind.config.ts        # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration
└── README.md                 # This file

The application features a professional dark theme inspired by AWS Elemental MediaLive:

• Primary Orange: #ff9900 (AWS brand color)
• Dark Background: #0f1419 (Deep space gray)
• Card Background: #1a1f36 (Dark blue-gray)
• Text Primary: #ffffff (White)
• Text Secondary: #d1d5db (Light gray)

• .aws-gradient: Main orange gradient for branding
• .aws-gradient-dark: Dark background gradients
• .aws-metric-card: Professional metric card styling
• .aws-button-gradient: Orange gradient buttons
• .aws-progress-bar: Orange gradient progress indicators
• .aws-scrollbar: Custom orange-themed scrollbars

• Glass Morphism: Backdrop blur effects on cards
• Smooth Animations: Hover transitions and pulsing indicators
• Professional Gradients: Multi-layer gradient backgrounds
• Glow Effects: Subtle glow on important elements

• GET /api/streams - Get all streams
• POST /api/streams - Create new stream
• GET /api/streams/[id] - Get specific stream
• PUT /api/streams/[id] - Update stream
• DELETE /api/streams/[id] - Delete stream

• GET /api/adbreaks - Get all ad breaks
• POST /api/adbreaks - Create new ad break
• GET /api/adbreaks/[id] - Get specific ad break
• PUT /api/adbreaks/[id] - Update ad break
• DELETE /api/adbreaks/[id] - Delete ad break

• GET /api/encoding - Get all encoding sessions
• POST /api/encoding - Start encoding session

Create a .env.local file in the root directory:

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

# Application
NEXT_PUBLIC_APP_NAME="MediaLive Encoder"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# FFmpeg Configuration
FFMPEG_PATH="/usr/local/bin/ffmpeg"
FFMPEG_LOG_LEVEL="info"

# SCTE-35 Configuration
SCTE35_ENABLED=true
SCTE35_PROVIDER="YourProvider"
SCTE35_PROVIDER_ID="0x1"

# HLS Configuration
HLS_SEGMENT_DURATION=6
HLS_PLAYLIST_SIZE=5
HLS_OUTPUT_DIR="/var/www/hls"

The application uses Prisma ORM with SQLite. The main entities include:

• Streams: Live streaming channel configurations
• EncodingSessions: Active encoding session tracking
• AdBreaks: SCTE-35 ad break scheduling and management
• SystemSettings: Application-wide configuration
• SystemLogs: Application logging and auditing

docker build -t medialive-encoder .

docker-compose up -d

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=file:./data/app.db
    volumes:
      - ./data:/app/data
      - ./logs:/app/logs
    restart: unless-stopped

1. Connect to Vercel

   npm i -g vercel
   vercel login

2. Deploy

   vercel

1. Build the image

   docker build -t medialive-encoder:latest .

2. Run the container

   docker run -p 3000:3000 medialive-encoder:latest

1. Build the application

   npm run build

2. Start the production server

   npm start

• CPU Usage: Real-time CPU utilization tracking
• Memory Usage: Memory consumption monitoring
• Disk Usage: Storage space monitoring
• Network I/O: Network traffic monitoring

• System Logs: Application-level logging
• Error Tracking: Error and exception logging
• Performance Metrics: Request timing and performance data
• Audit Logs: User actions and system changes

• WebSocket Support: Live status updates
• Event Notifications: Real-time alert system
• Health Checks: System health monitoring
• Metrics Dashboard: Comprehensive performance metrics

• Session Management: Secure user sessions
• Role-based Access: User permission management
• API Key Management: Secure API key generation and management
• Audit Logging: Complete audit trail of user actions

• Input Validation: Comprehensive input sanitization
• SQL Injection Prevention: Parameterized queries with Prisma
• XSS Protection: Content Security Policy implementation
• CSRF Protection: Cross-site request forgery prevention

• HTTPS Support: SSL/TLS encryption
• CORS Configuration: Cross-origin resource sharing setup
• Rate Limiting: API request rate limiting
• Security Headers: Comprehensive security header implementation

We welcome contributions! Please see our Contributing Guidelines for details.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Add tests if applicable
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

• TypeScript: Strict TypeScript mode enabled
• ESLint: Code linting with Next.js rules
• Prettier: Code formatting (if configured)
• Conventional Commits: Commit message formatting

This project is licensed under the MIT License - see the LICENSE file for details.

• AWS Elemental MediaLive: Inspiration for the UI/UX design
• Next.js Team: For the excellent React framework
• shadcn/ui: For the beautiful UI components
• Tailwind CSS: For the utility-first CSS framework
• Prisma: For the excellent ORM
• SuperKabuki: For the SCTE-35 libraries and tools

If you encounter any issues or have questions:

1. Check the documentation: Review this README and inline code comments
2. Search existing issues: Check GitHub Issues for similar problems
3. Create a new issue: Provide detailed information about your problem
4. Join discussions: Participate in GitHub Discussions

• ✅ Core Architecture: Next.js 15 with App Router
• ✅ Database Layer: Prisma ORM with SQLite
• ✅ API Layer: RESTful API endpoints
• ✅ UI Components: Professional interface with AWS theme
• ✅ Real-time Features: WebSocket support
• ✅ Docker Support: Containerization ready
• 🚧 Advanced Features: Additional encoding profiles and monitoring
• 🚧 Testing: Comprehensive test suite
• 🚧 Documentation: Extended API documentation

Built with ❤️ using Next.js, TypeScript, and inspired by AWS Elemental MediaLive