Infobip WebRTC - A Quick Setup & Test Guide
Tags: webrtc, tutorial, testing
Published: 2021-11-10 08:07:52

You know the usual developer drill - you sit down, ideas come and go, you filter the ones that work and write it all in a single go? Erm, not really!

When we start writing new software, there is always the stage of planning and deliberating about which technologies to use and which dependencies can help us make the best software for our use-cases and potential clients. This is where having the right tool is crucial for making the best decisions. If you are looking to integrate real-time communications into your application, we already have one of those tools in mind for you.

# Why integrate RTC into your application in the first place?

You might ask yourself "Why would I use WebRTC anyway? Can't I just call someone over the phone?". Sure you can, but think about the different scenarios that could happen and the platform that could address them all. For instance, if you want to show someone a certain product or let them check something from a distance, you can use video calls over WebRTC to provide this service. Or let's say you're out on the road and you've just had an accident which you need to report to your supervisor. With WebRTC this could be as easy as having a two-minute video call.

## Communicate across devices with multiple participants

By using WebRTC you can also employ many other devices, not just mobile phones, for your communication needs. If there is an office employee contacting multiple colleagues that work on the terrain, he or she can sit at their computer and still talk to the colleagues using their phones. If there's a need to talk to multiple people at once, WebRTC will make it happen quick and easy via the conferencing feature.

## Record calls and keep track of communications

Recording calls, be it 1-on-1 or conference, is something not only useful, but also sometimes required by regulatory measures. With WebRTC you can choose to record your calls whenever you want and keep track of your communications when needed.


All of the above shows that with WebRTC you can harness the true power of your communications, implement more communication channels, and make the life of your clients and employees easier. If you want to test it out yourself, we've prepared a detailed setup guide. To be able to follow this showcase setup, please login to [Infobip Portal](https://portal.infobip.com/).

# What is Infobip RTC Showcase?

The Infobip RTC Showcase is a collection of simple apps implementing our Web and In-app Calls communication channel using WebRTC. These apps enable you to setup a simple WebRTC app and test its features out on your own, even change the code and experiment.

The following app examples are present in our showcase:
* Kotlin
* Swift
* React Native
* Angular
* jQuery
* React

Considering the main purpose of this app, you will also notice that the user interface is basic. This enables everyone to easily change the code in a matter of minutes and test out new things if they are interested.

![Infobip RTC simple user interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eo1ra5i89lm052jnsnvc.png)

Of course, if you are going to use the RTC Showcase and integrate WebRTC into your own app in the future, you will need to fulfil some prerequisites.

# What to Know Before You Start?

To be able to use Infobip RTC Showcase, you first need to have certain things installed:
* Node.js
* Java, version 12

Next, you will have to set up the token application for the showcase applications. The token application is used to fetch the Infobip token you need for authenticating your identity when accessing Infobip's backend. Here you have two options, depending on the technology you want to test out with the showcase.

## JavaScript Token Application

To be able to run the JavaScript-based token application, you will need to add a **config.json** file to the **token/node** folder with the following structure:

{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=config.json %}

The **HTTP_PORT**, **INFOBIP_API_HOST**, and **INFOBIP_RTC_TOKEN_PATH** parameters are used to set the port on which your token app will run, and the host and path from which your token will be fetched. These values will be the same for everyone using our RTC showcase, although you can freely change the **HTTP_PORT** if the predefined port is taken. To be able to use the new port for the token application, do not forget to change the port in every respective application to the new one.

