{"id":3250,"date":"2024-01-18T10:01:35","date_gmt":"2024-01-18T04:31:35","guid":{"rendered":"https:\/\/www.enablex.io\/insights\/?p=3250"},"modified":"2025-07-24T14:22:28","modified_gmt":"2025-07-24T08:52:28","slug":"build-native-video-calling-app-with-ringer","status":"publish","type":"post","link":"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/","title":{"rendered":"Build Native Mobile Video Calling Applications with Ringer UI"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Build Native Mobile Video Applications with Ringer UI<\/strong><\/h2>\n\n\n\n<p>Navigating the world of app creation? Want to enhance your user experience with seamless video call notifications? Let&#8217;s dive into how the EnableX tool makes it easier than ever. Today, let&#8217;s learn how you can build a video calling application with <a href=\"https:\/\/www.enablex.io\/cpaas\/video-api\">EnableX Video API <\/a>and our UI Kit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Why Use EnableX for Video Call Notifications?<\/strong><\/h3>\n\n\n\n<p>EnableX offers an effortless solution for Mobile developers. With the EnableX Calling UI Framework, adding in-app calling becomes a breeze. Whether it&#8217;s voice or video calling, you can integrate this feature without breaking a sweat, all thanks to the EnableX UI Kit Framework.<\/p>\n\n\n\n<p><strong>Prerequisites<\/strong><\/p>\n\n\n\n<p>Before embarking on this journey of video call notification integration, there are a few prerequisites to ensure a seamless experience:<\/p>\n\n\n\n<ul>\n<li><strong>EnableX developer account:<\/strong> To harness the power of EnableX\u2019s video solutions, you will need a developer account, which you can create for free at enablex.io.<\/li>\n\n\n\n<li><strong>Background Mode VoIP Feature:<\/strong> Your iOS application must have the VoIP (Voice over Internet Protocol) feature enabled in background mode. This is pivotal for creating a seamless and uninterrupted user experience.<\/li>\n\n\n\n<li><strong>Custom Notification Service:<\/strong> You need to integrate your very own Notification Service. This step is necessary as EnableX doesn&#8217;t provide a built-in notification service.<\/li>\n\n\n\n<li><strong>Fundamentals of Tech:<\/strong> A basic understanding of mobile development either native or hybrid Typescript, Native Wind and Node.js will be your allies in this endeavour.<\/li>\n\n\n\n<li><strong>External library:<\/strong> Firebase or any third-party library for push notification Service.<\/li>\n\n\n\n<li><strong>IDE Familiarity:<\/strong>An integrated development environment (IDE) that supports your development environment like Android Studio\/Xcode is recommended.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Native Video Calling App Setup<\/strong><\/h3>\n\n\n\n<p>Develop your application using the chosen language and according to your specific development requirements.<\/p>\n\n\n\n<p>To develop the native applications (Android or IOS), you must have the related SDK (Android SDK or iOS SDK), Android Studio IDE, and Java SE Development Kit (JDK). Detailed setup instructions can be found in the official documentation for <a href=\"https:\/\/developer.android.com\/design-for-safety\/privacy-sandbox\/setup\">Android development<\/a> and <a href=\"https:\/\/developer.apple.com\/tutorials\/app-dev-training\/\">iOS Development<\/a>.<\/p>\n\n\n\n<p><strong>Create an account on the EnableX Platform\u202f<\/strong><\/p>\n\n\n\n<ul>\n<li>Visit the EnableX portal <a href=\"https:\/\/portal.enablex.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/portal.enablex.io<\/a>.&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"940\" height=\"390\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-6.png\" alt=\"\" class=\"wp-image-3252\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-6.png 940w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-6-300x124.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-6-768x319.png 768w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/figure><\/div>\n\n\n<p><em>EnableX Landing <\/em><\/p>\n\n\n\n<ul>\n<li>Click on <strong>Try For Free<\/strong>.&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"661\" height=\"783\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-7.png\" alt=\"\" class=\"wp-image-3253\" style=\"aspect-ratio:0.8441890166028098;width:484px;height:auto\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-7.png 661w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-7-253x300.png 253w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/figure><\/div>\n\n\n<p><em>EnableX Signup page&nbsp;<\/em><\/p>\n\n\n\n<ul>\n<li><strong>Fill in the required details:<\/strong> Name, Phone number, Company, email address and check the box for Terms of Service and Privacy Policy.&nbsp;<\/li>\n\n\n\n<li>Click on <strong>Create Your Account<\/strong>.&nbsp;<\/li>\n\n\n\n<li>A verification email will be sent to the given address. Verify your account by clicking on the link in this email.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><strong>Create a video project\u202f<\/strong><\/p>\n\n\n\n<p>To begin developing a video application with EnableX <a href=\"https:\/\/www.enablex.io\/cpaas\/video-api?utm_source=insights&amp;utm_medium=Blog&amp;utm_campaign=organic\">Video Server APIs<\/a>, the first step is to create a project on the platform. Follow these steps to create a project:&nbsp;<\/p>\n\n\n\n<ul>\n<li>Login to the EnableX Portal.&nbsp;&nbsp;<\/li>\n\n\n\n<li>After successfully logging in, users are redirected to <strong>My Dashboard<\/strong>. From there, follow these steps to create a new project:&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"940\" height=\"706\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-8.png\" alt=\"\" class=\"wp-image-3254\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-8.png 940w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-8-300x225.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-8-768x577.png 768w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p><em>EnableX My Dashboard<\/em><\/p>\n\n\n\n<ul>\n<li>Navigate <strong>My Projects<\/strong> section on the page.&nbsp;<\/li>\n\n\n\n<li>Click on <strong>CREATE PROJECT<\/strong> button. This opens <strong>Create Project<\/strong> page.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"770\" height=\"550\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-9.png\" alt=\"Create video calling app\" class=\"wp-image-3255\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-9.png 770w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-9-300x214.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-9-768x549.png 768w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p><em>EnableX Create new Project&nbsp;<\/em><\/p>\n\n\n\n<ul>\n<li>Provide the necessary information for your project, including the Project Name, Application, and Project Description.&nbsp;<\/li>\n\n\n\n<li>Navigate the <strong>Channels<\/strong> section and enable video services for your project.&nbsp;<\/li>\n\n\n\n<li>Click on <strong>CREATE PROJECT<\/strong> button to create your project.&nbsp;<\/li>\n\n\n\n<li>The project has been successfully created and a confirmation popup will appear.&nbsp;&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"585\" height=\"275\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-10.png\" alt=\"Free trial for video calling app\" class=\"wp-image-3256\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-10.png 585w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-10-300x141.png 300w\" sizes=\"(max-width: 585px) 100vw, 585px\" \/><\/figure><\/div>\n\n\n<p><em>Project creation Confirmation&nbsp;<\/em><\/p>\n\n\n\n<ul>\n<li>In the pop-up dialog, click on&nbsp; <strong>GET STARTED<\/strong> button.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"849\" height=\"310\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-11.png\" alt=\"no code video calling app\" class=\"wp-image-3257\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-11.png 849w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-11-300x110.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-11-768x280.png 768w\" sizes=\"(max-width: 849px) 100vw, 849px\" \/><\/figure><\/div>\n\n\n<p><em>Methods of Video Development&nbsp;<\/em><\/p>\n\n\n\n<ul>\n<li>Select the development method that best fits your preferences and requirements&nbsp;<\/li>\n\n\n\n<li>Select <strong>&lt;I Love To Code&gt;<\/strong> option from the available choices and click on <strong>Start With APIs<\/strong>.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>This will give you access to the necessary APIs and SDKs for your project, enabling you to begin coding and developing your application with EnableX&#8217;s extensive tools and resources.&nbsp;<\/p>\n\n\n\n<p><strong>Get App ID and App Key\u202f<\/strong><\/p>\n\n\n\n<p>Before you embark on your application development journey with the EnableX platform, it is essential to obtain an API Credential. This credential includes an App ID and App Key, which serve as the username and password, respectively, in the HTTP Base Authentication Request Header of our <a href=\"https:\/\/www.enablex.io\/cpaas\/video-api?utm_source=insights&amp;utm_medium=Blog&amp;utm_campaign=organic\">Video Server API Call<\/a>.&nbsp;&nbsp;<\/p>\n\n\n\n<p>When you create a project, the API Access Credentials are sent to you via email.<\/p>\n\n\n\n<p><strong>Note:<\/strong> Make sure that you use the <em>App ID<\/em> as the <em>username<\/em> and the <em>App Key<\/em> as the <em>password<\/em> in the HTTP Base Authentication Request Header.&nbsp;<\/p>\n\n\n\n<p><strong>Create Virtual rooms and Generate Token<\/strong>&nbsp;<\/p>\n\n\n\n<p><strong>Create Room<\/strong>&nbsp;<\/p>\n\n\n\n<p>To create a room, make an <strong>HTTP POST<\/strong> request to the following API route: <a href=\"https:\/\/api.enablex.io\/video\/v2\/rooms\">https:\/\/api.enablex.io\/video\/v2\/rooms<\/a>. You need to include the necessary parameters and values in the request body, which should be in JSON format. For example:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>{&nbsp;\n\n\u202f \"name\": \"Topic or Room Title\",&nbsp;\n\n\u202f \"owner_ref\": \"xyz\",&nbsp;\n\n\u202f \"settings\": {&nbsp;\n\n\u202f \u202f \"description\": \"Descriptive text\",&nbsp;\n\n\u202f \u202f \"mode\": \"group\",&nbsp;\n\n\u202f \u202f \"scheduled\": false,&nbsp;\n\n\u202f \u202f \"adhoc\": false,&nbsp;\n\n\u202f \u202f \"duration\": 30,&nbsp;\n\n\u202f \u202f \u2026\u2026\u2026.&nbsp;\n\n&nbsp;&nbsp;&nbsp; \u2026\u2026..&nbsp;\n\n\u202f \u202f&nbsp;\n\n\u202f \u202f \"role_based_recording\": {&nbsp;\n\n\u202f \u202f \u202f \"moderator\": \"audiovideo\",&nbsp;\n\n\u202f \u202f \u202f \"participant\": \"audio\"&nbsp;\n\n\u202f \u202f },&nbsp;\n\n\u202f \u202f \"live_recording\": {&nbsp;\n\n\u202f \u202f \u202f \"auto_recording\": true,&nbsp;\n\n\u202f \u202f \u202f \"url\": \"https:\/\/your-custom-view-url\"&nbsp;\n\n\u202f \u202f }&nbsp;\n\n\u202f },&nbsp;\n\n\u202f \"sip\": {&nbsp;\n\n\u202f \u202f \"enabled\": false&nbsp;\n\n\u202f },&nbsp;\n\n\u202f \"data\": {&nbsp;\n\n\u202f \u202f \"custom_key\": \"\"&nbsp;\n\n\u202f }&nbsp;\n\n}<\/code><\/pre>\n\n\n\n<p>&nbsp;To know more about Create Rooms, please read <a href=\"https:\/\/www.enablex.io\/developer\/video-api\/server-api\/rooms-route\/#create-room\">Create Room to carry out RTC Session <\/a>.&nbsp;<\/p>\n\n\n\n<p><strong>Generate Token<\/strong>&nbsp;<\/p>\n\n\n\n<p>To create a token for joining an RTC session on the EnableX platform, make a POST request to the API route: <a href=\"https:\/\/api.enablex.io\/v2\/rooms\/%7broom-id%7d\/tokens\">https:\/\/api.enablex.io\/v2\/rooms\/{room-id}\/tokens<\/a> where {room-id} is the ID of the room you want to join. For example:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>POST https:\/\/api.enablex.io\/video\/v2\/rooms\/{room_id}\/tokens&nbsp;\n\nAuthorization: Basic XXXXXXX&nbsp;\n\nContent-Type: application\/json&nbsp;\n\n{&nbsp;\n\n\u202f \u202f \u202f\"name\": \"User Name\",&nbsp;\n\n\u202f \u202f \u202f\"role\": \"participant\",&nbsp;\n\n\u202f \u202f \u202f\"user_ref\": \"XXX\",&nbsp;\n\n\u202f \u202f \u202f\"data\": {&nbsp;\n\n\u202f \u202f \u202f \u202f \"custom_key\": \"String\",&nbsp;\n\n\u202f \u202f \"any_key\": \"String\"&nbsp;\n\n\u202f \u202f \u202f}&nbsp;\n\n}<\/code><\/pre>\n\n\n\n<p>Upon successful creation, the API will respond with a JSON object containing the result and the generated token (<strong><em>JWT_WEB_TOKEN<\/em><\/strong>).&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>{&nbsp;\n\n\u202f \u202f \u202f\"result\": 0,&nbsp;&nbsp;\n\n\u202f \u202f \u202f\"token\": \"JWT_WEB_TOKEN\"&nbsp;\n\n\u202f}<\/code><\/pre>\n\n\n\n<p>To know more about Token, please read <a href=\"https:\/\/www.enablex.io\/developer\/video-api\/server-api\/rooms-route\/#create-token\" target=\"_blank\" rel=\"noreferrer noopener\">Create Token to join a Room<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Creating a Firebase Project<\/strong><\/h3>\n\n\n\n<p>To make the most of cloud messaging in our app, let&#8217;s begin by setting up a new project on Firebase. Visit <a href=\"https:\/\/console.firebase.google.com\/u\/0\/?pli=1\">console.firebase.google.com<\/a>, use your Google details to log in, and kick off the project creation. Choose a unique name for your project, follow the step-by-step instructions, and wrap up the setup phase.<\/p>\n\n\n\n<p>With this done, we are all set to delve into crafting our application.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Develop Your Application in the Chosen Language to Meet Your Requirements<\/strong><\/h4>\n\n\n\n<p>Once you have created a video project with the EnableX Platform and established a virtual video meeting room, the next step is to download and integrate the required SDKs and dependencies into your project.<strong><\/strong><\/p>\n\n\n\n<p><strong>Download SDK and Install dependencies and third-party libraries in the project<\/strong><\/p>\n\n\n\n<ul>\n<li>Android SDK and iOS SDK- (As per development needs)<\/li>\n\n\n\n<li>Android UI Kit and IOS UI Kit- (As per development needs)<\/li>\n\n\n\n<li>Android\/iOS native- here users need to integrate push notification service either through firebase or APNS (for iOS) &#8211; (To receive VOIP (Voice Over Internet Protocol) notification service as per development needs)<\/li>\n\n\n\n<li>Android native-call kit &#8211; for using Android\u2019s native Caller UI<\/li>\n\n\n\n<li>iOS native-call kit &#8211; for using iOS\u2019s native Caller UI<\/li>\n\n\n\n<li>&nbsp;Users need to initiate the iOS \/Android call kit (based on service) after receiving the notifications.<\/li>\n<\/ul>\n\n\n\n<p><strong>Create Android APP and Install Depended call kit<\/strong><\/p>\n\n\n\n<p>Once you have created a video project with the EnableX Platform and established a virtual video meeting room, the next step is to integrate the Android UI Kit into your project. Following are the steps:&nbsp;<\/p>\n\n\n\n<ul>\n<li>Download the latest <strong>Android SDK<\/strong> (AAR file)&nbsp;<\/li>\n\n\n\n<li>Download the Latest <strong>Android UI Kit<\/strong> (AAR file)&nbsp;<\/li>\n\n\n\n<li>Add downloaded AAR files to the project\u2019s <strong><em>lib<\/em><\/strong> folder&nbsp;<\/li>\n\n\n\n<li>Modify Your Project-Level <strong><em>Build.gradle<\/em><\/strong> File. Follow these steps:&nbsp;<ul><li>Navigate to your project\u2019s root directory.&nbsp;<\/li><\/ul><ul><li>Locate and open the <strong><em>build.gradle<\/em><\/strong> file.&nbsp;<\/li><\/ul>\n<ul>\n<li>Find the <strong><em>allprojects.repositories<\/em><\/strong> section in the file.\n<ul>\n<li>Insert the following block of code:&nbsp;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>allprojects{&nbsp;&nbsp;\n\n\u202f repositories {&nbsp;&nbsp;\n\n\u202f \u202f \u202f flatDir {&nbsp;&nbsp;\n\n\u202f \u202f \u202f \u202f dirs 'libs'&nbsp;&nbsp;\n\n\u202f \u202f \u202f }&nbsp;&nbsp;\n\n\u202f \u202f }&nbsp;&nbsp;\n\n\u202f }<\/code><\/pre>\n\n\n\n<p><strong>Add dependencies to your project<\/strong>&nbsp;<\/p>\n\n\n\n<ul>\n<li>Navigate to your App directory.&nbsp;<\/li>\n\n\n\n<li>Locate your application-level <strong><em>build.gradle<\/em><\/strong> file.&nbsp;<\/li>\n\n\n\n<li>Open the <strong><em>build.gradle<\/em><\/strong> file.&nbsp;<\/li>\n\n\n\n<li>Navigate to the dependencies section of the file.&nbsp;<\/li>\n\n\n\n<li>Append the following code:&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])&nbsp;&nbsp;\n\nimplementation('io.socket:socket.io-client:1.0.1') {&nbsp;&nbsp;\n\n\u202f exclude group: 'org.json', module: 'json'&nbsp;&nbsp;\n\n}<\/code><\/pre>\n\n\n\n<p><strong>Define Device Permissions<\/strong>&nbsp;<\/p>\n\n\n\n<p>Your app needs certain permissions to use features on the user&#8217;s phone. You tell Android about these permissions in your <strong><em>AndroidManifest.xml<\/em><\/strong> file.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;uses-permission android:name=\"android.permission.CAMERA\" \/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.RECORD_AUDIO\" \/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.INTERNET\" \/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" \/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" \/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" \/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.BLUETOOTH\" android:maxSdkVersion=\"30\"\/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\" android:maxSdkVersion=\"30\"\/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.WAKE_LOCK\" \/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.BLUETOOTH_SCAN\"android:usesPermissionFlags=\"neverForLocation\"\/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.BLUETOOTH_ADVERTISE\" \/&gt;&nbsp;&nbsp;\n\n&lt;uses-permission android:name=\"android.permission.BLUETOOTH_CONNECT\" \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>Implement Android Video UI Kit<\/strong>&nbsp;<\/p>\n\n\n\n<p><strong>Import the packages<\/strong>&nbsp;<\/p>\n\n\n\n<p>Open your activity file. At the top of the file, add the given packages:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>import com.enablex.enxuikit_android.observer.EnxVideoStateObserver  \nimport com.enablex.enxuikit_android.view.EnxVideoView  \n<\/code><\/pre>\n\n\n\n<p><strong>&nbsp; Initialize the <em>EnxVideoView<\/em> Class<\/strong>&nbsp;<\/p>\n\n\n\n<p>&nbsp; This step involves adding the reference of <strong><em>EnxVideoView <\/em><\/strong>to your layout.&nbsp;&nbsp;<\/p>\n\n\n\n<ul>\n<li>Initialize <em>EnxVideoView<\/em>.&nbsp;<\/li>\n\n\n\n<li>Set layout parameters.&nbsp;<\/li>\n\n\n\n<li>Add <strong><em>VideoView<\/em><\/strong> to your layout.&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>\/\/ Initialize EnxVideoView&nbsp;\n\nenxVideoView = EnxVideoView(this,token,this, \"Low Code Embed URL\")&nbsp;\n\n\/\/ Low Code Embed URL is optional, in case you want to import settings.&nbsp;\n\n\/\/ Set Layout Parameters&nbsp;\n\nval rlp = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT)&nbsp;\n\n\/\/ Add VideoView to your Layout&nbsp;\n\nthis.addContentView(enxVideoView, rlp)<\/code><\/pre>\n\n\n\n<p>For more information, read <a href=\"https:\/\/www.enablex.io\/developer\/video\/solutions\/video-ui-kit\/android-video-ui-kit\/\">Android UI Kit<\/a>.<\/p>\n\n\n\n<p>Read <a href=\"https:\/\/www.enablex.io\/developer\/video\/solutions\/video-ui-kit\/ios-video-ui-kit\/\">this link<\/a> to learn about how to create an iOS app and install dependencies.<\/p>\n\n\n\n<p><strong>Setting up an HTTP server<\/strong><\/p>\n\n\n\n<p>The HTTP server functions as an intermediary linking our native app with Firebase Cloud Messaging. Its role is to handle messages from the app and direct them to the right endpoint.<\/p>\n\n\n\n<p>Create your Application Server using your preferred language, be it <a href=\"https:\/\/github.com\/EnableX\/Video-Conferencing-Open-Source-Web-Application-Sample\">NodeJS<\/a> or <a href=\"https:\/\/github.com\/EnableX\/Group-Video-Call-Conferencing-Sample-Application-in-PHP\">PHP<\/a>.<\/p>\n\n\n\n<p>After completing the setup, you need to integrate a notification service into your project, either using Firebase or another third-party library.<\/p>\n\n\n\n<p>We will use&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/firebase-admin\" target=\"_blank\" rel=\"noreferrer noopener\">firebase-admin<\/a>&nbsp;to communicate with the FCM service from our server. Read Add <a href=\"https:\/\/firebase.google.com\/docs\/ios\/installation-methods\">Fire base to your iOS Projects<\/a> and &nbsp;<a href=\"https:\/\/firebase.google.com\/docs\/android\/setup\">Fire Base to your Android Projects.<\/a><\/p>\n\n\n\n<p>The <em>firebase-admin<\/em> dependency specifically facilitates communication with the FCM service from the server.<\/p>\n\n\n\n<p><strong>Making Device Talks Easier with Firebase<\/strong><\/p>\n\n\n\n<p>When using Firebase for video calls, there are two main ways to let devices chat with each other:<\/p>\n\n\n\n<p><strong>Device Tokens: <\/strong>Each device gets a special code. It&#8217;s like a name tag so the server knows who&#8217;s who.<\/p>\n\n\n\n<p><strong>Topics: <\/strong>Instead of using codes, devices join groups called &#8216;topics&#8217;. When the server sends a message to a topic, everyone in that group hears it.<\/p>\n\n\n\n<p>Once your application and server are configured, and your app begins to receive notifications, you will then need to integrate the Ringer SDK based on the notification triggers.<\/p>\n\n\n\n<p><strong>For Android Applications, Call the API:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>var callKitView = EnxCallKitView.getInstance(\n\n&nbsp; &nbsp; &nbsp; this@ConferenceActivity,\n\n&nbsp; &nbsp; &nbsp; \"name\",\n\n&nbsp; &nbsp; &nbsp; com.enxcallkit.R.mipmap.ic_launcher_round,\n\n&nbsp; &nbsp; &nbsp; this)\n\n&nbsp; override fun callAnswer() {\n\n&nbsp; &nbsp; &nbsp; \/\/ When you receive incoming call\n\n&nbsp; }\n\n&nbsp; override fun callReject() {\n\n&nbsp; &nbsp; &nbsp; \/\/ When you reject incoming call\n\n&nbsp; }\n\n&nbsp; override fun callTimeOut() {\n\n&nbsp; &nbsp; &nbsp; \/\/ When you didn't respond to incoming call notification,\n\n&nbsp; &nbsp; &nbsp; \/\/ it times out in 45 seconds.\n\n&nbsp; }<\/code><\/pre>\n\n\n\n<p><strong>Preview- Android Call Ringer<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"325\" height=\"614\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-12.png\" alt=\"\" class=\"wp-image-3258\" style=\"aspect-ratio:0.5293159609120521;width:267px;height:auto\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-12.png 325w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-12-159x300.png 159w\" sizes=\"(max-width: 325px) 100vw, 325px\" \/><\/figure><\/div>\n\n\n<p>For more information, Read <a href=\"https:\/\/www.enablex.io\/developer\/video\/solutions\/calling-ui-framework\/android-calling-ui-framework\/\">Android Calling UI Framework<\/a>.<\/p>\n\n\n\n<p><strong>For iOS Applications, Call the API:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>let backGroundTaskIndet = UIApplication.shared.beginBackgroundTask(expirationHandler: nil)\n\n&nbsp; &nbsp; callManager.reportIncomingCall(uuid: UUID(), callerName: \"Caller Name\", hasVideo: true) {\n\n&nbsp; &nbsp; &nbsp; _in UIApplication.shared.endBackgroundTask(backGroundTaskIndet)\n\n&nbsp; &nbsp; }<\/code><\/pre>\n\n\n\n<p>For more information, Read <a href=\"https:\/\/www.enablex.io\/developer\/video\/solutions\/calling-ui-framework\/ios-calling-ui-framework\/\">iOS Calling UI Framework<\/a>.<\/p>\n\n\n\n<p><strong>Recommendation for iOS projects:<\/strong><\/p>\n\n\n\n<ul>\n<li>Add background task before loading the Calling UI.<\/li>\n\n\n\n<li>End the background task once Calling UI is loaded.<\/li>\n\n\n\n<li>To end call, use the following method. This will close Call-kit UI.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><code> callManager.endCall()<\/code><\/pre>\n\n\n\n<p><strong>Preview- iOS Call Ringer<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"940\" height=\"673\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-13.png\" alt=\"\" class=\"wp-image-3259\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-13.png 940w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-13-300x215.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/image-13-768x550.png 768w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p><strong>WebRTC and EnableX for Enhanced Video Experience<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/webrtc.org\/\">WebRTC<\/a> (Web Real-Time Communication) is an open-source framework that allows real time&nbsp; communication directly in the web browser and mobile applications. It facilitates streaming of audio, video, and data without requiring plugins, downloads, or installations.<\/p>\n\n\n\n<p>While EnableX provides a robust platform for video application development, under the hood, WebRTC plays a pivotal role in enabling real-time communication. So, when you are working with EnableX, you are inherently harnessing the power of WebRTC.<\/p>\n\n\n\n<p><strong>Benefits of WebRTC in EnableX Platform:<\/strong><\/p>\n\n\n\n<p><strong>Browser-Based Communication:<\/strong> With WebRTC, users can establish direct video and audio communications without needing any additional plugins or downloads.<\/p>\n\n\n\n<p><strong>High-Quality Video and Audio:<\/strong> WebRTC supports HD (High Definition) video and high-fidelity audio, ensuring users get a seamless experience.<\/p>\n\n\n\n<p><strong>Secure and Private: <\/strong>All WebRTC components come with built-in encryption. This means that your data, voice, and video packets are secure.<\/p>\n\n\n\n<p><strong>Interoperability: <\/strong>WebRTC is supported by all major browsers, including Chrome, Firefox, and Safari. This ensures a broader reach and compatibility for your application.<\/p>\n\n\n\n<p>To know more, please read: <a href=\"https:\/\/www.enablex.io\/insights\/how-to-choose-the-best-webrtc-video-call-api-provider\/\">How to choose the best WebRTC Video call API provider.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Build Native Mobile Video Applications with Ringer UI Navigating the world of app creation? Want to enhance your user experience with seamless video call notifications? Let&#8217;s dive into how the EnableX tool makes it easier than ever. Today, let&#8217;s learn how you can build a video calling application with EnableX Video API and our UI &#8230;<\/p>\n","protected":false},"author":25,"featured_media":3309,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":true,"footnotes":""},"categories":[15,23,93],"tags":[34,138,141,75,47],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build A Video Calling App in minutes- 2024 guide<\/title>\n<meta name=\"description\" content=\"Creating an end to end video calling app is easy! Get a free EnableX trial account, and use our UI Kit to create an end to end solution.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build A Video Calling App in minutes- 2024 guide\" \/>\n<meta property=\"og:description\" content=\"Creating an end to end video calling app is easy! Get a free EnableX trial account, and use our UI Kit to create an end to end solution.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/\" \/>\n<meta property=\"og:site_name\" content=\"Insights about video API, SMS API; WhatsApp for Business API\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-18T04:31:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-24T08:52:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/Setup-the-Ringers-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"541\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jason Wills\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@enablexio\" \/>\n<meta name=\"twitter:site\" content=\"@enablexio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Wills\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build A Video Calling App in minutes- 2024 guide","description":"Creating an end to end video calling app is easy! Get a free EnableX trial account, and use our UI Kit to create an end to end solution.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/","og_locale":"en_US","og_type":"article","og_title":"How to Build A Video Calling App in minutes- 2024 guide","og_description":"Creating an end to end video calling app is easy! Get a free EnableX trial account, and use our UI Kit to create an end to end solution.","og_url":"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/","og_site_name":"Insights about video API, SMS API; WhatsApp for Business API","article_published_time":"2024-01-18T04:31:35+00:00","article_modified_time":"2025-07-24T08:52:28+00:00","og_image":[{"width":1536,"height":541,"url":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/12\/Setup-the-Ringers-1.png","type":"image\/png"}],"author":"Jason Wills","twitter_card":"summary_large_image","twitter_creator":"@enablexio","twitter_site":"@enablexio","twitter_misc":{"Written by":"Jason Wills","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/#article","isPartOf":{"@id":"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/"},"author":{"name":"Jason Wills","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/person\/422d2b153c3c96827da141c6446d11a3"},"headline":"Build Native Mobile Video Calling Applications with Ringer UI","datePublished":"2024-01-18T04:31:35+00:00","dateModified":"2025-07-24T08:52:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/"},"wordCount":1830,"publisher":{"@id":"https:\/\/www.enablex.io\/insights\/#organization"},"keywords":["CPaaS","video api","video call api","video conferencing","webrtc"],"articleSection":["Blog","TechTalks","Video API"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/","url":"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/","name":"How to Build A Video Calling App in minutes- 2024 guide","isPartOf":{"@id":"https:\/\/www.enablex.io\/insights\/#website"},"datePublished":"2024-01-18T04:31:35+00:00","dateModified":"2025-07-24T08:52:28+00:00","description":"Creating an end to end video calling app is easy! Get a free EnableX trial account, and use our UI Kit to create an end to end solution.","breadcrumb":{"@id":"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.enablex.io\/insights\/build-native-video-calling-app-with-ringer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.enablex.io\/insights\/"},{"@type":"ListItem","position":2,"name":"Build Native Mobile Video Calling Applications with Ringer UI"}]},{"@type":"WebSite","@id":"https:\/\/www.enablex.io\/insights\/#website","url":"https:\/\/www.enablex.io\/insights\/","name":"Enablex","description":"","publisher":{"@id":"https:\/\/www.enablex.io\/insights\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.enablex.io\/insights\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.enablex.io\/insights\/#organization","name":"Enablex","url":"https:\/\/www.enablex.io\/insights\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/logo\/image\/","url":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/05\/EnableX-Logo-01.png","contentUrl":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/05\/EnableX-Logo-01.png","width":17382,"height":3567,"caption":"Enablex"},"image":{"@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/twitter.com\/enablexio","https:\/\/www.linkedin.com\/company\/vcloudx"]},{"@type":"Person","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/person\/422d2b153c3c96827da141c6446d11a3","name":"Jason Wills","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/person\/image\/","url":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2025\/05\/envato-labs-ai-f14f6981-d7f8-4c3e-9234-00323c7d5ca0-96x96.jpg","contentUrl":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2025\/05\/envato-labs-ai-f14f6981-d7f8-4c3e-9234-00323c7d5ca0-96x96.jpg","caption":"Jason Wills"},"description":"Jason works behind the scenes at EnableX, helping to turn complex tech into practical tools that developers and businesses can actually use. With several years of experience in product development and platform architecture, he focuses on making communication technologies simpler, smarter and easier to build with. Whether he's writing step-by-step guides, product tips or explaining how our APIs work, Jason keeps things clear and useful.","sameAs":["https:\/\/www.enablex.io\/","https:\/\/www.linkedin.com\/company\/vcloudx\/"],"url":"https:\/\/www.enablex.io\/insights\/author\/jason-wills\/"}]}},"_links":{"self":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/posts\/3250"}],"collection":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/comments?post=3250"}],"version-history":[{"count":0,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/posts\/3250\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/media\/3309"}],"wp:attachment":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/media?parent=3250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/categories?post=3250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/tags?post=3250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}