Merge pull request #16 from martian56/develop

Develop --> Main

Author: martian56

.github/workflows/deploy_front.yml

@@ -10,6 +10,7 @@ jobs:
     env:
       VITE_API_URL: https://videoo-call.onrender.com
       VITE_WS_URL: wss://videoo-call.onrender.com
+      VITE_METERED_API_KEY:  ${{ secrets.VITE_METERED_API_KEY }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -104,4 +105,4 @@ jobs:
               raise SystemExit('❌ Upload failed')
 
           print('✅ Upload succeeded')
-          PYTHON_SCRIPT
+          PYTHON_SCRIPT

frontend/.env.example

@@ -0,0 +1,11 @@
+# Backend API URLs
+VITE_API_URL=http://localhost:8000
+VITE_WS_URL=ws://localhost:8000
+
+# Production URLs (uncomment when deploying)
+# VITE_API_URL=https://videoo-call.onrender.com
+# VITE_WS_URL=wss://videoo-call.onrender.com
+
+# Metered TURN Server API Key
+# Get your API key from: https://www.metered.ca/
+VITE_METERED_API_KEY=your_metered_api_key_here

frontend/src/config.ts

@@ -2,31 +2,35 @@
 export const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
 export const WS_BASE_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:8000';
 
-// WebRTC Configuration with STUN and TURN servers
+// Metered TURN Server API configuration
+export const METERED_API_KEY = import.meta.env.VITE_METERED_API_KEY;
+export const METERED_API_URL = `https://linkup-ufazien.metered.live/api/v1/turn/credentials?apiKey=${METERED_API_KEY}`;
+
+// Function to fetch TURN server credentials
+export const fetchIceServers = async (): Promise<RTCIceServer[]> => {
+  try {
+    const response = await fetch(METERED_API_URL);
+    if (!response.ok) {
+      throw new Error('Failed to fetch TURN credentials');
+    }
+    const iceServers = await response.json();
+    return iceServers;
+  } catch (error) {
+    console.error('Error fetching ICE servers:', error);
+    // Fallback to Google STUN servers if Metered API fails
+    return [
+      {
+        urls: 'stun:stun.l.google.com:19302'
+      }
+    ];
+  }
+};
+
+// Default RTC configuration (will be updated with fetched credentials)
 export const RTC_CONFIG: RTCConfiguration = {
   iceServers: [
     {
-      urls: 'stun:stun.relay.metered.ca:80'
-    },
-    {
-      urls: 'turn:global.relay.metered.ca:80',
-      username: '81df41330ffff0c3d75e77ed',
-      credential: 'yn1jtZhMFeVgGmYo'
-    },
-    {
-      urls: 'turn:global.relay.metered.ca:80?transport=tcp',
-      username: '81df41330ffff0c3d75e77ed',
-      credential: 'yn1jtZhMFeVgGmYo'
-    },
-    {
-      urls: 'turn:global.relay.metered.ca:443',
-      username: '81df41330ffff0c3d75e77ed',
-      credential: 'yn1jtZhMFeVgGmYo'
-    },
-    {
-      urls: 'turns:global.relay.metered.ca:443?transport=tcp',
-      username: '81df41330ffff0c3d75e77ed',
-      credential: 'yn1jtZhMFeVgGmYo'
+      urls: 'stun:stun.l.google.com:19302'
     }
   ]
 };

frontend/src/hooks/useWebRTC.ts

@@ -1,5 +1,5 @@
 import { useRef, useCallback, useState } from 'react';
-import { RTC_CONFIG } from '../config';
+import { fetchIceServers } from '../config';
 
 export interface PeerConnection {
   peerConnection: RTCPeerConnection;
@@ -19,6 +19,7 @@ export const useWebRTC = (options?: UseWebRTCOptions) => {
   const screenStreamRef = useRef<MediaStream | null>(null);
   const originalVideoTrackRef = useRef<MediaStreamTrack | null>(null);
   const [isScreenSharing, setIsScreenSharing] = useState(false);
+  const iceServersRef = useRef<RTCIceServer[] | null>(null);
 
   const initializeLocalStream = useCallback(async (): Promise<boolean> => {
     try {
@@ -39,8 +40,15 @@ export const useWebRTC = (options?: UseWebRTCOptions) => {
     }
   }, []);
 
-  const createPeerConnection = useCallback((clientId: string): RTCPeerConnection => {
-    const pc = new RTCPeerConnection(RTC_CONFIG);
+  const createPeerConnection = useCallback(async (clientId: string): Promise<RTCPeerConnection> => {
+    // Fetch ICE servers if not already cached
+    if (!iceServersRef.current) {
+      console.log('Fetching TURN server credentials...');
+      iceServersRef.current = await fetchIceServers();
+      console.log('ICE servers fetched:', iceServersRef.current);
+    }
+    
+    const pc = new RTCPeerConnection({ iceServers: iceServersRef.current });
 
     // Add local stream tracks
     // If we're screen sharing, use the screen track, otherwise use camera
@@ -171,7 +179,7 @@ export const useWebRTC = (options?: UseWebRTCOptions) => {
       return null;
     }
 
-    const pc = createPeerConnection(clientId);
+    const pc = await createPeerConnection(clientId);
 
     // Double-check that tracks were added
     if (pc.getSenders().length === 0) {
@@ -219,7 +227,7 @@ export const useWebRTC = (options?: UseWebRTCOptions) => {
     let pc = peerConnectionsRef.current.get(clientId);
     if (!pc) {
       console.log('Creating new peer connection for offer from:', clientId);
-      pc = createPeerConnection(clientId);
+      pc = await createPeerConnection(clientId);
 
       if (!pc) {
         console.error('Failed to create peer connection for:', clientId);