Video Chat

Our video and audio calling functionality is implemented via WebRTC, which is a peer-to-peer communication library, open-source, supported by Google, Apple, and Microsoft, among others.

The flutter webrtc library made it possible for WebRTC protocol to be integrated into our Flutter projects. It works for both iOS and Android, and video calls are even possible from an iOS device to an Android device and vice-versa.

Data Flow Overview

When a user initiates a call, we send that down to Firebase (which is used as the signaling server)
The other users’ devices are observing the Firebase signal and when they retrieve it, they pop up the incoming call screen
When another user answers the call, we signal the operation to Firebase again, which now sends the new signal back to the initial caller and the video / audio call starts

We use Google’s STUN and TURN server for the actual peer-to-peer communication

final Map<String, dynamic> _iceServers = {
  'iceServers': [
    {'url': 'stun:stun.l.google.com:19302'},
    {
      'url': 'turn:95.217.132.49:80?transport=udp',
      'username': 'c38d01c8',
      'credential': 'f7bf2454'
    },
    {
      'url': 'turn:95.217.132.49:80?transport=tcp',
      'username': 'c38d01c8',
      'credential': 'f7bf2454'
    },
  ]
};

If you have your own server, you can update these URLs, or you can simply just continue using these.

Codebase

All the code related to audio video calls lives in lib\ui Among the most important classes, we can list:

1.One on one calls:

ui\videoCall\VideoCallScreen.dart
- Renders the incoming / outgoing calls screen for one on one video calls
ui\videoCall\VideoCallsHandler.dart
- This is the core class managing the one on one video calls, such as initiating a call, accepting a call or hanging up
- It interacts directly with the WebRTC library
- This is the file that you need to modify if you want to use a different backend

ui\voiceCall\VoiceCallScreen.dart
- Renders the incoming / outgoing calls screen for one on one audio calls
ui\voiceCall\VoiceCallsHandler.dart
- This is the core class managing the one on one audio calls, such as initiating a call, accepting a call or hanging up
- It interacts directly with the WebRTC library
- This is the file that you need to modify if you want to use a different backend

2.Group calls:

ui\videoCallsGroupChat\VideoCallsGroupScreen.dart
- Renders the incoming / outgoing calls screen for group video calls
ui\videoCallsGroupChat\GroupVideoCallsHandler.dart
- This is the core class managing the group video calls, such as initiating a call, accepting a call or hanging up
- It interacts directly with the WebRTC library
- This is the file that you need to modify if you want to use a different backend

ui\voiceCallsGroupChat\VoiceCallsGroupScreen.dart
- Renders the incoming / outgoing calls screen for group voice calls
ui\voiceCallsGroupChat\GroupVoiceCallsHandler.dart
- This is the core class managing the group voice calls, such as initiating a call, accepting a call or hanging up
- It interacts directly with the WebRTC library
- This is the file that you need to modify if you want to use a different backend

Listening for incoming calls:

ui\container\ContainerScreen. _listenForCalls()
- This method contains the necessary logic to make firebase our signaling server
- It’s in charge of
  - observing incoming signals
  - sending new call signals and launching the appropriate call screen
- This is the file that you need to modify if you want to use a different backend

Documentation