A modern live streaming platform built with React/TypeScript frontend and C# .NET backend, featuring real-time streaming, chat, and adaptive bitrate playback.

• Node.js 18+ and npm/yarn
• .NET 9 SDK
• FFmpeg (for stream processing)
• OBS Studio (for streaming)

Frontend (React/TypeScript):

git clone https://github.com/shepherrrd/bytecast.git
cd bytecast

Backend (C# .NET):

git clone https://github.com/shepherrrd/bytecast-backend.git
cd bytecast-backend

Create a .env file in the root directory:

# Backend API Configuration
VITE_API_BASE_URL=https://localhost:7127
VITE_SIGNALR_URL=https://localhost:7127/streamHub

# HLS Streaming Configuration
VITE_HLS_BASE_URL=https://localhost:7127/hls

# RTMP Configuration (for OBS)
VITE_RTMP_URL=rtmp://localhost:1935/live

npm install

npm run dev

The frontend will be available at http://localhost:5173

Note: This README covers the frontend setup. You'll also need to clone and run the backend separately:

Backend Repository: https://github.com/shepherrrd/bytecast-backend

Make sure your backend (.NET API) is running on https://localhost:7127 with the following endpoints available:

• /api/auth/* - Authentication endpoints
• /api/stream/* - Stream management
• /api/user/* - User management
• /streamHub - SignalR hub for real-time features
• /hls/{streamKey}/* - HLS streaming endpoints

1. Settings → Stream
2. Service: Custom
3. Server: rtmp://localhost:1935/live
4. Stream Key: Use your API key from the Studio page

1. Go to /studio in the app
2. Create a new stream
3. Copy the stream key
4. Configure OBS with the stream key
5. Start streaming in OBS
6. The preview will appear automatically in the Studio page

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

• Live Streaming: RTMP ingestion with HLS playback
• Adaptive Bitrate: Multiple quality levels (1080p, 720p, etc.)
• Real-time Chat: WebSocket-based chat system
• Stream Management: Create, manage, and monitor streams
• User Authentication: JWT-based authentication
• Stream Preview: Real-time preview while streaming
• VOD Support: Video on demand functionality

src/
├── components/          # Reusable React components
│   ├── VideoPlayer.tsx  # Basic video player
│   ├── EnhancedVideoPlayer.tsx  # Advanced HLS player with quality selection
│   ├── StreamPreview.tsx  # Stream preview component
│   └── ...
├── pages/               # Page components
│   ├── HomePage.tsx     # Landing page
│   ├── StudioPage.tsx   # Streaming studio
│   ├── LiveStreamPage.tsx  # Stream viewing page
│   └── ...
├── services/            # API and service integrations
│   ├── api.ts          # REST API client
│   └── signalr.ts      # SignalR client
├── contexts/            # React contexts
└── types/               # TypeScript type definitions

1. Check if backend is running on https://localhost:7127
2. Verify OBS is configured with correct RTMP URL and stream key
3. Check browser console for errors
4. Test HLS URL manually at /hls-test

1. Verify all environment variables are set correctly
2. Check if SignalR hub is accessible
3. Ensure CORS is configured properly in the backend

1. Try different browsers (Safari has native HLS support)
2. Check network connectivity
3. Verify HLS segments are being generated by the backend

Use the built-in HLS test page at /hls-test to manually test stream URLs and debug playback issues.

• The app uses HLS.js for adaptive streaming in browsers
• SignalR provides real-time features (chat, viewer count, stream notifications)
• Streams are ingested via RTMP and transcoded to HLS
• Quality selection is available for adaptive bitrate streaming