Implementing Video Meets in Flutter using Jitsi Meet

So, in this story, I will show you how to implement video meet like Zoom or Google Meet inside your own Flutter app using a package jitsi_meet.

Without wasting any time, let’s start!

Step 1 — Create a new Flutter project

First, we need to create a simple demo project. For that, simply use flutter create video_demo command, and after it has been created use cd video_demo , code . to open the project in VSCode, my choice of IDE. You can open it in whatever you do code in, also Notepad if you want.

Create a new Flutter project

Open it inside VSCode or any other IDE

Step 2 — Installing Jitsi Meet package

Now, we need to install the jitsi_meet package. For that, simply follow these steps -

1. First in your android/build.gradle file, set dependency of gradle tools to minimum of 3.6.3, like this

dependencies {
      classpath 'com.android.tools.build:gradle:3.6.3' <!-- This -->
      classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
      classpath 'com.google.gms:google-services:4.3.3'
}

2. Then in your android/gradle/wrapper/gradle-wrapper.properties file, set distribution of gradle wrapper to minimum of 5.6.4, like this

distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip

3. Then in your android/app/build.gradle file, add these lines in android tag, to add Java 1.8 compatibility support to your project,

compileSdkVersion 29
<!-- Add the lines below -->
compileOptions {
      sourceCompatibility JavaVersion.VERSION_1_8
      targetCompatibility JavaVersion.VERSION_1_8
}

Also, make sure that your targetSdkVersion & compileSdkVersion are 29 or above. And your minSdkVersion is 23 or above.

4. Then add these two lines in your android/app/src/main/AndroidManifest.xml file. Also, I don’t know why these are added, I am just following what is written on pub.dev. This is what they have to say about it.

Jitsi Meet’s SDK AndroidManifest.xml will conflict with your project, namely the application:label field. To counter that, go into android/app/src/main/AndroidManifest.xml and add the tools library and tools:replace="android:label" to the application tag.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="yourpackage.com"
    xmlns:tools="http://schemas.android.com/tools"> <!-- Add this -->
    <application 
        tools:replace="android:label"  <!-- Add this -->
        android:name="your.application.name"
        android:label="My Application"
        android:icon="@mipmap/ic_launcher">
        ...
    </application>
...
</manifest>

5. Add these proguard support lines too in android/app/build.gradle file.

buildTypes {
      release {
            signingConfig signingConfigs.release
            <!-- Add these lines -->
            minifyEnabled true
            useProguard true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
      }
}

Then add a file in the same directory called proguard-rules.pro. See the example app’s proguard-rules.pro file to know what to paste in. (Copied exactly from pub.dev)

Also don’t forget to add some rules if you have Firebase in your project, as proguard needs to exclude Firebase core files. Copy/paste the following —

## Flutter wrapper
-keep class io.flutter.app.** { *; }
-keep class io.flutter.plugin.**  { *; }
-keep class io.flutter.util.**  { *; }
-keep class io.flutter.view.**  { *; }
-keep class io.flutter.**  { *; }
-keep class io.flutter.plugins.**  { *; }
-dontwarn io.flutter.embedding.**-keepattributes Signature
-keepattributes *Annotation*
-keepattributes EnclosingMethod
-keepattributes InnerClasses-keep class com.lailen.edufix.viewholder.** {
    *;
}-keepclassmembers class com.lailen.edufix.models.** {
    *;
}

More details here.

This step is important, and failing to do this will result in errors, so beware and be alert. Also most of the errors are self-explainable, and also use

flutter pub cache repair
flutter clean

flutter run
to combat gradle cache and other errors.

Final proguard-rules.pro file —

Congratulations, if you have successfully installed the package, and your app is running, otherwise good luck from my side, see you in another article.

Step 3 — Designing a page for Joining Meet

Now we will be designing a page for joining the Meet. I’ m going to use Figma for this.

Final UI Design

You can check this design here on Figma.

Step 4 — Coding

Now we will be actually converting this design into an app. For that, I will be adding the following code into a new file video_meet.dart which also includes the code from Jitsi Meet pkg.

Full code for the page

Though this code is very simple, you may need to understand how Jitsi works. In my code there is a simple _joinMeeting() function which handles joining a meet. Now when we have joined the meet you can simply share the invite with others, and they can also join. But the problem with this is, that they have to join from the Jitsi Meet app, or Web Browser. For them to be able to join from your in app, you actually need to create a join button which asks for room name, from the user as it is the only thing required to join/create a meet.

In this example, I have also used Jitsi servers which have a limit of 25 monthly users, so if you want you can host Jitsi on your own server following this article.

Conclusion

So, now you have a working meet app, in which users can join/create meetings, share their screens, create breakout rooms & more! Though this has some caveats, I believe this is actually the best way to create/handle meetings in Flutter right now, as this is easy, offers many features & can be scaled easily by shifting to your own server.

I actually developed this for an internship I did with Raahee. They needed a video call method for therapists, to communicate with their clients/pateints.

If this story helped you, you can follow me on GitHub, to access more such codes, and examples. I also post such articles on my blog; you can check it out too.

Thanks for reading, and Happy Fluttering!

codenameakshay - Overview

codenameakshay’s Blog