Skip to content

TBR-Group-software/flutter_callkit_app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

75 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

About the project

The purpose of the project is to create a telecommunication app where users can make video calls to each other. The project consists of 2 parts: the mobile app and the backend.

The mobile app was built with Flutter and works both on Android and iOS. The backend was built with Firebase and uses Cloud Functions written in TypeScript.

Sign in Phone call Video call

Features

  • Video calls.
  • Receive calls in all app states: foreground, background, terminated.
  • iOS VoIP push notifications.
  • Android push notifications.
  • Phone authentication.

Built with

  • Flutter — cross-platform UI framework for building beautiful apps with a signe code base.
  • OneSignal — push notifications service.
  • Agora — real-time video calls provider.
  • Firebase — backend as a service.
  • Cloud Functions — serverless functions.
  • ConnectionService — Android API for managing phone calls.
  • CallKit — iOS API for managing phone calls.

How it works

App states

The main difference between the general app and the telecommunication app is that the telecommunication app should work in the background and even when the app is terminated. The user should be able to receive a call and answer it in any app state.

There are 3 possible app states:

  • Foreground — the app is opened and active. Flutter code is running.
  • Background — the app is opened but not active. Flutter code is running but the user doesn't see the app UI.
  • Terminated — the app is not opened. Flutter code is not running.

Notifications

To receive a phone call the app uses push notifications. For Android the OneSignal Android Notification Service Extension is implemented to receive push notifications. For iOS the VoIP notifications are used. Both these methods allow to receive push notifications in all app states.

CallKit

To show the incoming call after receiving a push notification the app uses CallKit for iOS and ConnectionService for Android. It allows to show the incoming call screen with answer and decline options for user. For Android the custom implementation for ConnectionService and Connection are written. On iOS the flutter_callkit_voximplant package is used to integrate CallKit.

Samsung phone call IPhone phone call

Launch the app

When the user answered a call the video call should start. If the app is in the background or terminated state then it should be returned to foreground so user can see the video call screen. If the app is already in foreground it can just show the video call screen.

App scheme

Video calls

To launch a video call between two users the app uses Agora as a real-time video calls provider. Joining a video call is based on the token authentication.

Push notifications service

OneSignal is used to send push and VoIP notifications to the app. Under the hood it uses Firebase Cloud Messaging for Android and APNs for iOS. Regarding the OneSignal documentation the iOS VoIP setup requires to create a new OneSignal app. So in the project implementation 2 OneSignal apps are used: one for Android push notifications and one for iOS VoIP notifications.

Cloud Functions

The backend is built with Firebase and uses Cloud Functions written in TypeScript. There are 2 main features that backend provides:

  1. Send push notifications to the app.
  2. Generate Agora tokens to join a video call.

It uses Secret Manager to store the project secrets such as:

  • Agora app ID and app certificate.
  • OneSignal 1st app ID and REST API key (for general push notifications).
  • OneSignal 2nd app ID and REST API key (for VoIP notifications).

Getting started

Step 1:

Download or clone this repo by using the link below:

https://github.com/TBR-Group-software/flutter_callkit_app.git

Step 2:

Follow the Flutter app setup and Firebase setup.

License

This project is licensed under the GNU GPL v3 License - see the LICENSE.md file for details.