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.
- 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.
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
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.
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
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:
static String API_KEY = ""; static String SESSION_ID = ""; static String TOKEN = "";
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.
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.