Case Study: ConnectNow – Peer-to-Peer Video Calling & Messaging Platform केस स्टडी: कनेक्टनाउ - पीयर-टू-पीयर वीडियो कॉलिंग और मैसेजिंग मंच

Introduction परिचय

ConnectNow is a real-time video communication and messaging platform that enables peer-to-peer (P2P) video calling, file sharing, and chat between authenticated users. Designed for minimal latency and high-quality connections, the app was built using WebRTC, Socket.io, React, and Redux, with a Node.js signaling server and MongoDB user storage. The custom signaling logic, built from scratch without third-party abstractions like PeerJS or Firebase, provides full control over the peer connection lifecycle. कनेक्टनाउ एक रियल-टाइम वीडियो संचार और मैसेजिंग मंच है जो प्रमाणित उपयोगकर्ताओं के बीच पीयर-टू-पीयर (P2P) वीडियो कॉलिंग, फ़ाइल साझाकरण, और चैट को सक्षम बनाता है। न्यूनतम विलंबता और उच्च-गुणवत्ता कनेक्शन के लिए डिज़ाइन किया गया, यह ऐप WebRTC, Socket.io, React, और Redux का उपयोग करके बनाया गया था, जिसमें Node.js सिग्नलिंग सर्वर और MongoDB उपयोगकर्ता संग्रहण शामिल है। PeerJS या Firebase जैसे तृतीय-पक्ष एब्सट्रैक्शन के बिना स्क्रैच से निर्मित कस्टम सिग्नलिंग लॉजिक, पीयर कनेक्शन लाइफसाइकिल पर पूर्ण नियंत्रण प्रदान करता है।

Image: Full-stack system architecture of ConnectNow covering signaling, WebRTC, messaging, and deployment छवि: कनेक्टनाउ का पूर्ण-स्टैक सिस्टम आर्किटेक्चर, जिसमें सिग्नलिंग, WebRTC, मैसेजिंग, और तैनाती शामिल है

Project Objectives प्रोजेक्ट उद्देश्य

Technology Stack तकनीकी स्टैक

Frontend फ्रंटएंड

Backend बैकएंड

System Architecture सिस्टम आर्किटेक्चर

The system architecture of ConnectNow provides a 360° view of how the app handles WebRTC P2P video, Socket signaling, chat/file transfer, and frontend/backend deployment. Users log in and join a commonroom via Socket.io, with all online users visible in a searchable sidebar. Calls are initiated with a videoOffer, followed by videoAnswer, establishing a WebRTC peer connection for audio/video. ICE candidates handle NAT traversal dynamically, while messaging and file transfers occur via WebSocket. कनेक्टनाउ का सिस्टम आर्किटेक्चर WebRTC P2P वीडियो, Socket सिग्नलिंग, चैट/फ़ाइल स्थानांतरण, और फ्रंटएंड/बैकएंड तैनाती को कैसे संभालता है, इसका 360° दृश्य प्रदान करता है। उपयोगकर्ता लॉगिन करते हैं और Socket.io के माध्यम से एक सामान्य कक्ष में शामिल होते हैं, सभी ऑनलाइन उपयोगकर्ता एक खोजने योग्य साइडबार में दिखाई देते हैं। कॉल एक videoOffer के साथ शुरू होती है, इसके बाद videoAnswer आता है, जो ऑडियो/वीडियो के लिए WebRTC पीयर कनेक्शन स्थापित करता है। ICE उम्मीदवार NAT ट्रैवर्सल को गतिशील रूप से संभालते हैं, जबकि मैसेजिंग और फ़ाइल स्थानांतरण WebSocket के माध्यम से होते हैं।

Frontend Architecture फ्रंटएंड आर्किटेक्चर

Image: Frontend system architecture for media handling, WebSocket, and Redux integration छवि: मीडिया हैंडलिंग, WebSocket, और Redux एकीकरण के लिए फ्रंटएंड सिस्टम आर्किटेक्चर

