Video Calling becomes a most demanding feature in many social media apps like WhatsApp, Instagram, Facebook, etc. Not only this but also there are some other applications available for providing only this feature to connect people all over the world with each other like Duo. Hence, this gives an idea to us about the importance of video calling. So in this article, we will develop our own Video Calling application using Jitsi. Now, without wasting further time let’s look at the implementation of this Video Calling application in Android.
What we are going to build in this article?
In this article, we will develop a sample application that will contain an EditText and a Button in its MainActivity. Using EditText we will name a room for us to video calling and after that, by clicking the Button we will join that room and a new activity will open by the name of our created room, and finally, by using this activity we will do video calling. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation of Video Calling Application using Jitsi Meet SDK
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language. Select the minimum SDK 21 or higher.
Step 2: Add jitsi maven repository
Now, go to the root build.gradle(Project) and add these lines at the end of repositories below the jcenter() inside the allprojects{ } section.
allprojects {
repositories {
…
maven { url “https://github.com/jitsi/jitsi-maven-repository/raw/master/releases” }
}
}
Step 3: Add dependency
Now, Navigate to the Gradle Scripts > build.gradle(Module:app) add the below dependency in the dependencies section.
implementation(‘org.jitsi.react:jitsi-meet-sdk:2.9.0’) { transitive = true }
Step 4: Add java 1.8 compatibility support in build.gradle(Module:app)
Now, to add java 1.8 compatibility support to the project paste these lines below buildTypes {} inside the android { } tag if already not present there.
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
Step 5: Add proguard rules
Now, we will add some proguard rules, so go to the Gradle Scripts > proguard-rules.pro and paste the following lines.
Reference: https://github.com/jitsi/jitsi-meet/blob/master/android/app/proguard-rules.pro
# Add project specific ProGuard rules here.
# By default, the flags in this file are appended to flags specified
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
# You can edit the include path and order by changing the proguardFiles
# directive in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html
# Add any project specific keep options here:
# React Native
# Keep our interfaces so they can be used by other ProGuard rules.
# See http://sourceforge.net/p/proguard/bugs/466/
-keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
-keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
-keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
# Do not strip any method/class that is annotated with @DoNotStrip
-keep @com.facebook.proguard.annotations.DoNotStrip class *
-keep @com.facebook.common.internal.DoNotStrip class *
-keepclassmembers class * {
@com.facebook.proguard.annotations.DoNotStrip *;
@com.facebook.common.internal.DoNotStrip *;
}
-keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
void set*(***);
*** get*();
}
-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
-keep class * extends com.facebook.react.bridge.NativeModule { *; }
-keepclassmembers,includedescriptorclasses class * { native <methods>; }
-keepclassmembers class * { @com.facebook.react.uimanager.UIProp <fields>; }
-keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp <methods>; }
-keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; }
-dontwarn com.facebook.react.**
-keep,includedescriptorclasses class com.facebook.react.bridge.** { *; }
# okhttp
-keepattributes Signature
-keepattributes *Annotation*
-keep class okhttp3.** { *; }
-keep interface okhttp3.** { *; }
-dontwarn okhttp3.**
# okio
-keep class sun.misc.Unsafe { *; }
-dontwarn java.nio.file.*
-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
-keep class okio.** { *; }
-dontwarn okio.**
# WebRTC
-keep class org.webrtc.** { *; }
-dontwarn org.chromium.build.BuildHooksAndroid
# Jisti Meet SDK
-keep class org.jitsi.meet.** { *; }
-keep class org.jitsi.meet.sdk.** { *; }
# We added the following when we switched minifyEnabled on. Probably because we
# ran the app and hit problems...
-keep class com.facebook.react.bridge.CatalystInstanceImpl { *; }
-keep class com.facebook.react.bridge.ExecutorToken { *; }
-keep class com.facebook.react.bridge.JavaScriptExecutor { *; }
-keep class com.facebook.react.bridge.ModuleRegistryHolder { *; }
-keep class com.facebook.react.bridge.ReadableType { *; }
-keep class com.facebook.react.bridge.queue.NativeRunnable { *; }
-keep class com.facebook.react.devsupport.** { *; }
-dontwarn com.facebook.react.devsupport.**
-dontwarn com.google.appengine.**
-dontwarn com.squareup.okhttp.**
-dontwarn javax.servlet.**
# ^^^ We added the above when we switched minifyEnabled on.
# Rule to avoid build errors related to SVGs.
-keep public class com.horcrux.svg.** {*;}
Note: sun.misc.Unsafe: This package was removed in Java 9 and later versions, it is considered as a low-level memory access package, it is best to avoid it and use the more reliable java.util.concurrent package for synchronization.
Finally, sync your project and now we have everything which we will need during implementation so now, move towards its implementation.
Step 6: Working with the activity_main.xml file
Now it’s time to design the layout of the application. So for that go-to the app >res > layout > activity_main.xml and paste the below-written code in the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" tools:context=".MainActivity"> <!--EditText for taking input room name from user--> <EditText android:id="@+id/conferenceName" android:layout_width="match_parent" android:layout_height="52dp" android:layout_margin="12dp" android:hint="Enter room name" /> <!--Button for creating a room for video calling by it's clicking event--> <!--When clicking event occur on button then onButtonClick method will call --> <Button android:layout_width="match_parent" android:layout_height="52dp" android:layout_margin="12dp" android:background="#0F9D58" android:onClick="onButtonClick" android:text="Join" android:textColor="#FFFFFF" /></LinearLayout> |
Step 7: Working with the MainActivity.java file
Go to the app > java > package name > MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;import android.view.View;import android.widget.EditText;import androidx.appcompat.app.AppCompatActivity;import org.jitsi.meet.sdk.JitsiMeetActivity;import org.jitsi.meet.sdk.JitsiMeetConferenceOptions;import java.net.MalformedURLException;import java.net.URL;public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // using try catch block to handle exceptions try { // object creation of JitsiMeetConferenceOptions // class by the name of options JitsiMeetConferenceOptions options = new JitsiMeetConferenceOptions.Builder() .setServerURL(new URL("")) .setWelcomePageEnabled(false) .build(); } catch (MalformedURLException e) { e.printStackTrace(); } } // we have declared the name of onButtonClick() method // in our xml file now we are going to define it. public void onButtonClick(View v) { // initialize editText with method findViewById() // here editText will hold the name of room which is given by user EditText editText = findViewById(R.id.conferenceName); // store the string input by user in editText in // an local variable named text of string type String text = editText.getText().toString(); // if user has typed some text in // EditText then only room will create if (text.length() > 0) { // creating a room using JitsiMeetConferenceOptions class // here .setRoom() method will set the text in room name // here launch method with launch a new room to user where // they can invite others too. JitsiMeetConferenceOptions options = new JitsiMeetConferenceOptions.Builder() .setRoom(text) .build(); JitsiMeetActivity.launch(this, options); } }} |
That’s all, now the video calling application is ready to install on the device. Here is what the output of the application looks like.
Output: Run on Physical Device
Github Link: For further help go through this repository.
