Merge pull request #3 from martian56/fix-con-issues

martian56 · web-flow · commit 8b83646ee88d · 2025-11-07T18:42:24.000+02:00
Fixes ICE candidate issue
diff --git a/backend/config.py b/backend/config.py
@@ -1,12 +1,18 @@
 import os
 import re
-from pydantic_settings import BaseSettings
+from pydantic_settings import BaseSettings, SettingsConfigDict
 from dotenv import load_dotenv
 
 load_dotenv()
 
 
 class Settings(BaseSettings):
+    model_config = SettingsConfigDict(
+        env_file=".env",
+        case_sensitive=False,
+        extra="ignore"  # Ignore extra environment variables like CORS_ORIGINS
+    )
+    
     # Database
     database_url: str = os.getenv("DATABASE_URL", "postgresql://localhost/videocall")
     
@@ -18,20 +24,23 @@ def async_database_url(self) -> str:
     # Security
     secret_key: str = os.getenv("SECRET_KEY", "dev-secret-key-change-in-production")
     
-    # CORS
-    cors_origins: list[str] = [
-        origin.strip() 
-        for origin in os.getenv("CORS_ORIGINS", "http://localhost:5173,https://linkup.ufazien.com").split(",")
-        if origin.strip()
-    ]
+    @property
+    def cors_origins_str(self) -> str:
+        """Get CORS origins as string from environment"""
+        return os.getenv("CORS_ORIGINS", "http://localhost:5173,https://linkup.ufazien.com")
+    
+    @property
+    def cors_origins(self) -> list[str]:
+        """Get CORS origins as a list"""
+        return [
+            origin.strip()
+            for origin in self.cors_origins_str.split(",")
+            if origin.strip()
+        ]
     
     # Application
-    app_name: str = "VideoCall"
+    app_name: str = "LinkUp"
     debug: bool = os.getenv("DEBUG", "False").lower() == "true"
-    
-    class Config:
-        env_file = ".env"
-        case_sensitive = False
 
 
 settings = Settings()
diff --git a/frontend/src/hooks/useWebRTC.ts b/frontend/src/hooks/useWebRTC.ts
@@ -41,9 +41,12 @@ export const useWebRTC = (options?: UseWebRTCOptions) => {
     
     // Add local stream tracks
     if (localStreamRef.current) {
+      console.log('Adding local tracks to peer connection for:', clientId);
       localStreamRef.current.getTracks().forEach((track) => {
         pc.addTrack(track, localStreamRef.current!);
       });
+    } else {
+      console.warn('No local stream available when creating peer connection for:', clientId);
     }
 
     // Handle remote stream
@@ -96,15 +99,35 @@ export const useWebRTC = (options?: UseWebRTCOptions) => {
   }, [createPeerConnection]);
 
   const handleOffer = useCallback(async (clientId: string, offer: RTCSessionDescriptionInit): Promise<RTCSessionDescriptionInit | null> => {
-    const pc = createPeerConnection(clientId);
+    // Check if we already have a peer connection for this client
+    let pc = peerConnectionsRef.current.get(clientId);
+    if (!pc) {
+      console.log('Creating new peer connection for offer from:', clientId);
+      pc = createPeerConnection(clientId);
+    } else {
+      console.log('Reusing existing peer connection for offer from:', clientId);
+      // If remote description is already set, we might be handling a duplicate offer
+      if (pc.remoteDescription) {
+        console.warn('Remote description already set for:', clientId, 'current state:', pc.signalingState);
+        // If we're in a state where we can set it again, continue, otherwise return
+        if (pc.signalingState === 'stable') {
+          // We can set it again
+        } else {
+          console.error('Cannot set remote description, signaling state:', pc.signalingState);
+          return null;
+        }
+      }
+    }
     
     try {
       await pc.setRemoteDescription(new RTCSessionDescription(offer));
+      console.log('Set remote description for:', clientId, 'signaling state:', pc.signalingState);
       const answer = await pc.createAnswer();
       await pc.setLocalDescription(answer);
+      console.log('Created and set local answer for:', clientId);
       return answer;
     } catch (error) {
-      console.error('Error handling offer:', error);
+      console.error('Error handling offer:', error, 'signaling state:', pc?.signalingState);
       return null;
     }
   }, [createPeerConnection]);