The frontend architecture leverages React for a component-based SPA UI, with Redux Toolkit managing global state for authenticated users, online user lists, call status, and peer connection tracking. WebRTC’s getUserMedia() initializes microphone and webcam, attaching media tracks to RTCPeerConnection. Local and remote streams are rendered via <video> components. Socket.io-client handles signaling and real-time chat logic, while Toastify provides UI feedback for incoming calls, errors, and disconnections. Styled Components ensure custom, reusable styling. फ्रंटएंड आर्किटेक्चर React का उपयोग कंपोनेंट-आधारित SPA UI के लिए करता है, जिसमें Redux Toolkit प्रमाणित उपयोगकर्ताओं, ऑनलाइन उपयोगकर्ता सूचियों, कॉल स्थिति, और पीयर कनेक्शन ट्रैकिंग के लिए वैश्विक स्थिति का प्रबंधन करता है। WebRTC का getUserMedia() माइक्रोफोन और वेबकैम को आरंभ करता है, मीडिया ट्रैक को RTCPeerConnection से जोड़ता है। स्थानीय और रिमोट स्ट्रीम <video> कंपोनेंट्स के माध्यम से रेंडर किए जाते हैं। Socket.io-client सिग्नलिंग और रियल-टाइम चैट लॉजिक को संभालता है, जबकि Toastify आने वाली कॉल, त्रुटियों, और डिस्कनेक्शन के लिए UI फीडबैक प्रदान करता है। स्टाइल्ड कंपोनेंट्स कस्टम, पुन: उपयोग योग्य स्टाइलिंग सुनिश्चित करते हैं।

Key Responsibilities मुख्य जिम्मेदारियाँ

• Redux Toolkit: Manages global state (authenticated user, online users list, call/incoming offer status, peer connection tracking) Redux Toolkit: वैश्विक स्थिति का प्रबंधन (प्रमाणित उपयोगकर्ता, ऑनलाइन उपयोगकर्ता सूची, कॉल/आने वाली ऑफर स्थिति, पीयर कनेक्शन ट्रैकिंग)
• WebRTC Integration: Initializes microphone and webcam with getUserMedia(), attaches media tracks to RTCPeerConnection, renders local/remote streams via <video> components WebRTC एकीकरण: getUserMedia() के साथ माइक्रोफोन और वेबकैम को आरंभ करता है, मीडिया ट्रैक को RTCPeerConnection से जोड़ता है, <video> कंपोनेंट्स के माध्यम से स्थानीय/रिमोट स्ट्रीम रेंडर करता है
• Socket Event Listeners: Handles videoOffer, videoAnswer, newIceCandidate, message, file, callEnded, user-disconnected events सॉकेट इवेंट लिसनर: videoOffer, videoAnswer, newIceCandidate, message, file, callEnded, user-disconnected इवेंट्स को संभालता है
• Real-Time Chat + File Upload: Text messages via socket.emit("message"), files Base64 encoded and streamed over WebSocket रियल-टाइम चैट + फ़ाइल अपलोड: socket.emit("message") के माध्यम से टेक्स्ट संदेश, WebSocket पर Base64 एन्कोडेड और स्ट्रीम की गई फ़ाइलें
• Component Highlights: Chat.jsx (primary orchestrator), Video.jsx (renders streams), Redux slices (userLogin, userList) कंपोनेंट हाइलाइट्स: Chat.jsx (प्राथमिक ऑर्केस्ट्रेटर), Video.jsx (स्ट्रीम रेंडर करता है), Redux स्लाइस (userLogin, userList)

Feature Highlights मुख्य विशेषताएँ

• Authentication: Users login via email (JWT-based), added to global socket room प्रमाणीकरण: उपयोगकर्ता ईमेल के माध्यम से लॉगिन करते हैं (JWT-आधारित), वैश्विक सॉकेट रूम में जोड़े जाते हैं
• Real-Time Peer Calling: Decentralized call stream using WebRTC, media initialized with getUserMedia(), ICE candidates exchanged via Socket.io रियल-टाइम पीयर कॉलिंग: WebRTC का उपयोग करके विकेन्द्रीकृत कॉल स्ट्रीम, getUserMedia() के साथ मीडिया आरंभ, Socket.io के माध्यम से ICE उम्मीदवारों का आदान-प्रदान
• Video Chat: Displays local and remote streams, handles ICE disconnection and remote user exit gracefully वीडियो चैट: स्थानीय और रिमोट स्ट्रीम प्रदर्शित करता है, ICE डिस्कनेक्शन और रिमोट उपयोगकर्ता के निकास को सुचारू रूप से संभालता है
• Instant Messaging: Messages broadcast via socket within commonroom, displayed in real-time with user ID तत्काल मैसेजिंग: सामान्य कक्ष में सॉकेट के माध्यम से संदेश प्रसारित, उपयोगकर्ता ID के साथ रियल-टाइम में प्रदर्शित
• File Sharing: File input emits Base64 file via socket to room members, receiver decodes and downloads (planned UI upgrades) फ़ाइल साझाकरण: फ़ाइल इनपुट सॉकेट के माध्यम से रूम मेंबर्स को Base64 फ़ाइल उत्सर्जित करता है, रिसीवर डिकोड करता है और डाउनलोड करता है (यूआई अपग्रेड की योजना)

Code Architecture (Frontend) कोड आर्किटेक्चर (फ्रंटएंड)

Folder Highlights फ़ोल्डर हाइलाइट्स

