Forem: Adnan Arnautović

Infobip WebRTC - A Quick Setup & Test Guide

Adnan Arnautović — Wed, 10 Nov 2021 08:07:52 +0000

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!

Could technology take away your freedom?

Adnan Arnautović — Wed, 18 Aug 2021 07:21:26 +0000

Reminiscent of the gold rush of 1800s, the 21st century has been a
tech-rush powered by young and influential billionaires from Silicon Valley. For years we have been put under the impression that technology will solve all of our world's problems and, while some of them can be solved this way, not all can. To make it worse, those that can't are usually root social and political problems that either need a change in ethos or need broader solutions involving many more areas of expertise.

ECONOMIC INEQUALITY

First thing that comes to mind is economic inequality within minority groups, which according to a HuffPost article is becoming a problem not only concentrated within minority groups. There is a pervasive thought among people in the "first world" that they can help eradicate inequality and poverty by just building mobile apps for various initiatives. I believe this is not how it should work. I find that it establishes a false sense of accomplishment among people that could be of some help if they just didn't waste their time, knowingly or unknowingly, "helping".

FAKE NEWS IS HERE TO STAY

What better way to show this problem than with the 2020 United States elections. Social media has exacerbated the pandemic of misinformation going around. According to NBC News, falsehoods are spreading much faster through social media than truth. Only one or two election cycles ago this would not be possible, and the technology used for electric voting and counting the votes has been a source of many of those fake news. A sad and worrisome fact is that fake news is here to stay and we'll just have to deal with it.

A DANGER TO OUR DEMOCRACY

Elections are probably one of the most underestimated problems we face when merging them with digital technology because they have a weird mix of two opposite goals. When a citizen votes, he must be anonymous as not to encourage voter fraud, but his vote also needs to be somehow trusted or verified to discourage that same voter fraud. Therefore, election officials are worried about people taking pictures of their ballots because you should not be able to prove how you voted. Otherwise we could have situations like: "Discount for X voters" or "Vote Y or you'll have problems".

A PROBLEM WITH DIGITAL ELECTIONS

Why is digital technology one of the biggest problems when it comes to voting practices ? Isn't physical voting imperfect too? Yes, it is imperfect, but as Tom Scott, a computer scientist of Internet fame, put it, attacks on physical voting don't scale as well as attacks on huge interconnected digital systems with voting machines. Most problems with physical voting have already been experienced and we know how to defend from most of them (like granny voting or Bulgarian trains) and an attacker can get only a few people into the fraud before someone discovers him and his scheme. On the other hand, when an attacker gains access to digital voting systems he can flip a switch and instantly defraud tens of thousands or more voters from their democratic privilege.

A MATTER OF TRUST

But can't this be solved with new technologies, passwords, hashes, checksums, open-source software… maybe that buzzword blockchain? Some of these are currently used in many electronic voting systems around the world, from the United States to Estonia, but there is a catch. Even if we had the most secure voting systems, voting is a special case where this is just not enough because there needs to be trust in the system the whole population uses to vote. If there is no trust from the wider population then the voter turnout suffers and subsequently even smaller voter fraud can impact the results of an election. People can inherently trust pen and paper because they are familiar with them, but when you start throwing phrases and words at people that they don't understand or have never heard of, they will start to get suspicious. Why would my 80-year-old grandfather trust that glowing hunk of electronics to record his vote correctly and not just show him his vote, but record another one? Not to even mention what would happen if a foreign nation tried to break trust in the elections as we've seen in the last two election cycles in the United States. Currently, this whole idea seems to be understood only by the Estonian government.

STEM IS NOT A MAGIC WAND FOR EDUCATION ISSUES

Although we have only talked about elections up until now, this is not the only problem that occurs when you try to fix things using technology in a reduced sense. I have been personally bombarded by a number of ads, posts, initiatives, and people that believe the holy grail of education is introducing STEM (whatever that means for any of these is almost always different) to our classrooms and giving every child a laptop or tablet. According to prof. Kentaro Toyama from the School of Information at the University of Michigan "Technology doesn't fix broken school systems, so no amount of technology is going to turn around a situation where children aren't learning." We should stop using our schools as places where we cram young people with information and make them shining temples of reason and palaces of creative thinking.

SMART CITIES OR "TRACKING" CAPITALS?

Some technologies allow us to live a comfier life, but they create problems of their own. This is the case with the privacy issues around many of the services we use today. A unique part of this story are smart cities, which are advertised as something inherently good. I'd argue that this heavily depends on their final implementation. The recent development with Google-linked Sidewalk Labs and their smart city project in Portland, where they rejected to implement a smart city solution, has revealed that even Google's own off-shoot companies are worried about personal privacy and implementation of city wide "tracking" solutions. Considering the amount of information Google collects, this has a certain weight to it. This only shows that technology implementations must be preceded by laws and regulations to stop such projects from having a sinister impact on our lives and force them to be utterly transparent with everything they are doing.

A COURIOUS CASE OF PEOPLE'S REPUBLIC OF CHINA

A case where such tracking technology is currently being tested for nefarious purposes is PR China with its social credit score system. This is a national blacklist system acting like a social network which punishes people whose behavior includes negative factors such as playing loud music, eating in rapid transit systems, making reservations at restaurants or hotels and not showing up etc. If you don't have a high enough credit score, you can get rejected for plane or train tickets or even worse. Sounds like an episode of "Black Mirror", doesn't it? This is what happens when advanced enough technology is misused and there is no regulation that can stop it or worse, the regulation itself is made so that technology could be used against the general population.

NOT ALL IS LOST

Rarely is any product of science and progress inherently destructive –the way it's being used usually defines it-. Technology is just a tool that we use to make our lives better, but we always need to think about the impacts of such additions to our lives. This requires first principles thinking, empathy, some knowledge of philosophy and history to know how people dealt with new things before and many more skills that one profession like computer science cannot have alone. Our current drive towards highly capable artificial intelligence has been followed along by many more scientific branches than just engineers, like AI ethicists, philosophers, and renowned academics like the late Stephen Hawking. If we build the habit of stopping and thinking more deeply about problems in our lives, maybe we'll get Terminator-like robots one day, but they'll be helping us take care of our old in care homes instead of inflicting pain and suffering on other human beings.