diff --git a/frontend/src/hooks/useWebSocket.ts b/frontend/src/hooks/useWebSocket.ts
@@ -32,6 +32,12 @@ export const useWebSocket = (
   const [error, setError] = useState<Error | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const onMessageRef = useRef(onMessage);
+
+  // Keep the ref updated without causing reconnections
+  useEffect(() => {
+    onMessageRef.current = onMessage;
+  }, [onMessage]);
 
   const connect = useCallback(() => {
     try {
@@ -51,7 +57,8 @@ export const useWebSocket = (
         try {
           const message: WSMessage = JSON.parse(event.data);
           setLastMessage(message);
-          onMessage?.(message);
+          // Use ref to avoid dependency issues
+          onMessageRef.current?.(message);
         } catch (err) {
           console.error('Error parsing WebSocket message:', err);
         }
@@ -77,7 +84,7 @@ export const useWebSocket = (
       console.error('Error creating WebSocket:', err);
       setError(err as Error);
     }
-  }, [meetingCode, clientId, onMessage]);
+  }, [meetingCode, clientId]);
 
   useEffect(() => {
     connect();
diff --git a/frontend/src/pages/MeetingRoom.tsx b/frontend/src/pages/MeetingRoom.tsx
@@ -51,11 +51,14 @@ export default function MeetingRoom() {
   } = useWebRTC({
     onIceCandidate: (clientId: string, candidate: RTCIceCandidate) => {
       if (sendMessageRef.current) {
+        console.log('Sending ICE candidate to:', clientId);
         sendMessageRef.current({
           type: WSMessageType.ICE_CANDIDATE,
           target: clientId,
           data: candidate.toJSON(),
         });
+      } else {
+        console.warn('sendMessageRef is null, cannot send ICE candidate to:', clientId);
       }
     },
   });
@@ -78,22 +81,38 @@ export default function MeetingRoom() {
 
   // WebSocket message handler
   const handleWebSocketMessage = useCallback((message: WSMessage) => {
-    console.log('Received WebSocket message:', message.type);
+    console.log('Received WebSocket message:', message.type, 'Full message:', message);
 
     switch (message.type) {
       case WSMessageType.USER_JOINED:
         if (message.clientId && message.clientId !== clientId) {
-          setOtherParticipants((prev) => [...prev, message.clientId!]);
-          // Create offer to new participant
-          createOffer(message.clientId).then((offer) => {
-            if (offer && sendMessageRef.current) {
-              sendMessageRef.current({
-                type: WSMessageType.OFFER,
-                target: message.clientId,
-                data: offer,
-              });
+          console.log('User joined:', message.clientId);
+          setOtherParticipants((prev) => {
+            if (!prev.includes(message.clientId!)) {
+              return [...prev, message.clientId!];
             }
+            return prev;
           });
+          // Create offer to new participant only if we don't already have a connection
+          if (!hasPeerConnection(message.clientId) && sendMessageRef.current) {
+            console.log('Creating offer to:', message.clientId);
+            createOffer(message.clientId).then((offer) => {
+              if (offer && sendMessageRef.current) {
+                console.log('Sending offer to:', message.clientId);
+                sendMessageRef.current({
+                  type: WSMessageType.OFFER,
+                  target: message.clientId,
+                  data: offer,
+                });
+              } else {
+                console.error('Failed to create offer or sendMessageRef is null');
+              }
+            }).catch((error) => {
+              console.error('Error creating offer:', error);
+            });
+          } else {
+            console.log('Already have peer connection with:', message.clientId);
+          }
         }
         break;
 
@@ -114,52 +133,49 @@ export default function MeetingRoom() {
           const others = message.participants.filter((id: string) => id !== clientId);
           setOtherParticipants(others);
           
-          // Create offers to existing participants when we first join
-          // Use hasPeerConnection to avoid creating duplicate offers
-          if (!isInitialized && others.length > 0) {
-            others.forEach((otherId: string) => {
-              // Only create offer if we don't already have a peer connection
-              // This prevents duplicate offers if we already received one from this peer
-              if (!hasPeerConnection(otherId) && sendMessageRef.current) {
-                createOffer(otherId).then((offer) => {
-                  if (offer && sendMessageRef.current) {
-                    sendMessageRef.current({
-                      type: WSMessageType.OFFER,
-                      target: otherId,
-                      data: offer,
-                    });
-                  }
-                });
-              }
-            });
-          }
+          // When we first join, we receive the list of existing participants
+          // We should wait for existing participants to send us offers (via USER_JOINED on their side)
+          // Don't create offers here - let existing participants initiate via USER_JOINED
           setIsInitialized(true);
         }
         break;
 
       case WSMessageType.OFFER:
         if (message.from && message.data) {
+          console.log('Received offer from:', message.from, 'localStream ready:', !!localStream);
+          // Handle offer - the useWebRTC hook will check if local stream is ready
           handleOffer(message.from, message.data).then((answer) => {
             if (answer && sendMessageRef.current) {
+              console.log('Sending answer to:', message.from);
               sendMessageRef.current({
                 type: WSMessageType.ANSWER,
                 target: message.from,
                 data: answer,
               });
+            } else {
+              console.error('Failed to create answer or sendMessageRef is null');
             }
+          }).catch((error) => {
+            console.error('Error handling offer:', error);
           });
         }
         break;
 
       case WSMessageType.ANSWER:
         if (message.from && message.data) {
-          handleAnswer(message.from, message.data);
+          console.log('Received answer from:', message.from);
+          handleAnswer(message.from, message.data).catch((error) => {
+            console.error('Error handling answer:', error);
+          });
         }
         break;
 
       case WSMessageType.ICE_CANDIDATE:
         if (message.from && message.data) {
-          handleRemoteIceCandidate(message.from, message.data);
+          console.log('Received ICE candidate from:', message.from);
+          handleRemoteIceCandidate(message.from, message.data).catch((error) => {
+            console.error('Error handling ICE candidate:', error);
+          });
         }
         break;
 
@@ -208,6 +224,10 @@ export default function MeetingRoom() {
           });
         }
         break;
+
+      default:
+        console.warn('Unhandled WebSocket message type:', message.type, message);
+        break;
     }
   }, [clientId, createOffer, handleOffer, handleAnswer, handleRemoteIceCandidate, removePeer, hasPeerConnection, isInitialized]);
 
