StreamGrid

Your Streams, Your Layout, Your Way

StreamGrid revolutionizes multi-stream viewing by giving you complete freedom over your layout. Want a massive main stream surrounded by smaller feeds? Or five equally-sized streams? Or any other arrangement you can imagine? StreamGrid makes it possible. Built with Electron, React, and TypeScript, it's the perfect solution for watching multiple streams exactly the way you want.

StreamGrid.mp4

✨ Features

• Ultimate Layout Flexibility:
  • Create ANY layout you can imagine - from 2 streams to 5+ streams
  • Make streams any size you want - go big with your main stream while keeping others visible
  • Perfect for scenarios like:
    • One large main stream surrounded by smaller secondary streams
    • Equal-sized grid for monitoring multiple sources
    • Custom arrangements for esports tournaments or multi-angle viewing
• Intuitive Controls:
  • Drag & Drop: Instantly reorganize your layout
  • Resize Handles: Click and drag to adjust stream sizes in real-time
• Stream Management:
  • Add new streams with custom names and logos
  • Remove streams with a single click
  • Persistent layout saving
  • Export and Import your stream setups to share with friends
• Responsive Design: Automatically adjusts to window size while maintaining video aspect ratios
• Stream Platform Support:
  • YouTube: Support for standard videos, live streams, and shorts
  • Twitch: Support for channel live streams
  • HLS Support: Compatible with HTTP Live Streaming (HLS) video sources
  • MPEG-DASH Support: Compatible with Dynamic Adaptive Streaming over HTTP (DASH) video sources
• Chat Integration:
  • YouTube chat for live streams and videos
  • Twitch chat for live streams
  • Draggable and resizable chat windows
• Cross-Platform: Available for Windows, macOS, and Linux

🚀 Getting Started

Prerequisites

• Node.js 18.x or higher
• npm 9.x or higher

Option 1: Install from Releases

1. Visit the Releases section of the repository.
2. Download the latest executable for your platform:
   • Windows: .exe
   • macOS: .dmg
   • Linux: .AppImage or equivalent
3. Run the executable and start using StreamGrid immediately.

Option 2: Compile Yourself

1. Clone the repository:

git clone https://github.com/LordKnish/streamgrid.git
cd streamgrid

2. Install dependencies:

npm install

Development

Run the application in development mode:

npm run dev

Building

Build for your current platform:

npm run build

Platform-specific builds:

# Windows
npm run build:win

# macOS
npm run build:mac

# Linux
npm run build:linux

🛠 Tech Stack

• Framework: Electron with electron-vite
• Frontend:
  • React
  • TypeScript
  • Material-UI
• State Management: Zustand
• Video Playback & Streaming:
  • React Player - Multi-platform video support
  • HLS.js - HLS streaming support
  • dash.js - MPEG-DASH streaming support
  • YouTube Player API integration
  • Twitch Player API integration
• Layout: React Grid Layout
• Form Handling: React Hook Form

🏗 Project Structure

streamgrid/
├── src/
│   ├── main/           # Electron main process
│   ├── preload/        # Preload scripts
│   └── renderer/       # React application
│       ├── src/
│       │   ├── assets/     # Static assets
│       │   ├── components/ # React components
│       │   ├── store/      # Zustand store
│       │   ├── types/      # TypeScript types
│       │   └── utils/      # Utility functions
│       └── index.html
├── electron.vite.config.ts # Electron-vite configuration
└── package.json

🤝 Contributing

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

📄 License

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