/components
  └── Chat.jsx         # Central peer connection & chat handler
  └── Video.jsx        # Renders local and remote media streams
/redux
  └── userSlice.js     # Auth state
  └── userListSlice.js # Online users
          

Key Logic in Chat.jsx Chat.jsx में मुख्य लॉजिक

Backend Architecture (Socket.IO Signaling) बैकएंड आर्किटेक्चर (Socket.IO सिग्नलिंग)

Image: Node.js Socket.IO signaling server handling room-based offer/answer exchange and message broadcasting छवि: Node.js Socket.IO सिग्नलिंग सर्वर, रूम-आधारित ऑफर/उत्तर विनिमय और संदेश प्रसारण को संभालता है

User identity is tracked using the user object passed on joinRoom, with all interactions scoped to a “commonroom” to ensure contained broadcasts. Future scalability includes dynamic room IDs for private calls. उपयोगकर्ता की पहचान joinRoom पर पास किए गए उपयोगकर्ता ऑब्जेक्ट का उपयोग करके ट्रैक की जाती है, सभी इंटरैक्शन एक “सामान्य कक्ष” में सीमित हैं ताकि प्रसारण नियंत्रित रहे। भविष्य की स्केलेबिलिटी में निजी कॉल के लिए गतिशील रूम ID शामिल हैं।

Challenges & Solutions चुनौतियाँ और समाधान

Full Peer-to-Peer Flow पूर्ण पीयर-टू-पीयर प्रवाह

• Connection Setup: User joins app, connects to signaling server, emits joinRoom with username कनेक्शन सेटअप: उपयोगकर्ता ऐप में शामिल होता है, सिग्नलिंग सर्वर से कनेक्ट करता है, उपयोगकर्ता नाम के साथ joinRoom उत्सर्जित करता है
• Initiating a Call: Click “Call” → createPeerConnection(), create offer → emit videoOffer कॉल शुरू करना: “कॉल” पर क्लिक करें → createPeerConnection(), ऑफर बनाएँ → videoOffer उत्सर्जित करें
• Receiving a Call: Receive offer → prompt accept/reject, accept → create answer → emit videoAnswer कॉल प्राप्त करना: ऑफर प्राप्त करें → स्वीकार/अस्वीकार प्रॉम्प्ट, स्वीकार करें → उत्तर बनाएँ → videoAnswer उत्सर्जित करें
• Stream Negotiation: Both peers exchange ICE candidates, ontrack event attaches remote stream स्ट्रीम नेगोशिएशन: दोनों पीयर ICE उम्मीदवारों का आदान-प्रदान करते हैं, ontrack इवेंट रिमोट स्ट्रीम को जोड़ता है
• Messaging: Input → socket.emit("message", {user, text}), message rendered for all users मैसेजिंग: इनपुट → socket.emit("message", {user, text}), सभी उपयोगकर्ताओं के लिए संदेश रेंडर किया जाता है
• File Sharing: Read file → convert to Base64 → emit file, file rendered with preview/download फ़ाइल साझाकरण: फ़ाइल पढ़ें → Base64 में कनवर्ट करें → फ़ाइल उत्सर्जित करें, फ़ाइल प्रीव्यू/डाउनलोड के साथ रेंडर की जाती है
• Call End: User clicks “End Call” → emits callEnded, stream and state reset on both ends कॉल समाप्त: उपयोगकर्ता “कॉल समाप्त” पर क्लिक करता है → callEnded उत्सर्जित करता है, दोनों सिरों पर स्ट्रीम और स्थिति रीसेट होती है

Performance Benchmarks प्रदर्शन मेट्रिक्स

Security Practices सुरक्षा प्रथाएँ

• Token-based auth (assumed from Redux flow) टोकन-आधारित प्रमाणीकरण (Redux प्रवाह से माना गया)
• Room-based isolation using commonroom सामान्य कक्ष का उपयोग करके रूम-आधारित अलगाव
• Basic input validation on file name, chat payload फ़ाइल नाम, चैट पेलोड पर मूल इनपुट सत्यापन
• WebRTC media encryption built-in (DTLS + SRTP) WebRTC मीडिया एन्क्रिप्शन अंतर्निहित (DTLS + SRTP)

Deployment & CI/CD तैनाती और CI/CD

Image: CI/CD and infrastructure for seamless frontend deployment and live backend signaling छवि: निर्बाध फ्रंटएंड तैनाती और लाइव बैकएंड सिग्नलिंग के लिए CI/CD और इन्फ्रास्ट्रक्चर

DevOps Controls DevOps नियंत्रण

