VOIP Multi-Platform Communication System

This repository contains MediaSFU reference clients for web, mobile, and desktop environments. It demonstrates the same calling and room concepts across React.js, Flutter, React Native, and Expo, plus a documented Angular desktop roadmap. Check the selected client's README and run its platform tests before distribution.

Start with QUICKSTART.md. Room credentials now stay in the included backend; the clients use MediaSFU headlessly and never need the privileged room API key in their application bundle.

Agent orchestration superpowers

• Agent-only concierge mode handles full conversations with MediaSFU Agents, handing off transcripts and context in near real time.
• Instant human takeover keeps supervisors one tap away via the cross-platform "Take Control" flow in MediaSFURoomDisplay.
• Blended agent + human calls switch between automation and humans without audio drops, syncing context through MediaSFU source switching.
• Play-to-all versus caller-only audio lets teams broadcast bot prompts or keep coaching private, adjustable mid-call.

• MediaSFU platform: https://mediasfu.com
• MediaSFU telephony: https://mediasfu.com/telephony
• MediaSFU agents workspace: https://agents.mediasfu.com

Explore sample builds produced from this repository:

• 🪟 Windows desktop installer (Flutter build): MediaSFU-Setup.exe
• 🤖 Android (Flutter): mediasfu-voip-flutter.apk
• 📱 Android (React Native): mediasfu-voip-rn.apk

• Overview
• System architecture
• Repository structure
• Platform matrix
• Core capabilities
• Gallery
• Getting started
• Development workflow
• Build and deployment
• MediaSFU integration
• Support and resources
• Contributing
• License
• Platform readiness

The VOIP Multi-Platform Communication System provides a consistent MediaSFU-powered experience across multiple client technologies. Each application shares the same core concepts—dialing, room management, and participant control—while embracing the strengths of its respective framework.

Key objectives:

• Deliver ready-to-run examples for developers and integration teams.
• Showcase configurable dialer flows, outbound call orchestration, and MediaSFU room management.
• Maintain uniform logging and analytics across platforms.
• Document a practical migration path between frameworks.

VOIP System Architecture
├── VOIP backend
│   ├── Validated `/api/rooms/create` and `/api/rooms/join`
│   └── Server-only MediaSFU credentials
├── Client applications
│   ├── React.js (web)
│   ├── Flutter (iOS/Android/Desktop)
│   ├── React Native (iOS/Android)
│   ├── React Native + Expo (iOS/Android/Web)
│   └── Angular + Electron (desktop project)
├── Media layer
│   ├── WebRTC transport
│   ├── MediaSFU rooms and signaling
│   └── Participant session management
└── Deployment surfaces
    ├── Web hosting (Vercel, Netlify, or similar)
    ├── Apple App Store and Google Play
    └── Desktop installers

VOIP/
├── voip_reactjs/      React.js + TypeScript web client
├── voip_flutter/      Flutter mobile and desktop client
├── voip_rn/           React Native CLI mobile client
├── voip_rn_expo/      Expo-managed React Native client
├── voip_angular/      Angular desktop client project
└── README.md          Root documentation (this file)

Common capabilities represented across the implemented clients include:

• Dialer – E.164-compliant number entry and normalization using MediaSFU dial plan rules.
• MediaSFU room lifecycle – Creation, join, leave, and teardown flows with logging via the shared CallService/callService utilities.
• Call state management – Hooks/providers (React) and ChangeNotifiers (Flutter) that keep the active call, queued calls, and call history in sync.
• Configurable UI – Theme toggles, layout density options, and dashboard widgets tailored to each framework.
• Telemetry hooks – Optional analytics callbacks surfaced through MediaSFU SDK interceptors for live operations teams.

Feature specifics:

• React.js – Visual room dashboards, live call tiles, configuration modals, and history filters. Implementation details live in voip_reactjs/src/components/Calls/CallsPage.tsx and its associated hooks.
• Flutter – Material/Cupertino hybrid UI with dialpad and MediaSFU session widgets. Primary logic resides in lib/pages/calls_page.dart alongside Provider-based state.
• React Native – Shared TypeScript utilities, gesture-friendly controls, and integration with native permissions. Key files include voip_rn/src/components/Calls/CallsPage.tsx and voip_rn/src/services/callService.ts.
• Expo – Tabbed navigation, OTA update support, and an installable web experience. See voip_rn_expo/app/(tabs) and src/services for implementation.

• Git
• Node.js 18 or newer (with npm or Yarn)
• Flutter SDK 3.35.4 or newer (for the Flutter client)
• Android Studio (with Android SDK) and Xcode 15+ for native builds

git clone https://github.com/MediaSFU/VOIP.git
cd VOIP

Install dependencies for the client you want to explore:

• Web: cd voip_reactjs && npm install
• Flutter: cd voip_flutter && flutter pub get
• React Native CLI: cd voip_rn && npm install
• Expo: cd voip_rn_expo && npm install

Follow the secure quick start: configure MediaSFU credentials only in backend/.env, then point the selected client at that backend. Client environment files contain only the public backend URL.

1. Select the target client and start the relevant development server (npm start, flutter run, npx react-native run-android, or npx expo start).
2. Update configuration via the Settings or Config panels to point at your MediaSFU environment.
3. Exercise the dialer, join MediaSFU rooms, and review call history widgets to verify signalling.
4. Use the shared logging utilities (logger.ts, logger.dart) to troubleshoot media events.
5. Run automated checks (npm test, flutter test, or npx tsc --noEmit) before committing changes.

Refer to each sub-project README for signing, store submission, and automation notes.

Each client surfaces:

• Room APIs – Creation, join, update, and teardown via the MediaSFU REST endpoints.
• Participant controls – Mute/unmute, video toggles, and room moderation.
• Telemetry – Optional hooks for streaming call quality metrics to MediaSFU analytics.

For end-to-end service configuration, visit:

• MediaSFU Telephony: https://mediasfu.com/telephony
• MediaSFU Agent Workspace: https://agents.mediasfu.com

• MediaSFU documentation: https://mediasfu.com/docs
• MediaSFU playground: https://agents.mediasfu.com
• Submit product questions at https://mediasfu.com/contact
• GitHub issues are monitored for bug reports and enhancement requests.

1. Fork the repository and create a feature branch.
2. Align with the coding conventions outlined in the sub-project READMEs.
3. Add automated tests where applicable and run platform-specific linters.
4. Submit a pull request describing the change, testing performed, and MediaSFU endpoints touched.

This project is licensed under the MIT License. See LICENSE for details.

Each client is an implementation example, not a substitute for testing your deployment. Run its documented checks and complete a live call with at least two participants on every browser, device, and operating system you plan to support. The Angular desktop directory currently contains a roadmap, not a runnable application. Use one of the implemented clients until that work is complete.