feat: implement WebRTC P2P file transfer with detection and fallback

Implemented complete WebRTC peer-to-peer file transfer system for match chat:

**Core WebRTC Implementation:**
- Created useWebRTC hook with RTCPeerConnection and RTCDataChannel
- P2P file transfer with 16KB chunking for large files (tested up to 700MB)
- Real-time progress monitoring for sender and receiver
- Automatic file download on receiver side
- End-to-end encryption via DTLS (native WebRTC)
- ICE candidate exchange via Socket.IO signaling
- Support for host candidates (localhost testing)

**WebRTC Detection & User Experience:**
- Automatic WebRTC capability detection on page load
- Detects if ICE candidates can be generated (fails in Opera, privacy-focused browsers, VPNs)
- User-friendly warning component with fix suggestions
- Graceful degradation: disables WebRTC button when blocked
- Suggests alternative methods (video links via Google Drive/Dropbox)

**Socket.IO Improvements:**
- Fixed multiple socket instance creation issue
- Implemented socket instance reuse pattern
- Disabled React.StrictMode to prevent reconnection loops in development

**Technical Details:**
- RTCPeerConnection with configurable STUN servers (currently using localhost config)
- RTCDataChannel with ordered delivery
- Comprehensive logging for debugging (ICE gathering, connection states, signaling)
- Match room-based signaling relay via Socket.IO
- Authorization checks for all WebRTC signaling events

**Files Changed:**
- frontend/src/hooks/useWebRTC.js - Complete WebRTC implementation
- frontend/src/utils/webrtcDetection.js - WebRTC capability detection
- frontend/src/components/WebRTCWarning.jsx - User warning component
- frontend/src/pages/MatchChatPage.jsx - WebRTC integration
- frontend/src/services/socket.js - Socket instance reuse
- frontend/src/main.jsx - Disabled StrictMode for Socket.IO stability

**Testing:**
- ✅ Verified working in Chrome (ICE candidates generated)
- ✅ Tested with 700MB file transfer
- ✅ Detection working in Opera (shows warning when WebRTC blocked)
- ✅ P2P connection establishment and DataChannel opening
- ✅ File chunking and progress monitoring

**TODO:**
- Add STUN server configuration for production (NAT traversal)
- Consider server-based upload fallback for blocked users

This commit is contained in:

Radosław Gierwiało

2025-11-15 16:12:02 +01:00

parent 664a2865b9

commit d23a12e5e3

6 changed files with 374 additions and 41 deletions

									
										7

frontend/src/main.jsx
									
												View File
												
				@@ -1,10 +1,9 @@

				import { StrictMode } from 'react'

				import { createRoot } from 'react-dom/client'

				import './index.css'

				import App from './App.jsx'

				// StrictMode disabled for development - causes Socket.IO reconnection issues

				// TODO: Re-enable in production or fix Socket.IO to handle double mounting

				createRoot(document.getElementById('root')).render(

				  <StrictMode>

				    <App />

				  </StrictMode>,

				  <App />

				)

feat: implement WebRTC P2P file transfer with detection and fallback

7 frontend/src/main.jsx Unescape Escape View File

7

frontend/src/main.jsx

View File