Skip to content

IROTECHLAB/IROSTREAM

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

8 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŽฌ IRO STREAM

High-performance open source video streaming player with Netlify Functions backend. Stream any video URL instantly with advanced features like proxy support, buffer management, and keyboard controls.

MIT License Netlify Status

โœจ Features

  • ๐Ÿš€ Fast Streaming - Optimized video playback with buffer management
  • ๐Ÿ”’ Netlify Proxy - Built-in proxy to bypass CORS restrictions
  • ๐ŸŒ“ Dark/Light Theme - Automatic theme switching with cookie storage
  • โŒจ๏ธ Keyboard Shortcuts - Full keyboard control support
  • โšก Speed Control - Variable playback speed (0.25x to 100x)
  • ๐Ÿ“Š Network Stats - Real-time buffer and speed monitoring
  • ๐ŸŽฏ Seek Support - Advanced seeking with Range request detection
  • ๐Ÿ“ฑ Responsive - Works on all devices
  • ๐Ÿ”„ HLS/DASH - Support for adaptive streaming formats

๐Ÿš€ Quick Start

1. Clone the Repository

git clone https://github.com/IROTECHLAB/IROSTREAM.git
cd IROSTREAM

2. Deploy to Netlify

Option A: Deploy with Netlify CLI

npm install -g netlify-cli
netlify deploy

Option B: Deploy with Git

  1. Push to your GitHub repository
  2. Connect repository to Netlify
  3. Deploy settings are in netlify.toml

3. Configure Netlify Functions

The proxy function is automatically deployed with your site. No additional configuration needed!

๐Ÿ“ Project Structure

IROSTREAM/
โ”œโ”€โ”€ index.html          # Main player interface
โ”œโ”€โ”€ styles.css          # All styles (dark/light themes)
โ”œโ”€โ”€ player.js           # Video player core logic
โ”œโ”€โ”€ theme.js            # Theme management
โ”œโ”€โ”€ netlify/
โ”‚   โ””โ”€โ”€ functions/
โ”‚       โ””โ”€โ”€ proxy.js    # Netlify Functions proxy
โ”œโ”€โ”€ netlify.toml        # Netlify deployment config
โ””โ”€โ”€ README.md           # This file

๐ŸŽฎ Usage

Basic Usage

  1. Enter any video URL (MP4, WebM, OGG, HLS, DASH)
  2. Toggle "Use Netlify Functions Proxy" if you encounter CORS issues
  3. Click "Stream" or press Enter
  4. Enjoy your video with advanced controls!

Keyboard Shortcuts

Key Action
Space / K Play/Pause
F Toggle Fullscreen
M Mute/Unmute
P Picture in Picture
โ† / J Back 10 seconds
โ†’ / L Forward 10 seconds
โ†‘ Volume Up
โ†“ Volume Down
0-9 Jump to 0%-90%
T Toggle Theme
? Show Shortcuts
Esc Close Modals

๐Ÿ”ง Netlify Functions Proxy

The proxy function handles CORS issues by routing video requests through your Netlify domain:

// Example proxy request
fetch('/.netlify/functions/proxy?url=' + encodeURIComponent(videoUrl))

Proxy Features

  • โœ… Range request forwarding (for seeking)
  • โœ… Header preservation
  • โœ… Redirect handling
  • โœ… Timeout protection
  • โœ… CORS headers

๐ŸŽจ Theme System

The player supports both dark and light themes with automatic cookie-based persistence:

  • Default theme: Dark
  • Toggle with button or 'T' key
  • Theme preference saved in cookie (1 year expiry)
  • Smooth transitions between themes

๐Ÿ“Š Buffer Management

Advanced buffer management system:

  • Real-time buffer visualization
  • Network speed monitoring
  • Slow connection detection
  • Adaptive buffer targeting (30s ahead)
  • History buffer preservation (10% of watched)

๐Ÿ”Œ Supported Formats

  • MP4 - H.264/AVC, H.265/HEVC
  • WebM - VP8, VP9, AV1
  • OGG - Theora, Vorbis
  • HLS - Apple HTTP Live Streaming
  • DASH - MPEG-DASH
  • MKV - Matroska (limited browser support)
  • MOV - QuickTime (limited browser support)

๐Ÿš€ Deployment Configuration

netlify.toml

[build]
  publish = "."
  functions = "netlify/functions"

[build.environment]
  NODE_VERSION = "18"

[[redirects]]
  from = "/api/proxy"
  to = "/.netlify/functions/proxy"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Methods = "GET, POST, PUT, DELETE, OPTIONS"
    Access-Control-Allow-Headers = "Content-Type, Authorization, Range"
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

[[headers]]
  for = "/.netlify/functions/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Methods = "GET, POST, PUT, DELETE, OPTIONS"
    Access-Control-Allow-Headers = "Content-Type, Authorization, Range"
    Access-Control-Expose-Headers = "Content-Length, Content-Range, Accept-Ranges"

๐Ÿ› ๏ธ Development

Local Development

# Install Netlify CLI
npm install -g netlify-cli

# Start local development server
netlify dev

Environment Variables

No environment variables required! The proxy works out of the box.

๐Ÿ“ฑ Browser Support

Browser Support
Chrome โœ… Full
Firefox โœ… Full
Safari โœ… Full
Edge โœ… Full
Opera โœ… Full
Mobile Chrome โœ… Full
Mobile Safari โœ… Full

๐Ÿค Contributing

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

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

๐Ÿ“„ License

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

๐Ÿ™ Acknowledgments

  • Thanks to yashudeveloper for the original code inspiration
  • Built with Netlify Functions
  • Icons by Font Awesome

๐Ÿ“ž Contact & Community

โญ Star History

Star History Chart


Made with โค๏ธ by IROTECH Team