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.
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.
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:
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 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) 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) 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 (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
If your token application is running, this will return a JSON object like the following
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)
- For Windows operating systems
If we look at token/java/src/main/resources/application.yml, where you will find the following code
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:
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
If your token application is running, this will also return a JSON object like the last time
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) 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
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:
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:
or you can also use yarn:
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.
Check if you already have access to our WebRTC Demo applications and try out the newest features over there:
To enable Web and In-App Calls, contact your dedicated Account Manager or our Sales 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:
If you have any questions, we'd be happy to hear from You here!
Top comments (0)