Mediasoup Test Frontend

A React TypeScript frontend for the Mediasoup video streaming server with real-time video calling capabilities.

Features

• 🎥 Real-time video calling between 2 participants
• 🎤 Audio/video controls (mute/unmute, camera on/off)
• 🔄 Live participant updates and media state synchronization
• 📱 Responsive design for desktop and mobile
• 🚀 Optimized for Netlify deployment
• ⚡ Built with Vite for fast development and builds

Technologies

• Frontend: React 18 + TypeScript + Vite
• WebRTC: Mediasoup Client v3
• Real-time: Socket.io Client
• UI: Lucide React icons + Custom CSS
• Deployment: Netlify

Technical Details

This frontend application handles all the client-side logic for a WebRTC call.

• Signaling: It connects to the backend server via Socket.IO to manage the call state. This includes joining rooms, creating transports, and negotiating media streams.
• Media: It uses mediasoup-client to manage the WebRTC aspects:
  • It gets access to the user's camera and microphone using navigator.mediaDevices.getUserMedia.
  • It creates a "send" transport to send the user's media to the server and a "receive" transport to get other participants' media.
• ICE Servers (STUN/TURN): The application receives STUN and TURN server configurations from the backend. This is crucial for establishing a connection between users, especially when they are behind firewalls or NATs.
• ICE Restart: The app includes logic to automatically recover from failed media connections. If a transport fails, it requests an "ICE restart" from the server, which provides new connection candidates to gracefully re-establish the media flow without the user needing to refresh the page.

Prerequisites

• Node.js 22+
• Running Mediasoup backend server
• Modern web browser with WebRTC support

Quick Start

1. Install Dependencies

npm install

2. Configure Environment

Create .env file:

VITE_SERVER_URL=http://localhost:3000

For production, update .env.production:

VITE_SERVER_URL=https://your-mediasoup-server.onrender.com

3. Start Development Server

npm run dev

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

4. Build for Production

npm run build

Netlify Deployment

Option 1: Drag & Drop

1. Build the project: npm run build
2. Drag the dist folder to Netlify Drop

Option 2: Git Integration

1. Push your code to GitHub/GitLab
2. Connect repository in Netlify dashboard
3. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist
   • Node version: 22

Option 3: Netlify CLI

# Install Netlify CLI
npm install -g netlify-cli

# Login to Netlify
netlify login

# Deploy
netlify deploy --prod --dir=dist

Environment Variables in Netlify

Set environment variables in Netlify dashboard:

1. Go to Site settings → Environment variables
2. Add: VITE_SERVER_URL=https://your-backend-server.com

Usage

Starting a Video Call

1. Open the frontend URL
2. Click "Join Call" button
3. Allow camera/microphone permissions
4. Share the URL with another person
5. Both participants can now see and hear each other

Controls

• Video Toggle: Turn camera on/off
• Audio Toggle: Mute/unmute microphone
• Leave Call: Exit the video call

Features

• Auto-connect: Automatically connects to available participants
• Media State Sync: Shows real-time audio/video status of all participants
• Responsive Layout: Works on desktop and mobile devices
• Connection Status: Visual indicators for connection state

API Integration

The frontend integrates with the Mediasoup backend server:

Socket.io Events

Client → Server:

// Join room
socket.emit("joinRoom", { roomId, userId, deviceId, participantId });

// Get router capabilities
socket.emit("getRouterRtpCapabilities");

// Create transports
socket.emit("createProducerTransport");
socket.emit("createConsumerTransport");

// Update media state
socket.emit("updateMediaState", { participantId, mediaState });

Server → Client:

// Router capabilities
socket.on('routerRtpCapabilities', (data) => { ... });

// Transport creation
socket.on('producerTransportCreated', (data) => { ... });
socket.on('consumerTransportCreated', (data) => { ... });

// Participant events
socket.on('participantJoined', (data) => { ... });
socket.on('participantLeft', (data) => { ... });
socket.on('participant-updated', (data) => { ... });

REST API Endpoints

// Health check
GET /api/health

// Room management
POST /api/rooms
GET /api/rooms/:roomId

// Participant management
POST /api/participants
GET /api/participants/:participantId

Architecture

┌─────────────────┐    WebRTC/Socket.io    ┌──────────────────┐
│   React Client  │ ←→ ←→ ←→ ←→ ←→ ←→ ←→ ←→ │ Mediasoup Server │
│   (Frontend)    │                        │   (Backend)      │
└─────────────────┘                        └──────────────────┘
         ↑                                           ↑
    Netlify CDN                               Docker Container

File Structure

src/
├── main.tsx              # App entry point
├── App.tsx               # Main video call component
├── index.css             # Global styles
└── vite-env.d.ts         # Vite type definitions

public/
└── vite.svg              # Favicon

config files:
├── package.json          # Dependencies and scripts
├── vite.config.ts        # Vite configuration
├── tsconfig.json         # TypeScript configuration
├── netlify.toml          # Netlify deployment config
├── .env                  # Development environment
└── .env.production       # Production environment

Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type checking
npm run type-check

# Linting
npm run lint

Adding New Features

1. New Components: Add in src/components/
2. State Management: Extend React hooks in App.tsx
3. Styling: Update src/index.css
4. API Integration: Modify socket event handlers

Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

Required Browser Features

• WebRTC support
• getUserMedia API
• Modern JavaScript (ES2022)
• WebSocket support

Testing the Full Stack

Local Testing

1. Start Backend:

   cd ../mediasoup-server-test
   docker-compose up -d

2. Start Frontend:

   npm run dev

3. Test with 2 Browsers:

   • Open http://localhost:5173 in two different browser windows
   • Join call in both windows
   • Verify video/audio streaming works

Production Testing

1. Deploy Backend: Deploy to cloud service (Render, Railway, etc.)
2. Deploy Frontend: Deploy to Netlify
3. Update Environment: Set production server URL
4. Cross-device Testing: Test on different devices and networks

Troubleshooting

Common Issues

Video not working:

• Check camera permissions
• Verify HTTPS in production
• Check browser console for errors

Audio not working:

• Check microphone permissions
• Verify audio device availability
• Test with different browsers

Connection failed:

• Verify backend server is running
• Check CORS settings
• Verify environment variables

Debug Mode

Enable debug logs:

// In browser console
localStorage.setItem("debug", "mediasoup*");

Performance Optimization

Vite Optimizations

• Code splitting for vendor libraries
• Asset optimization and compression
• ES modules for modern browsers

Mediasoup Optimizations

• Adaptive bitrate streaming
• Simulcast support
• Audio/video codec selection

Netlify Optimizations

• Global CDN distribution
• Automatic HTTPS
• Asset compression and caching

Security Considerations

• HTTPS required for WebRTC in production
• Environment variables for sensitive data
• Content Security Policy headers
• CORS configuration on backend

Contributing

1. Fork the repository
2. Create feature branch
3. Make changes with tests
4. Submit pull request

License

MIT License - see LICENSE file for details

Support

For issues and questions:

• Check browser console for errors
• Verify backend server connectivity
• Test with different browsers/devices
• Review Netlify deployment logs