Making Video Calls Using Vonage Video and Flutter
Flutter is gaining more and more popularity, so we decided to build a simple application that allows making video calls between two devices. Two technologies used to build the app are Flutter and Vonage Video SDKs. Let’s quickly recap these technologies:
- Flutter — open-source UI software development kit used to develop cross-platform applications for Android, iOS, Linux, and Mac. The main programming language is Dart.
- Vonage Video — used to build video calls between various devices. The programming languages used are Kotlin for the Android platform and Swift for the iOS platform.
This application is a Flutter equivalent of the Basic-Video-Chat application ( Basic-Video-Chat Android / Basic-Video-Chat iOS). Here are the main features of the application:
- Connect to a Vonage Video session
- Publish an audio-video stream to the session
- Subscribe to another client’s audio-video stream
NOTE: The application source code is available on GitHub.
Flutter is the main technology here. It is a foundation used to build a mobile application that runs on Android and iOS. It will be responsible for managing and displaying the UI, and it will contain the application logic. This way application logic is only written once for both platforms.
Under the hood, this Flutter application will use Android Vonage Video SDK and iOS Vonage Video SDK (via Android/iOS native projects):
Platform (Android, iOS) native code communicates with Flutter by using Flutter MethodChannel, that uses method calls. MethodChannel serves as a bridge to send messages between Flutter and native code (added to the native Android project and native iOS project). This allows us to log-in the user and set up the video session to make a video call:
Flutter can send messages to the native (Android / iOS) part of the app and the native part of the app can send a message back to Flutter. Flutter calls the initSession method and passes the apiKey, sessionId, and token to native code to start a Vonage Video session. The native code will inform the Flutter part of the app about a successful login (or error) and the Flutter-side code will update the UI.
NOTE: A Flutter app can be packaged as an Android or iOS application, but never both at the same time. When the target platform is set to Android, MethodChannel communicates with Android native app code. When the target platform is set to iOS, then MethodChannel communicates with iOS native app code.
To run the application you will have to install Flutter. This varies from platform to platform, as you can see in the detailed instructions.
NOTE: Make sure to run
flutter doctorto verify your local flutter setup.
To log into the Vonage Video session, you will need a Vonage Video account and to generate initSession, apiKey, and sessionId. You can get these values in the Vonage Video Dashboard. Now open the main.dart file and use those values in the corresponding variables:
Launch the mobile app to start the video call.
NOTE: You can use Developer playground to connect to the same session as the mobile device running the Flutter app.
Summary
There are still a few drawbacks, but the overall integration of Flutter and Vonage Video is quite smooth. Even without a native Flutter package, it is possible to quickly create build a full-fledged Flutter app that utilizes Vonage Video mobile SDKs under the hood and runs on Android and iOS devices.
Originally published at https://learn.vonage.com/blog/2021/07/06/making-video-calls-using-vonage-video-and-flutter/
