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

frontend/src/components/WebRTCWarning.jsx

@@ -0,0 +1,99 @@
+import { AlertTriangle, X } from 'lucide-react';
+import { useState } from 'react';
+
+/**
+ * WebRTC Warning Component
+ *
+ * Shows a dismissible warning when WebRTC is not available or blocked
+ */
+const WebRTCWarning = ({ detection, onDismiss }) => {
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  if (isDismissed) {
+    return null;
+  }
+
+  // Don't show if WebRTC is working fine
+  if (detection.supported && detection.hasIceCandidates) {
+    return null;
+  }
+
+  const handleDismiss = () => {
+    setIsDismissed(true);
+    if (onDismiss) {
+      onDismiss();
+    }
+  };
+
+  const getMessage = () => {
+    if (!detection.supported) {
+      return {
+        title: 'WebRTC Not Supported',
+        description: 'Your browser does not support WebRTC. P2P video transfer is disabled.',
+        suggestions: [
+          'Update your browser to the latest version',
+          'Try using Chrome, Firefox, or Edge',
+        ],
+      };
+    }
+
+    if (!detection.hasIceCandidates) {
+      return {
+        title: 'WebRTC Blocked',
+        description: 'WebRTC is blocked by browser settings or extensions. P2P video transfer is disabled.',
+        suggestions: [
+          'Check browser privacy settings (e.g., Opera: Settings → Privacy → WebRTC)',
+          'Disable VPN extensions that block WebRTC',
+          'Try using Chrome or Firefox',
+          'Use incognito/private mode without extensions',
+        ],
+      };
+    }
+
+    return {
+      title: 'WebRTC Error',
+      description: detection.error || 'Unknown WebRTC error',
+      suggestions: ['Try refreshing the page', 'Try a different browser'],
+    };
+  };
+
+  const { title, description, suggestions } = getMessage();
+
+  return (
+    <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
+      <div className="flex items-start justify-between">
+        <div className="flex items-start space-x-3 flex-1">
+          <AlertTriangle className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
+          <div className="flex-1">
+            <h3 className="text-sm font-semibold text-yellow-800 mb-1">
+              {title}
+            </h3>
+            <p className="text-sm text-yellow-700 mb-2">
+              {description}
+            </p>
+            <div className="text-sm text-yellow-700">
+              <p className="font-medium mb-1">How to fix:</p>
+              <ul className="list-disc list-inside space-y-1 ml-2">
+                {suggestions.map((suggestion, index) => (
+                  <li key={index}>{suggestion}</li>
+                ))}
+              </ul>
+            </div>
+            <p className="text-xs text-yellow-600 mt-2 italic">
+              You can still send video links via Google Drive, Dropbox, etc. using the "Link" button.
+            </p>
+          </div>
+        </div>
+        <button
+          onClick={handleDismiss}
+          className="text-yellow-400 hover:text-yellow-600 transition-colors flex-shrink-0 ml-2"
+          aria-label="Dismiss warning"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default WebRTCWarning;

frontend/src/hooks/useWebRTC.js

@@ -8,6 +8,13 @@ const rtcConfig = {
     { urls: 'stun:stun1.l.google.com:19302' },
     { urls: 'stun:stun2.l.google.com:19302' },
   ],
+  iceTransportPolicy: 'all', // Use all candidates (host, srflx, relay)
+  iceCandidatePoolSize: 10, // Pre-gather candidates
+};
+
+// Alternative config for localhost testing (no STUN)
+const rtcConfigLocalhost = {
+  iceServers: [], // No STUN - use only host candidates for localhost
 };
 
 // File chunk size (16KB recommended for WebRTC DataChannel)
@@ -29,6 +36,14 @@ export const useWebRTC = (matchId, userId) => {
   const peerConnectionRef = useRef(null);
   const dataChannelRef = useRef(null);
   const socketRef = useRef(null);
+  const matchIdRef = useRef(matchId);
+  const userIdRef = useRef(userId);
+
+  // Update refs when props change
+  useEffect(() => {
+    matchIdRef.current = matchId;
+    userIdRef.current = userId;
+  }, [matchId, userId]);
 
   // File transfer state
   const fileTransferRef = useRef({
@@ -53,18 +68,37 @@ export const useWebRTC = (matchId, userId) => {
       return peerConnectionRef.current;
     }
 
-    const pc = new RTCPeerConnection(rtcConfig);
+    // Use localhost config for testing (no STUN servers)
+    const pc = new RTCPeerConnection(rtcConfigLocalhost);
     peerConnectionRef.current = pc;
+    console.log('🔧 Using rtcConfigLocalhost (no STUN servers)');
 
     // ICE candidate handler
     pc.onicecandidate = (event) => {
-      if (event.candidate && socketRef.current) {
+      if (event.candidate) {
+        console.log('🧊 ICE candidate generated:', event.candidate.type);
+        if (socketRef.current) {
           socketRef.current.emit('webrtc_ice_candidate', {
-          matchId,
+            matchId: matchIdRef.current,
             candidate: event.candidate,
           });
           console.log('📤 Sent ICE candidate');
+        } else {
+          console.error('❌ Socket not available to send ICE candidate');
         }
+      } else {
+        console.log('🧊 ICE gathering complete (candidate is null)');
+      }
+    };
+
+    // ICE gathering state handler
+    pc.onicegatheringstatechange = () => {
+      console.log('🧊 ICE gathering state:', pc.iceGatheringState);
+    };
+
+    // Signaling state handler
+    pc.onsignalingstatechange = () => {
+      console.log('📡 Signaling state:', pc.signalingState);
     };
 
     // Connection state change handler
@@ -84,8 +118,9 @@ export const useWebRTC = (matchId, userId) => {
     };
 
     console.log('✅ RTCPeerConnection initialized');
+    console.log('🔍 Initial states - Connection:', pc.connectionState, 'ICE:', pc.iceConnectionState, 'Signaling:', pc.signalingState);
     return pc;
-  }, [matchId]);
+  }, []);
 
   /**
    * Create data channel for file transfer
@@ -200,9 +235,11 @@ export const useWebRTC = (matchId, userId) => {
 
       const offer = await pc.createOffer();
       await pc.setLocalDescription(offer);
+      console.log('✅ Local description set (offer). ICE gathering should start now...');
+      console.log('🔍 SDP has candidates:', pc.localDescription.sdp.includes('candidate:'));
 
       socketRef.current.emit('webrtc_offer', {
-        matchId,
+        matchId: matchIdRef.current,
         offer: pc.localDescription,
       });
 
@@ -211,7 +248,7 @@ export const useWebRTC = (matchId, userId) => {
       console.error('Failed to create offer:', error);
       setConnectionState('failed');
     }
-  }, [matchId, initializePeerConnection, createDataChannel]);
+  }, [initializePeerConnection, createDataChannel]);
 
   /**
    * Handle incoming offer and create answer
@@ -230,12 +267,15 @@ export const useWebRTC = (matchId, userId) => {
       };
 
       await pc.setRemoteDescription(new RTCSessionDescription(offer));
+      console.log('✅ Remote description set (offer)');
 
       const answer = await pc.createAnswer();
       await pc.setLocalDescription(answer);
+      console.log('✅ Local description set (answer). ICE gathering should start now...');
+      console.log('🔍 SDP has candidates:', pc.localDescription.sdp.includes('candidate:'));
 
       socketRef.current.emit('webrtc_answer', {
-        matchId,
+        matchId: matchIdRef.current,
         answer: pc.localDescription,
       });
 
@@ -244,7 +284,7 @@ export const useWebRTC = (matchId, userId) => {
       console.error('Failed to handle offer:', error);
       setConnectionState('failed');
     }
-  }, [matchId, initializePeerConnection, setupDataChannelHandlers]);
+  }, [initializePeerConnection, setupDataChannelHandlers]);
 
   /**
    * Handle incoming answer
@@ -258,7 +298,7 @@ export const useWebRTC = (matchId, userId) => {
       }
 
       await pc.setRemoteDescription(new RTCSessionDescription(answer));
-      console.log('✅ Remote description set');
+      console.log('✅ Remote description set (answer). ICE should connect now...');
     } catch (error) {
       console.error('Failed to handle answer:', error);
       setConnectionState('failed');
@@ -385,36 +425,67 @@ export const useWebRTC = (matchId, userId) => {
 
     socketRef.current = socket;
 
-    // Listen for WebRTC signaling events
+    // Create stable handlers using current values from refs
-    socket.on('webrtc_offer', ({ from, offer }) => {
+    const onOffer = ({ from, offer }) => {
-      console.log('📥 Received WebRTC offer from:', from);
+      console.log('📥 Received WebRTC offer from:', from, 'My userId:', userIdRef.current);
-      if (from !== userId) {
+      if (from !== userIdRef.current) {
         handleOffer(offer);
+      } else {
+        console.log('⏭️ Ignoring offer from self');
       }
-    });
+    };
 
-    socket.on('webrtc_answer', ({ from, answer }) => {
+    const onAnswer = ({ from, answer }) => {
-      console.log('📥 Received WebRTC answer from:', from);
+      console.log('📥 Received WebRTC answer from:', from, 'My userId:', userIdRef.current);
-      if (from !== userId) {
+      if (from !== userIdRef.current) {
         handleAnswer(answer);
+      } else {
+        console.log('⏭️ Ignoring answer from self');
       }
-    });
+    };
 
-    socket.on('webrtc_ice_candidate', ({ from, candidate }) => {
+    const onIceCandidate = ({ from, candidate }) => {
       console.log('📥 Received ICE candidate from:', from);
-      if (from !== userId) {
+      if (from !== userIdRef.current) {
         handleIceCandidate(candidate);
       }
-    });
+    };
 
-    // Cleanup on unmount
+    // Attach listeners
+    const attachListeners = () => {
+      socket.off('webrtc_offer', onOffer);
+      socket.off('webrtc_answer', onAnswer);
+      socket.off('webrtc_ice_candidate', onIceCandidate);
+
+      socket.on('webrtc_offer', onOffer);
+      socket.on('webrtc_answer', onAnswer);
+      socket.on('webrtc_ice_candidate', onIceCandidate);
+
+      console.log('✅ WebRTC Socket.IO listeners attached (socketId:', socket.id, ')');
+    };
+
+    // Attach initially
+    attachListeners();
+
+    // Reattach on reconnect
+    const onReconnect = () => {
+      console.log('🔄 Socket reconnected - reattaching WebRTC listeners');
+      attachListeners();
+    };
+
+    socket.on('connect', onReconnect);
+
+    // Cleanup on unmount only
     return () => {
-      socket.off('webrtc_offer');
+      console.log('🧹 Removing WebRTC Socket.IO listeners');
-      socket.off('webrtc_answer');
+      socket.off('connect', onReconnect);
-      socket.off('webrtc_ice_candidate');
+      socket.off('webrtc_offer', onOffer);
+      socket.off('webrtc_answer', onAnswer);
+      socket.off('webrtc_ice_candidate', onIceCandidate);
       cleanupConnection();
     };
-  }, [userId, handleOffer, handleAnswer, handleIceCandidate, cleanupConnection]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId]); // Only re-run if userId changes
 
   return {
     connectionState,

frontend/src/main.jsx

@@ -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>,
 )

frontend/src/pages/MatchChatPage.jsx

@@ -6,6 +6,8 @@ import { matchesAPI } from '../services/api';
 import { Send, Video, Upload, X, Check, Link as LinkIcon, Loader2 } from 'lucide-react';
 import { connectSocket, getSocket } from '../services/socket';
 import { useWebRTC } from '../hooks/useWebRTC';
+import { detectWebRTCSupport } from '../utils/webrtcDetection';
+import WebRTCWarning from '../components/WebRTCWarning';
 
 const MatchChatPage = () => {
   const { slug } = useParams();
@@ -19,6 +21,7 @@ const MatchChatPage = () => {
   const [showLinkInput, setShowLinkInput] = useState(false);
   const [videoLink, setVideoLink] = useState('');
   const [isConnected, setIsConnected] = useState(false);
+  const [webrtcDetection, setWebrtcDetection] = useState(null);
   const messagesEndRef = useRef(null);
   const fileInputRef = useRef(null);
 
@@ -33,6 +36,21 @@ const MatchChatPage = () => {
     cleanupConnection,
   } = useWebRTC(match?.id, user?.id);
 
+  // Detect WebRTC support on mount
+  useEffect(() => {
+    const runDetection = async () => {
+      const result = await detectWebRTCSupport();
+      setWebrtcDetection(result);
+
+      if (result.hasIceCandidates) {
+        console.log('✅ WebRTC detection: Working correctly');
+      } else {
+        console.warn('⚠️ WebRTC detection:', result.error);
+      }
+    };
+    runDetection();
+  }, []);
+
   // Fetch match data
   useEffect(() => {
     const loadMatch = async () => {
@@ -88,13 +106,15 @@ const MatchChatPage = () => {
       return;
     }
 
-    // Socket event listeners
+    // Helper to join match room
-    socket.on('connect', () => {
+    const joinMatchRoom = () => {
       setIsConnected(true);
-      // Join match room using numeric match ID for socket
       socket.emit('join_match_room', { matchId: match.id });
       console.log(`Joined match room ${match.id}`);
-    });
+    };
+
+    // Socket event listeners
+    socket.on('connect', joinMatchRoom);
 
     socket.on('disconnect', () => {
       setIsConnected(false);
@@ -105,9 +125,14 @@ const MatchChatPage = () => {
       setMessages((prev) => [...prev, message]);
     });
 
+    // Join immediately if already connected
+    if (socket.connected) {
+      joinMatchRoom();
+    }
+
     // Cleanup
     return () => {
-      socket.off('connect');
+      socket.off('connect', joinMatchRoom);
       socket.off('disconnect');
       socket.off('match_message');
     };
@@ -315,6 +340,13 @@ const MatchChatPage = () => {
           </div>
 
           <div className="flex flex-col h-[calc(100vh-320px)]">
+            {/* WebRTC Warning */}
+            {webrtcDetection && (
+              <div className="p-4 pb-0">
+                <WebRTCWarning detection={webrtcDetection} />
+              </div>
+            )}
+
             {/* Messages */}
             <div className="flex-1 overflow-y-auto p-4 space-y-4">
               {messages.length === 0 && (
@@ -472,7 +504,12 @@ const MatchChatPage = () => {
                 />
                 <button
                   onClick={() => fileInputRef.current?.click()}
-                  disabled={isTransferring || selectedFile}
+                  disabled={isTransferring || selectedFile || (webrtcDetection && !webrtcDetection.hasIceCandidates)}
+                  title={
+                    webrtcDetection && !webrtcDetection.hasIceCandidates
+                      ? 'WebRTC is blocked - see warning above'
+                      : 'Send video via P2P WebRTC'
+                  }
                   className="flex-1 px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
                 >
                   <Video className="w-4 h-4" />

frontend/src/services/socket.js

@@ -12,10 +12,14 @@ export function connectSocket() {
     return null;
   }
 
-  if (socket && socket.connected) {
+  // Return existing socket instance (even if not connected yet)
+  // This prevents creating multiple socket instances during React StrictMode
+  if (socket) {
+    console.log('♻️ Reusing existing socket instance');
     return socket;
   }
 
+  console.log('🔌 Creating new socket instance');
   socket = io(SOCKET_URL, {
     auth: {
       token,

frontend/src/utils/webrtcDetection.js

@@ -0,0 +1,123 @@
+/**
+ * WebRTC Detection Utility
+ *
+ * Detects if WebRTC ICE candidate generation is working.
+ * This can fail due to:
+ * - Browser privacy settings (Opera, Brave)
+ * - VPN extensions blocking WebRTC
+ * - Corporate firewalls
+ * - Browser not supporting WebRTC
+ */
+
+/**
+ * Test if WebRTC can generate ICE candidates
+ * @returns {Promise<{supported: boolean, hasIceCandidates: boolean, error: string|null}>}
+ */
+export async function detectWebRTCSupport() {
+  const result = {
+    supported: false,
+    hasIceCandidates: false,
+    error: null,
+  };
+
+  // Check if RTCPeerConnection is available
+  if (!window.RTCPeerConnection) {
+    result.error = 'RTCPeerConnection not available in this browser';
+    return result;
+  }
+
+  result.supported = true;
+
+  // Test ICE candidate generation
+  try {
+    const pc = new RTCPeerConnection({
+      iceServers: [], // No STUN servers for quick test
+    });
+
+    let candidateReceived = false;
+
+    // Wait for ICE candidates
+    const candidatePromise = new Promise((resolve) => {
+      pc.onicecandidate = (event) => {
+        if (event.candidate) {
+          candidateReceived = true;
+          resolve(true);
+        } else if (event.candidate === null) {
+          // Gathering complete
+          resolve(candidateReceived);
+        }
+      };
+
+      // Timeout after 3 seconds
+      setTimeout(() => {
+        resolve(candidateReceived);
+      }, 3000);
+    });
+
+    // Create a data channel and offer to trigger ICE gathering
+    pc.createDataChannel('test');
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+
+    // Wait for candidates
+    result.hasIceCandidates = await candidatePromise;
+
+    // Cleanup
+    pc.close();
+
+    if (!result.hasIceCandidates) {
+      result.error = 'ICE candidates not generated - WebRTC may be blocked by browser settings or extensions';
+    }
+
+    return result;
+  } catch (error) {
+    result.error = `WebRTC test failed: ${error.message}`;
+    return result;
+  }
+}
+
+/**
+ * Get user-friendly error message based on detection result
+ * @param {{supported: boolean, hasIceCandidates: boolean, error: string|null}} detection
+ * @returns {string}
+ */
+export function getWebRTCErrorMessage(detection) {
+  if (!detection.supported) {
+    return 'Your browser does not support WebRTC. Please use a modern browser like Chrome, Firefox, or Edge.';
+  }
+
+  if (!detection.hasIceCandidates) {
+    return 'WebRTC is blocked by your browser settings or extensions. P2P file transfer is disabled. Please check your privacy settings or try a different browser.';
+  }
+
+  if (detection.error) {
+    return `WebRTC error: ${detection.error}`;
+  }
+
+  return 'WebRTC is working correctly.';
+}
+
+/**
+ * Get suggestions to fix WebRTC issues
+ * @param {{supported: boolean, hasIceCandidates: boolean, error: string|null}} detection
+ * @returns {string[]}
+ */
+export function getWebRTCFixSuggestions(detection) {
+  if (!detection.supported) {
+    return [
+      'Update your browser to the latest version',
+      'Try using Chrome, Firefox, or Edge',
+    ];
+  }
+
+  if (!detection.hasIceCandidates) {
+    return [
+      'Check browser privacy settings (e.g., Opera: Settings → Privacy → WebRTC)',
+      'Disable VPN extensions that block WebRTC',
+      'Try using Chrome or Firefox with default settings',
+      'Use incognito/private mode to test without extensions',
+    ];
+  }
+
+  return [];
+}