import React, { useState, useEffect, useRef } from 'react'; import io from 'socket.io-client'; import './App.css'; // Connect to the signaling server const socket = io('http://localhost:5000'); function App() { const [roomId, setRoomId] = useState(''); const [isJoined, setIsJoined] = useState(false); const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(''); const [files, setFiles] = useState([]); const [connectedPeers, setConnectedPeers] = useState([]); const [status, setStatus] = useState('Disconnected'); // Refs const localVideoRef = useRef(null); const remoteVideoRef = useRef(null); const peerConnectionsRef = useRef({}); const localStreamRef = useRef(null); const fileChunksRef = useRef({}); const messageInputRef = useRef(null); const fileInputRef = useRef(null); // Initialize when component mounts useEffect(() => { // Socket event listeners socket.on('user-connected', handleUserConnected); socket.on('user-disconnected', handleUserDisconnected); socket.on('room-users', handleRoomUsers); socket.on('offer', handleOffer); socket.on('answer', handleAnswer); socket.on('ice-candidate', handleIceCandidate); socket.on('receive-message', handleReceiveMessage); socket.on('file-metadata', handleFileMetadata); socket.on('file-chunk', handleFileChunk); socket.on('file-complete', handleFileComplete); // Cleanup on unmount return () => { socket.off('user-connected'); socket.off('user-disconnected'); socket.off('room-users'); socket.off('offer'); socket.off('answer'); socket.off('ice-candidate'); socket.off('receive-message'); socket.off('file-metadata'); socket.off('file-chunk'); socket.off('file-complete'); // Stop local stream if (localStreamRef.current) { localStreamRef.current.getTracks().forEach(track => track.stop()); } // Close all peer connections Object.values(peerConnectionsRef.current).forEach(pc => pc.close()); }; }, []); // Create or join a room const joinRoom = async () => { try { // Get local media stream const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); localStreamRef.current = stream; if (localVideoRef.current) { localVideoRef.current.srcObject = stream; } // Join the room socket.emit('join-room', roomId); setIsJoined(true); setStatus('Connected to room'); // Generate a random room ID if none provided if (!roomId) { const generatedId = Math.random().toString(36).substring(2, 7); setRoomId(generatedId); } } catch (error) { console.error('Error accessing media devices:', error); setStatus('Error: Could not access camera/microphone'); } }; // Handle when a new user connects to the room const handleUserConnected = async (userId) => { console.log('User connected:', userId); setStatus(`User ${userId} connected`); // Create a new peer connection for this user const peerConnection = createPeerConnection(userId); // Add local tracks to the peer connection localStreamRef.current.getTracks().forEach(track => { peerConnection.addTrack(track, localStreamRef.current); }); // Create and send an offer try { const offer = await peerConnection.createOffer(); await peerConnection.setLocalDescription(offer); socket.emit('offer', roomId, offer, userId); } catch (error) { console.error('Error creating offer:', error); } }; // Handle when a user disconnects from the room const handleUserDisconnected = (userId) => { console.log('User disconnected:', userId); setStatus(`User ${userId} disconnected`); // Close and remove the peer connection if (peerConnectionsRef.current[userId]) { peerConnectionsRef.current[userId].close(); const newPeerConnections = { ...peerConnectionsRef.current }; delete newPeerConnections[userId]; peerConnectionsRef.current = newPeerConnections; } // Update connected peers list setConnectedPeers(prev => prev.filter(id => id !== userId)); }; // Handle list of users already in the room const handleRoomUsers = (users) => { console.log('Users in room:', users); setConnectedPeers(users); // Create peer connections for each user users.forEach(async (userId) => { const peerConnection = createPeerConnection(userId); // Add local tracks to the peer connection localStreamRef.current.getTracks().forEach(track => { peerConnection.addTrack(track, localStreamRef.current); }); // Create and send an offer try { const offer = await peerConnection.createOffer(); await peerConnection.setLocalDescription(offer); socket.emit('offer', roomId, offer, userId); } catch (error) { console.error('Error creating offer:', error); } }); }; // Create a new WebRTC peer connection const createPeerConnection = (userId) => { // STUN/TURN servers for NAT traversal const configuration = { iceServers: [ { urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:stun1.l.google.com:19302' }, ] }; const peerConnection = new RTCPeerConnection(configuration); peerConnectionsRef.current[userId] = peerConnection; // Handle ICE candidates peerConnection.onicecandidate = (event) => { if (event.candidate) { socket.emit('ice-candidate', roomId, event.candidate, userId); } }; // Handle connection state changes peerConnection.onconnectionstatechange = () => { console.log(`Connection state with ${userId}:`, peerConnection.connectionState); }; // Handle ICE connection state changes peerConnection.oniceconnectionstatechange = () => { console.log(`ICE state with ${userId}:`, peerConnection.iceConnectionState); }; // Handle incoming tracks (remote video/audio) peerConnection.ontrack = (event) => { console.log('Received remote track'); if (remoteVideoRef.current) { remoteVideoRef.current.srcObject = event.streams[0]; } }; return peerConnection; }; // Handle incoming WebRTC offer const handleOffer = async (userId, offer) => { console.log('Received offer from:', userId); // Create a peer connection if it doesn't exist if (!peerConnectionsRef.current[userId]) { const peerConnection = createPeerConnection(userId); // Add local tracks to the peer connection localStreamRef.current.getTracks().forEach(track => { peerConnection.addTrack(track, localStreamRef.current); }); } const peerConnection = peerConnectionsRef.current[userId]; try { // Set remote description from the offer await peerConnection.setRemoteDescription(new RTCSessionDescription(offer)); // Create and send an answer const answer = await peerConnection.createAnswer(); await peerConnection.setLocalDescription(answer); socket.emit('answer', roomId, answer, userId); } catch (error) { console.error('Error handling offer:', error); } }; // Handle incoming WebRTC answer const handleAnswer = async (userId, answer) => { console.log('Received answer from:', userId); const peerConnection = peerConnectionsRef.current[userId]; if (peerConnection) { try { await peerConnection.setRemoteDescription(new RTCSessionDescription(answer)); } catch (error) { console.error('Error handling answer:', error); } } }; // Handle incoming ICE candidates const handleIceCandidate = async (userId, candidate) => { console.log('Received ICE candidate from:', userId); const peerConnection = peerConnectionsRef.current[userId]; if (peerConnection) { try { await peerConnection.addIceCandidate(new RTCIceCandidate(candidate)); } catch (error) { console.error('Error adding ICE candidate:', error); } } }; // Send a chat message const sendMessage = () => { if (!newMessage.trim()) return; // Add message to local state const message = { text: newMessage, sender: 'me', time: new Date().toLocaleTimeString() }; setMessages(prev => [...prev, message]); // Send message to other peers socket.emit('send-message', roomId, newMessage); // Clear input setNewMessage(''); messageInputRef.current?.focus(); }; // Handle incoming chat message const handleReceiveMessage = (userId, message) => { const newMessage = { text: message, sender: userId, time: new Date().toLocaleTimeString() }; setMessages(prev => [...prev, newMessage]); }; // Handle file selection const handleFileSelect = (e) => { if (!e.target.files || e.target.files.length === 0) return; const file = e.target.files[0]; const fileId = `file_${Date.now()}`; // Add file to local state const newFile = { id: fileId, name: file.name, size: file.size, type: file.type, sender: 'me', progress: 0, status: 'sending' }; setFiles(prev => [...prev, newFile]); // Send file metadata to peers connectedPeers.forEach(peerId => { socket.emit('file-metadata', roomId, { id: fileId, name: file.name, size: file.size, type: file.type }, peerId); // Read and send file in chunks const reader = new FileReader(); const chunkSize = 16384; // 16KB chunks reader.onload = (e) => { const fileData = e.target.result; let offset = 0; // Function to send chunks const sendChunk = () => { if (offset < fileData.byteLength) { const chunk = fileData.slice(offset, offset + chunkSize); socket.emit('file-chunk', roomId, chunk, peerId); offset += chunkSize; // Update progress const progress = Math.min(100, Math.round((offset / fileData.byteLength) * 100)); setFiles(prev => prev.map(f => f.id === fileId ? { ...f, progress } : f )); // Send next chunk setTimeout(sendChunk, 100); } else { // File transfer complete socket.emit('file-complete', roomId, fileId, peerId); setFiles(prev => prev.map(f => f.id === fileId ? { ...f, status: 'complete', progress: 100 } : f )); } }; // Start sending chunks sendChunk(); }; reader.readAsArrayBuffer(file); }); }; // Handle incoming file metadata const handleFileMetadata = (userId, metadata) => { // Initialize file chunks storage fileChunksRef.current[metadata.id] = { chunks: [], metadata }; // Add file to local state const newFile = { id: metadata.id, name: metadata.name, size: metadata.size, type: metadata.type, sender: userId, progress: 0, status: 'receiving' }; setFiles(prev => [...prev, newFile]); }; // Handle incoming file chunk const handleFileChunk = (userId, chunk) => { // Find which file this chunk belongs to const fileId = Object.keys(fileChunksRef.current).find(id => fileChunksRef.current[id].metadata.sender === userId ); if (fileId) { // Add chunk to storage fileChunksRef.current[fileId].chunks.push(chunk); // Update progress const totalChunks = Math.ceil(fileChunksRef.current[fileId].metadata.size / 16384); const progress = Math.min(100, Math.round((fileChunksRef.current[fileId].chunks.length / totalChunks) * 100)); setFiles(prev => prev.map(f => f.id === fileId ? { ...f, progress } : f )); } }; // Handle file transfer completion const handleFileComplete = (userId, fileId) => { if (fileChunksRef.current[fileId]) { // Combine chunks into a single blob const fileBlob = new Blob(fileChunksRef.current[fileId].chunks); const url = URL.createObjectURL(fileBlob); // Update file status setFiles(prev => prev.map(f => f.id === fileId ? { ...f, status: 'complete', progress: 100, url } : f )); // Clean up chunks delete fileChunksRef.current[fileId]; } }; // Toggle audio const toggleAudio = () => { if (localStreamRef.current) { const audioTracks = localStreamRef.current.getAudioTracks(); audioTracks.forEach(track => { track.enabled = !track.enabled; }); } }; // Toggle video const toggleVideo = () => { if (localStreamRef.current) { const videoTracks = localStreamRef.current.getVideoTracks(); videoTracks.forEach(track => { track.enabled = !track.enabled; }); } }; // Format file size const formatFileSize = (bytes) => { if (bytes < 1024) return bytes + ' B'; else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'; else if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB'; else return (bytes / 1073741824).toFixed(1) + ' GB'; }; return (

WebRTC Communication App

{status}

{!isJoined ? (

setRoomId(e.target.value)} />

) : (

Room: {roomId}

Share this ID with others to connect

Your Video

Remote Video

Chat

{messages.map((msg, index) => (

{msg.text}

{msg.sender === 'me' ? 'You' : msg.sender} • {msg.time}

))}

setNewMessage(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && sendMessage()} ref={messageInputRef} />

File Sharing

{files.map((file) => (

{file.name}

{formatFileSize(file.size)} • {file.sender === 'me' ? 'Sent' : 'Received'}

{file.status === 'complete' ? (

Complete {file.url && ( )}

) : (

{file.progress}%

)}

))} {files.length === 0 &&

No files shared yet

}

)}

); } export default App;