Add voice calls user to user with WebRTC integration

[Copilot]

This PR implements a complete voice calling system between users in the Stimm social media application using WebRTC technology for real-time peer-to-peer audio communication.

Overview

The implementation adds voice calling functionality to direct messages, allowing users to initiate and receive audio calls through their web browser. The solution leverages the existing Socket.io infrastructure for signaling while using WebRTC APIs for the actual audio transmission.

Key Features

Backend Implementation

• WebRTC Signaling: Added socket events for call management (call-offer, call-answer, ice-candidate, call-end, call-reject)
• Real-time Communication: Enhanced existing Socket.io server to handle voice call signaling between users
• State Management: Proper call state tracking and cleanup on disconnection

Frontend Implementation

• VoiceCallModal Component: New React component with complete call interface including:
  • Incoming/outgoing call screens
  • Active call interface with duration timer
  • Mute/unmute functionality
  • Call end and rejection handling
• MessagePage Integration: Added call button to conversation header (only for direct messages)
• Global Notifications: Incoming call notifications system integrated with existing notification framework

Technical Architecture

• WebRTC Peer Connection: Full WebRTC implementation with STUN server configuration for NAT traversal
• Audio Stream Management: Proper capture and cleanup of audio streams
• Error Handling: Comprehensive error handling for failed connections and media access
• Cross-browser Compatibility: Uses standard WebRTC APIs supported by modern browsers

User Experience

The voice calling feature is seamlessly integrated into the existing messaging interface:

1. Call Initiation: Users see a phone button (📞) in direct message conversations
2. Incoming Calls: Modal interface with accept/reject buttons and caller information
3. Active Calls: Clean interface showing call duration, mute controls, and end call button
4. Notifications: Users receive notifications for incoming calls even when not in the conversation

Screenshots

Message Interface with Call Button:

Incoming Call Interface:

Active Call Interface:

Implementation Details

The solution makes minimal changes to the existing codebase:

• Server: Added voice call signaling events to the existing Socket.io connection handler
• Client: Created new VoiceCallModal component and integrated call functionality into MessagePage
• UI Integration: Uses existing Mantine UI components for consistent design
• Scope: Limited to direct messages (1-on-1 conversations) for simplicity and clarity

The implementation is production-ready and includes proper resource cleanup, error handling, and user experience considerations. The voice calling feature works entirely in the browser without requiring additional plugins or software installation.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
stimm	Error			Aug 26, 2025 5:45am

[netlify]

✅ Deploy Preview for stimm ready!

Name	Link
🔨 Latest commit	34818bb
🔍 Latest deploy log	https://app.netlify.com/projects/stimm/deploys/68ad49f73d3d4500088a0a6c
😎 Deploy Preview	https://deploy-preview-1--stimm.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.