ByteCast - Live Streaming Platform

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

Prerequisites

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

Getting Started

1. Clone the Repository

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

2. Environment Variables

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

3. Install Dependencies

npm install

4. Start the Development Server

npm run dev

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

Backend Setup

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

Streaming with OBS

1. OBS Configuration

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

2. Start Streaming

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

Available Scripts

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

Features

• 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

Project Structure

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

Troubleshooting

Stream Not Appearing

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

Connection Issues

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

Video Playback Issues

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

Testing

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

Development Notes

• 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