• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Dart

      • Home
      • Blog
      • Dart
      • How Incoming Video Call Notification works in Flutter
      How Video Call Works In Flutter

      How Incoming Video Call Notification works in Flutter

      • Posted by Shivam Srivastava
      • Categories Dart, Developers, Flutter, Flutter Mobile
      • Date April 15, 2022
      • Comments 0 comment
      Spread the love
      Contents hide
      1 Introduction
      2 VoIP App usage scenario
      3 Video call in Android using Flutter
      4 Video call in iOS using Flutter
      4.1 Call Connected Successfully !
      5 Best Flutter plugins for Video call in Flutter
      5.1 Please login to bookmark

      Introduction

      How What’s App call works and How to implement flutter video call. It is a pretty complicated and tedious task for a junior developer to implement it for the first time. Let us see how well this blog will explain the implementation of Voice-over-Internet Protocol (VoIP) in Android and iOS using Flutter. The basic flow of flutter VoIP push notification is shown in the image below:

      Video Call Notification In Flutter
      Video call Notification in Flutter

      VoIP Services in Flutter app can be divided into 2 parts:

      1. Implement SDK to add VoIP feature in app. Any one of below can be used
        1. WEBRTC in Flutter, to add real-time communication capabilities to your application.
        2. AGORA Flutter SDK,  allow you to simply integrate Agora Voice and Video Calling.
      2. Push Notification for app user for Accept or Reject call.
        1. Firebase Cloud messaging, Send notification to Android and iOS
        2. Apple Push Notification service, Send notification to iOS

      We need APNs for iOS when Firebase can do the same thing. Firebase cannot be used for iOS for video and voice call services. That will be explained below

      VoIP App usage scenario

      Sam (User A) is far away from Emma (User B). They need an app where Sam can video calls Emma anytime. Both users have different mobile platforms, Sam has an Android phone, and Emma has iOS. How can we make an app to support flutter video call across platforms?

      Video call in Android using Flutter

      Create an app for video call in flutter for android; these essential SDK and accounts are required.

      1. Agora account and SDK is required to provide video and voice call service in flutter.
      2. Firebase account required to send Cloud Messaging to Android phone in form of push notification.
      3. Own Server, to handle notification, REST APIs and unique communication channel logic.
      4. Flutter Project with Android app configured with Firebase. Create a new flutter project by following this tutorial.

      The basic flow of Flutter video call in Android is explained and given below.

      Video Call Notification Works In Android
      Video call Notification works in Android
      1. User B calls to User A, this trigger a Rest API to Server and informed a call is placed.
      2. The server validates the above request and retrieves the Firebase Device Token of User B. Using this token server, send cloud messaging to User A in the background on an Android device. Payload data for video call notification should be as mentioned below.
          data: {
              session_id: "abc1234567890",  // Server record id about communication b/w users
              caller_name: "User A", // Any String to show Caller's name
              caller_id: "123456", // Callers id or phone number
              type: "VOICE_CALL", // Type of call to handle in dart code
              click_action: "FLUTTER_NOTIFICATION_CLICK", // to listen click on notification in flutter
          },
          android:{
              restricted_package_name : "com.navoki.voip", // app package name
          }

      3. It is necessary to send a notification in the above format so that the app can receive it in the background by the app service, and payload data should be processed by our code running in that service.

      4. Show incoming call notification to User A to Accept or Reject the call. Custom notification with the button is not supported in flutter_local_notifications code, so an Android native code notification messaging is required. A new package can be used connectycube_flutter_call_kit for Android.

      Flutter Android Notification Preview
      flutter Android notification preview

      5. If User A was already on another call, ConnectionService will inform in code about this and app should not proceed further to next step, by ending the User A call.

      6. Using ConnectionService is optional in Android, so developer can skip if app requirement demands but for best practices implement it.

      6. If call ACCEPTED, app call ConnectionService class in Android API to inform the Android device that User A is on call. So if another call comes , VoIP or network call from someone else, they will be informed as “User A on another call” by Android device.

      7. Flutter app is launched, and the flutter app receives notification payload data. This information is sent to Server w.r.t session_id of the call. The server responds with a private channel_id of Agora SDK used in the app to connect both end-users.

      8. Ask Camera and Audio permission from user.

      8. Use this channel_id to connect as voice or video call and shown in form of UI.

      Video call in iOS using Flutter

      To create a app for video call in flutter for iOS, these essentials SDK and accounts are required.

      1. Agora account and SDK is required to provide video and voice call service.
      2. Apple account and APNs certificate required to send messaging to iOS phone in form of VoIP notification.
      3. Own Server, to handle notification, REST APIs and unique communication channel logic.
      4. Flutter Project with iOS app configured with Firebase. Create a new flutter project by following this tutorial.

      The basic flow of Flutter video call in iOS is explained and given below.

      Video Call Notification Flow In Ios
      Video call Notification flow in iOS
      1. User A calls to User B, this trigger a Rest API to Server and informed a call is placed.
      2. Server validates above request and retrieve the iPhone’s UUID of User B.
      3. Using UUID, a special VoIP push notification is sent using Apple Push Notification. This special message doesn’t invoke any notification instead gives a small window of time to run a code in background. Payload data for video call notification should be as mentioned below
        "aps": {
              "alert": {
                  "uuid": "123", // Receiver's UUID
                  "incoming_caller_id": "123456",   // Callers id or phone number 
                  "incoming_caller_name": "User A", // Any String to show Caller's name
                  "session_id": "abc1234567890",  // Server record id about communication b/w users
                  "type": "VIDEO_CALL", // type of call to handle in dart code
                  "click_action": "FLUTTER_NOTIFICATION_CLICK",
              },
              'content-available': 1   // IMPORTANT !!!
        }

      4. In iOS, it is mandatory to use CallKit, if app uses flutter VoIP push notification. CallKit code invokes to inform iOS that User is on a ongoing call, almost similar to Android’s ConnectionService.

      5. Show iOS native calling UI to Accept or Reject call.

      Flutter Ios Callkit Screens Preview
      flutter iOS CallKit Screens preview

      6. If call ACCEPTED, app call CallKit class in iOS informs the iOS device that User B is on call. So if another call comes , voip or network call from someone else they, will be informed as “User A on another call” by iOS device.

      7. Flutter app is launched, and the flutter app receives notification payload data. This information is sent to Server w.r.t session_id of the call. The server responds with a private channel_id of VoIP SDK used in the app to connect both end-users.

      8. Ask Camera and Audio permission from user.

      8. Use this channel_id to connect as voice or video call and shown in form of UI.

      Call Connected Successfully !

      Flutter Video Call App
      flutter video call app

      Best Flutter plugins for Video call in Flutter

      There are many packages available in pub.dev website. I can suggest these 2 packages which worked for me.

      1. connectycube_flutter_call_kit
      2. flutter_voip_kit
      3. flutter_callkit_incoming
      4. flutter_ios_voip_kit 

      Stuck in Flutter Code? Ask you queries to Flutter Mentor on our Discord Channel.

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:agora flutter video call, flutter firebase video call, flutter incoming call notification, flutter ios callkit, flutter voip, flutter voip push notification, video call in flutter

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      How to Install Flutter on Windows, macOS and Ubuntu
      April 15, 2022

      Next post

      [SOLVED] Flutter Web CORS Error
      May 4, 2022

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How-to-Create-Flutter-Desktop-Navoki-Blog
      How to Install Flutter on Windows, macOS and Ubuntu
      11 April, 2022

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now

      We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy