Create static/script.js

static/script.js

@@ -0,0 +1,96 @@
+# client.js (modified JavaScript)
+const localVideo = document.getElementById('localVideo');
+const remoteVideo = document.getElementById('remoteVideo');
+const callBtn = document.getElementById('callBtn');
+const endCallBtn = document.getElementById('endCallBtn');
+// ... other DOM elements
+
+let peerConnection;
+let localStream;
+let socket;
+let roomId;
+let clientId;
+
+async function init() {
+    try {
+        localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+        localVideo.srcObject = localStream;
+        roomId = uuid.v4(); // Generate a unique room ID
+        clientId = uuid.v4(); // Generate a unique client ID
+        socket = new WebSocket(`ws://localhost:8000/ws/${roomId}/${clientId}`); // Connect to the WebSocket server
+        socket.onmessage = handleSocketMessage;
+        socket.onopen = startCall; // Start call after socket opens.
+        setupEventListeners();
+        optimizerPanel.classList.remove('hidden');
+        applyBandwidthPreset(currentBandwidthPreset);
+    } catch (error) {
+        console.error('Initialization error:', error);
+    }
+}
+
+async function startCall() {
+    if (!localStream) {
+        alert('Please allow camera and microphone access first.');
+        return;
+    }
+
+    connectionModal.classList.remove('hidden');
+    simulateConnectionProgress();
+
+    try {
+        peerConnection = new RTCPeerConnection({
+            iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+        });
+
+        peerConnection.onicecandidate = handleICECandidate;
+        peerConnection.ontrack = handleTrack;
+
+        localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
+
+        const offer = await peerConnection.createOffer();
+        await peerConnection.setLocalDescription(offer);
+
+        socket.send(JSON.stringify({ type: 'offer', sdp: offer.sdp })); // Send the offer via WebSocket
+
+    } catch (error) {
+        console.error('Error starting call:', error);
+        connectionModal.classList.add('hidden');
+        alert('Failed to start call. Please try again.');
+    }
+}
+
+function handleSocketMessage(event) {
+    const data = JSON.parse(event.data);
+
+    if (data.type === 'offer' || data.type === 'answer') {
+        peerConnection.setRemoteDescription(new RTCSessionDescription(data));
+        if (data.type === 'offer') {
+            peerConnection.createAnswer()
+                .then(answer => peerConnection.setLocalDescription(answer))
+                .then(() => socket.send(JSON.stringify({ type: 'answer', sdp: peerConnection.localDescription.sdp })));
+        }
+    } else if (data.type === 'candidate') {
+        peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));
+    }
+    // ... rest of the socket message handling
+}
+
+function handleICECandidate(event) {
+    if (event.candidate) {
+        socket.send(JSON.stringify({ type: 'candidate', candidate: event.candidate })); // Send ICE candidate via WebSocket
+    }
+}
+
+function handleTrack(event) {
+    remoteVideo.srcObject = event.streams[0];
+    connectionStatus.textContent = 'Connected';
+    connectionStatus.className = 'font-medium text-green-400';
+    bandwidthIndicator.classList.remove('hidden');
+    updateBandwidthDisplay();
+    callBtn.classList.add('hidden');
+    endCallBtn.classList.remove('hidden');
+    connectionModal.classList.add('hidden');
+    isCallActive = true;
+}
+
+// ... rest of the JavaScript code (toggleVideo, toggleAudio, etc.)