The more important parts of this config file are **INFOBIP_API_KEY** and **INFOBIP_APP_ID**. You can get both values from the [Infobip Portal](https://portal.infobip.com/) after you have logged in into your account.

* To get **INFOBIP_API_KEY** you will need to access the "Manage API keys" site from the Portal dashboard ([Manage API keys](https://portal.infobip.com/settings/accounts/api-keys)) and copy your chosen API key into the config.json file
* To get **INFOBIP_APP_ID** you will need to access the "Apps > Web and In-App Calls > Applications" site ([My Applications](https://portal.infobip.com/apps/webrtc/)) and copy your chosen APP ID into the config.json file

When you have filled out the required information in the config.json file, you will need to do two more steps with the token application before you are ready to go onto the showcase applications. First go to the **token/node** folder through your terminal/command prompt and then:
* Run **npm install**, which will install the packages needed for the token application
* Run **npm start**, which will start the application on [http://localhost:8080](http://localhost:8080) (If you have not changed the port in the config.json file)

Now you can start running and experimenting with the showcase applications that can be found in the **js/** folder, but if you want to be sure that the token application is running, you can run

{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=command_1.sh %}

If your token application is running, this will return a JSON object like the following

{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=token_response.json %}

## Java Token Application

To be able to run the Java-based token application, you will need to add two environment variables with the values for **INFOBIP_API_KEY** and **INFOBIP_APP_ID**. You can add the environment variables in several ways depending on the operating system you are using, and which approach you prefer. To set the environment variables through the terminal/command prompt:
* For Unix-like operating systems (Mac OS and GNU+Linux)
{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=command_2.sh %}
* For Windows operating systems
{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=command_3.ps1 %}

If we look at **token/java/src/main/resources/application.yml**, where you will find the following code

{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=application.yml %}

We will see that we can also easily change the **HTTP_PORT** value if needed. We just need to set the **HTTP_PORT** environment variable on our system, and our token application will prioritize that value.

After setting up the environment variables, we just need to run the following command from inside the **token/java** folder:
{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=command_4.sh %}

This will start the token application which is built with the Java Spring Boot framework. We can check if our token application is up and running by using the same command as the last time
{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=command_1.sh %}

If your token application is running, this will also return a JSON object like the last time
{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=token_response.json %}

**Keep in mind:** If you want to run both token applications at the same time, you will need to change the **HTTP_PORT** value for at least one of them.

# Showcase Applications

Showcase applications will use the token application to authenticate users on Infobip platform, so be sure to set up the token applications correctly before continuing.

## Change Needed Configurations

If you have changed the **HTTP_PORT** inside the token application's configuration, you will first need to change the port for the token application inside showcase applications from 8080 to your preferred port.

Also, if you want to change the ports that the JavaScript-based showcase applications are using, you can do that by:
* jQuery

Changing the **HTTP_PORT** value in **js/jquery/app.js** from 8010 to your preferred port
* React

Changing the **PORT** value in **js/react/package.json** from 8020 to your preferred port
* Angular

Changing the **port** option in the ng serve command in **js/angular/package.json** from 8030 to your preferred port

## Add Google Services to Android Showcase Applications

To be able to receive notifications on incoming calls from Infobip showcase applications, you will need to add a Firebase configuration file to the app (step 3 [here](https://firebase.google.com/docs/android/setup)) named **google-services.json** to the app.

Depending on the project, you will need to add the **google-services.json** file in a different place:
* Android Kotlin

Add the **google-services.json** file to **android/kotlin/infobip-rtc-showcase-android**
* React Native

Add the **google-services.json** file to **react_native/android/app**

Here you can also make sure that you add the correct path to the Android SDK (Software Development Kit) on your computer on the React Native showcase application. You can set this in **react_native/android/local.properties** on the **sdk.dir** property.

## Running JavaScript-based Showcase Applications

If you have gotten to this step and the token application inside **token/node** or **token/java** is running, then the following is straight forward. You just need to navigate to the folder for the chosen technology (be it jQuery, React, or Angular) and run the following

{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=command_5.sh %}

This will install and then run the application on the preferred port, which you can then access through your browser. To simply test out the application, you can start up two browser tabs and call the other user from one tab.

**Keep in mind:** If you are running the React or Angular applications, the page will reload automatically if you make any edits. You will also be able to see any lint errors in the console.

## Running Mobile Showcase Applications
You can run the Android Kotlin and iOS Swift showcase applications as any other application through their respective IDEs (Android Studio and XCode) in the emulator. There is a known issue with receiving push notifications for incoming calls on subsequent runs on the emulator on all three mobile showcase applications (React Native, Kotlin, and Swift). This can be solved by wiping data from the emulator before running it again.

You can also run the app on a real device, although you will need access to the token application from the device itself. You can enable this by using the **ngrok** command, which allows you to expose your local port on the whole network. The following command will enable this:

{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=command_6.sh %}

Here you can also choose the preferred port to expose the token application.

Unlike the Kotlin and Swift showcase applications, the React Native application will require you to do one more step. Run the following inside the **react_native** directory:

{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=command_7.sh %}

or you can also use yarn:

{% gist https://gist.github.com/Ekvinto/90ca1aa83d017f42ec5879306c42b23e file=command_8.sh %}

The commands do the following:
* Install needed dependencies
* Start the application
* Run the application on an Android emulator or your connected phone

**Keep in mind:** You can use either npm or yarn to run this application, but it is advised not to mix package managers to avoid resolution inconsistencies.

# That's it. You're ready to go!
For now, through the RTC Showcase applications you can look at:
* 1-on-1 audio and video calls through WebRTC
* Sharing your screen during the call
* Calling a phone number using WebRTC
* Joining conferences with audio and video
* Sharing your screen during conferences

If you want to learn more about Web and In-Application Calls, you can visit [Infobip's Voice and Video documentation for WebRTC](https://www.infobip.com/docs/voice-and-video/webrtc).

Check if you already have access to our WebRTC Demo applications and try out the newest features over there:
* [Browser application](https://webrtc-demo.infobip.com/)
* [Android application](https://play.google.com/store/apps/details?id=com.infobip.webrtc.demo.android)
* [iOS application](https://apps.apple.com/us/app/infobip-webrtc/id1469234824)

To enable Web and In-App Calls, contact your dedicated Account Manager or our [Sales](https://www.infobip.com/contact) team.

When you are ready to start integrating our SDKs into your own application, you are more than welcome to look at the reference documentation for various SDKs:
* [JavaScript SDK](https://github.com/infobip/infobip-rtc-js/wiki)
* [Android SDK](https://github.com/infobip/infobip-rtc-android/wiki)
* [iOS SDK](https://github.com/infobip/infobip-rtc-ios/wiki)
* [React Native SDK](https://github.com/infobip/infobip-rtc-react-native/wiki)

If you have any questions, we'd be happy to hear from You [**here**](https://www.infobip.com/contact)!