static/script.js

# 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.)