Next-Level Communication with WebRTC

Web Real-Time Communication (WebRTC) has fast become the de facto framework used for building applications to facilitate audio and video communication over the web. WebRTC connects users through their browsers or on their mobile devices. In this post, we’ll get you up to speed on why WebRTC is so widely adopted for development today. Along the way, we’ll cover one way get started quickly with WebRTC using Infobip.

Let’s begin by diving a bit deeper into the details and history of WebRTC.

What is WebRTC?

At a high level, WebRTC is a peer-to-peer (P2P) data transmission technology. While it has versatile uses, it’s most commonly used for latency-sensitive applications, and that makes it perfect for P2P video and audio streaming. Many major tech companies—including Zoom, Slack, and Discord—use WebRTC in their implementation to provide secure and seamless streaming experiences to their users.

How Long has WebRTC been around?

By most accounts, the industry saw WebRTC used to make a cross-browser video call for the first time in February 2013. That means WebRTC has been around for nearly 10 years! For those who pivot on the paperwork, WebRTC reached an official “Candidate Recommendation” status with W3C in 2017 and “Recommendation” status in January 2021. By that gauge, WebRTC’s status as an officially backed technology is fairly new. With that backing of governing technical bodies and industry use, however, WebRTC’s adoption is on the rise. That’s especially true of companies seeking to build audio and video applications.

Why Choose WebRTC Over Another Option?

Why might a company choose to build on top of WebRTC as opposed to another option like RTMP? There are several reasons, and we’ll highlight the most important ones here:

No central server

Because WebRTC is P2P, the clients manage the connection. In other words, there is no client-server architecture with a central infrastructure brokering connections while handling media and static assets. The end-user devices do all of the connection management. Though this puts more resource load on clients, the P2P approach is more secure and resilient.

One nuance worth mentioning is that WebRTC requires a way to connect clients with one another; this process is called “signaling.” So, while there’s no central server in the sense of connection management, you do need a signaling server to help clients be aware of each other’s presence and negotiate their connection. Still, the resources needed for this signaling server are significantly less than that of maintaining an entire client-server architecture.

W3C/IETF standard

Historically, perhaps developers have not put a lot of stock in a technology’s endorsement from W3C or IETF. Still, WebRTC’s backing by these bodies means that a great deal of thought, design, and discussion went into this technology. WebRTC has been in the making for over a decade, and its official recommendation is bolstered by a gang of big tech companies that actively use it. You’re in good company with WebRTC.

High quality and high speed

WebRTC, unlike TCP-based streaming alternatives (for example, MPEG-DASH or RTMP), uses UDP-packet broadcast. Using UDP alleviates the need for packet-level re-encrypt and retransmission.

For video and audio streaming applications, the minor packet misses that come with UDP have a negligible adverse effect on the end-user experience. The end result, though, makes WebRTC fast. It’s one of the only protocols that can consistently achieve sub-second latency, and it does this out-of-the-box!

Native functionality

As an officially endorsed technology supported in HTML5, WebRTC is dead simple to get started. You don’t need a plugin. All you need is a WebRTC-compatible browser, and you immediately have access to device detection, media capture, data transfer, and more. When you build on WebRTC, everything in your application is native; your users won’t be required to download or install anything else.

Getting Started

For working with WebRTC, we’ll look at Infobip which offers SDKs for Android, iOS, React Native, and JavaScript. That covers pretty much all of WebRTC’s applications. Create an account with Infobip here.

Getting set up

Let’s say you’re kicking off a new JavaScript-based project. Getting started with WebRTC is as simple as installing the Infobip JavaScript SDK with npm or including the distribution file in your project:

$ npm install infobip-rtc --save

# main.js 
let InfobipRTC = require('infobip-rtc');

# or as an ES6 Import
import {InfobipRTC} from "infobip-rtc";

Infobip also offers a distribution file that you can include:

<script src="//rtc.cdn.infobip.com/latest/infobip.rtc.js"></script>

Putting it to use

Infobip takes a hands-off approach to user management. Your users are your users. To enable Infobip’s services for your users, you just need to create a token for them. Here’s a sample of what the request for the token looks like, along with a response:

# main.js
var settings = {
    "url": "https://{baseUrl}/webrtc/1/token",
    "method": "POST",
    "timeout": 0,
    "headers": {
        "Authorization": "{authorization}",
        "Content-Type": "application/json",
        "Accept": "application/json"
    },
    "data": JSON.stringify({"identity":"Alice","applicationId":"2277594c-76ea-4b8e-a299-e2b6db41b9dc","displayName":"Alice in Wonderland","capabilities":{"recording":"ALWAYS"},"timeToLive":43200}),
};

$.ajax(settings).done(function (response) {
    console.log(response);
});

# Response
{
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZGVudGl0eSI6IkFsaWNlIiwibmFtZSI6IkFsaWNlIGluIFdvbmRlcmxhbmQiLCJleHAiOjE1NzkyOTA2MzgsImNhcHMiOlsyXX0.QyCMqjH8DsftChibW2Rw4EByH-eEviUp3-kHVKuJpKg",
  "expirationTime": "2020-01-17T19:50:38.488589Z"
}

Once you’ve created and stored the token, you’re ready to put the power of Infobip’s platform to work!

Although application use cases will vary greatly, each SDK’s Github repository has fantastic resources for getting started. The official documentation with all the goodies that go along with Infobip’s offering of WebRTC can be found here.

Wrapping Up WebRTC

We’ve covered a lot of ground on WebRTC, so let’s take some time to recap. WebRTC is:

• A stable, industry-supported framework primarily used for P2P audio and video communication between browser and mobile devices.
• Widely adopted by many tech companies and for varied use cases.
• Preferred over TCP-based alternatives, as its UDP-based approach provides incredible speed while preserving quality.