• WebSocket handled via io("https://connectnow-api-26march.onrender.com") WebSocket को io("https://connectnow-api-26march.onrender.com") के माध्यम से संभाला जाता है
• Reconnection logic and error events handled via retrying पुन: कनेक्शन लॉजिक और त्रुटि इवेंट्स को पुन: प्रयास के माध्यम से संभाला जाता है
• .env environment variables injected at runtime रनटाइम पर .env पर्यावरण चर इंजेक्ट किए जाते हैं

Future Scope भविष्य की योजना

Final Reflection अंतिम विचार

ConnectNow demonstrates a production-grade peer-to-peer video and messaging platform, showcasing expertise in WebRTC, Socket.IO, and React/Redux. By building custom signaling logic from scratch, I gained deep insights into WebRTC’s offer/answer flow, ICE negotiation, and real-time communication challenges. This project, alongside LIC Neemuch, Zedemy, and EventEase, reflects my ability to design and deliver scalable, real-world systems. कनेक्टनाउ एक प्रोडक्शन-ग्रेड पीयर-टू-पीयर वीडियो और मैसेजिंग मंच को प्रदर्शित करता है, जो WebRTC, Socket.IO, और React/Redux में विशेषज्ञता को दर्शाता है। स्क्रैच से कस्टम सिग्नलिंग लॉजिक बनाकर, मुझे WebRTC के ऑफर/उत्तर प्रवाह, ICE नेगोशिएशन, और रियल-टाइम संचार चुनौतियों में गहरी अंतर्दृष्टि प्राप्त हुई। यह प्रोजेक्ट, LIC Neemuch, Zedemy, और EventEase के साथ, स्केलेबल, वास्तविक दुनिया के सिस्टम डिज़ाइन और वितरित करने की मेरी क्षमता को दर्शाता है।

Interview Talking Points साक्षात्कार चर्चा बिंदु

• I built this app from scratch using WebRTC, and wrote my own signaling server with Socket.IO, allowing peer-to-peer video/audio streaming without using third-party libraries. The connection handles ICE, offer/answer, and reconnection manually. मैंने इस ऐप को WebRTC का उपयोग करके स्क्रैच से बनाया, और Socket.IO के साथ अपना सिग्नलिंग सर्वर लिखा, जिससे तृतीय-पक्ष लाइब्रेरीज़ का उपयोग किए बिना पीयर-टू-पीयर वीडियो/ऑडियो स्ट्रीमिंग संभव हुई। कनेक्शन ICE, ऑफर/उत्तर, और पुन: कनेक्शन को मैन्युअल रूप से संभालता है।
• I faced real-world challenges in device permissions, echo suppression, and ICE dropout, and solved them by tuning getUserMedia() constraints and WebRTC negotiation lifecycle. मुझे डिवाइस अनुमतियों, इको दमन, और ICE ड्रॉपआउट जैसी वास्तविक दुनिया की चुनौतियों का सामना करना पड़ा, और इन्हें getUserMedia() की बाधाओं और WebRTC नेगोशिएशन लाइफसाइकिल को ट्यून करके हल किया।
• The codebase is modular — with Redux for state management, React for components, and Node.js backend with socket event rooms. I also implemented real-time chat and file transfer within the same signaling flow. कोडबेस मॉड्यूलर है — Redux स्थिति प्रबंधन के लिए, React कंपोनेंट्स के लिए, और सॉकेट इवेंट रूम्स के साथ Node.js बैकएंड। मैंने उसी सिग्नलिंग प्रवाह में रियल-टाइम चैट और फ़ाइल स्थानांतरण भी लागू किया।

Resources संसाधन

• Live Site: connectnow.vercel.app लाइव साइट: connectnow.vercel.app
• GitHub Repository: Private/Self-hosted GitHub रिपॉजिटरी: निजी/स्व-होस्टेड
• Architecture Diagrams: connectnow-frontend.png, connectnow-backend.png, connectnow-fullstack.png आर्किटेक्चर डायग्राम: connectnow-frontend.png, connectnow-backend.png, connectnow-fullstack.png
• Resume Entry: See Resume Update Discussion रिज्यूमे प्रविष्टि: रिज्यूमे अपडेट चर्चा देखें

Author Info लेखक जानकारी

Sanjay Patidar
WebRTC Enthusiast • Full Stack Developer
📧 sanjay.awsindia@gmail.com
🌐 Portfolio
🔗 LinkedIn संजय पाटीदार
WebRTC उत्साही • फुल स्टैक डेवलपर
📧 sanjay.awsindia@gmail.com
🌐 पोर्टफोलियो
🔗 लिंक्डइन

• 📧 sanjay.awsindia@gmail.com 📧 sanjay.awsindia@gmail.com
• 🔗 linkedin.com/in/sanjay-patidar 🔗 linkedin.com/in/sanjay-patidar