# WebRTC Translation - Quick Start Guide

## 🚀 Quick Start

### 1. Navigate to WebRTC Translations Page
```
URL: /translations-webrtc
```

### 2. The page will automatically:
- Load active translators from the backend
- Display available translation languages
- Auto-select the first available translator

### 3. Select Your Preferred Language
Use the dropdown to choose from available translators/languages

### 4. Watch the Stream
The video will automatically connect and start playing with <500ms latency!

---

## 🔑 Key Features

### Ultra-Low Latency
- **<500ms** latency (vs 3-6s with HLS)
- Real-time synchronization
- No buffering delays

### Live Translator Selection
- See all active translators
- View translator profiles
- Switch languages instantly

### Connection Monitoring
- Live latency display
- Connection status indicators
- Automatic retry on failure

### User-Friendly Interface
- Loading states
- Error messages with retry options
- Information about WebRTC benefits

---

## 📋 Requirements

### Browser Support
- ✅ Chrome/Chromium 74+
- ✅ Firefox 66+
- ✅ Safari 12.1+
- ✅ Edge 79+

### Network Requirements
- Minimum: 1 Mbps (3G)
- Recommended: 5+ Mbps (WiFi/4G)

---

## 🎯 Testing Instructions

### For Developers

1. **Start the Development Server**
   ```bash
   cd /home/tniglobal/public_html/livestream/myvirtualspace
   npm start
   ```

2. **Navigate to WebRTC Page**
   ```
   http://localhost:3000/translations-webrtc
   ```

3. **Open Browser Console**
   - Look for `[WebRTC Consumer]` log messages
   - Monitor connection states
   - Check for errors

4. **Test Translator Selection**
   - Switch between different languages
   - Verify smooth reconnection
   - Check latency display

5. **Test Error Scenarios**
   - Disconnect network temporarily
   - Refresh during playback
   - Test on slow connection (Chrome DevTools throttling)

### For End Users

1. **Navigate to the translations page**
2. **Select your language** from the dropdown
3. **Click play** if autoplay is blocked
4. **Enjoy ultra-low latency translations!**

---

## 🐛 Common Issues & Solutions

### "No active translators found"
**Cause:** No translators are currently streaming  
**Solution:** Wait for a live event or contact support

### "Autoplay blocked. Please click the play button."
**Cause:** Browser autoplay policy  
**Solution:** Click the play button that appears

### "Failed to connect to translator stream"
**Cause:** Network issues or backend unavailable  
**Solution:** Check internet connection and retry

### Black screen with audio
**Cause:** Video track not available  
**Solution:** Check with translator or refresh page

---

## 📊 Monitoring

### Check Connection Quality
The latency indicator shows real-time connection quality:
- **<300ms:** Excellent
- **300-500ms:** Good
- **500-1000ms:** Fair
- **>1000ms:** Poor (may need to refresh)

### Browser DevTools
- **Chrome:** `chrome://webrtc-internals`
- **Firefox:** `about:webrtc`

---

## 🔄 Comparing HLS vs WebRTC

| Feature | HLS (Old) | WebRTC (New) |
|---------|-----------|--------------|
| **URL** | `/translations` | `/translations-webrtc` |
| **Latency** | 3-6 seconds | <500ms |
| **Technology** | M3U8/HLS | WebRTC/MediaSoup |
| **Quality** | Good | Excellent |
| **Buffering** | Noticeable | Minimal |

---

## 📞 Support

### Development Issues
1. Check browser console for errors
2. Review WEBRTC_IMPLEMENTATION.md
3. Verify backend is running

### Production Issues
1. Check network connection
2. Try different browser
3. Clear browser cache
4. Contact support team

---

## ✅ Success Indicators

You'll know WebRTC is working correctly when you see:
- ✅ "🔴 LIVE | Latency: XXXms" badge on video
- ✅ Smooth, buffer-free playback
- ✅ Instant response to audio/video
- ✅ Connection notification: "Now streaming [Language] translation"

---

**Last Updated:** January 13, 2026  
**Version:** 1.0.0  
**Status:** Production Ready