How to Get Started With WebRTC: Intro to Browser APIs

How to Get Started With WebRTC: Intro to Browser APIs

WebRTC (Web Real-Time Communication) empowers developers to build powerful voice and video communication solutions on web pages that work across browsers and devices. No plugins necessary. Whether you're building peer-to-peer video, content sharing, messaging, or chat tools, WebRTC makes coding easy and the end experience user-friendly.

Best of all, WebRTC is completely free. This open-source project provides the simple APIs needed to get audio and video communications working seamlessly on your web pages. Apple, Microsoft, Google, Mozilla, and Opera all support WebRTC's standardization across devices and browsers, so expect this new standard to stick around for the long haul.

If you're looking to use WebRTC APIs for your on-page communication solutions, we'll walk you through everything you need to know. Below, you'll find WebRTC tutorials and examples—plus, we'll show you how to get started with Twilio's WebRTC Client.

First, we'll start with common use cases and benefits, and then we'll move on to how you can get started with WebRTC in little-to-no time.

What Is WebRTC used for?

Businesses big and small are finding new and exciting ways to engage and communicate in real-time with their customers using WebRTC. Doctors are having secure conversations with clients, families and friends are chatting, teams are collaborating, people are talking with virtual digital assistants, and more.

WebRTC makes all of these use cases scalable, secure, and easy to use.

If you want to have real-time voice, video, and messaging functionality that works across browsers, devices, and clients, then WebRTC is the way to go.

WebRTC Browser Support

Here's a list of all the browsers that support WebRTC:

• Microsoft Edge
• Google Chrome
• Mozilla Firefox
• Safari
• Opera
• Vivaldi

While many mobile browsers support WebRTC, these browsers lack the ability to receive or maintain call connectivity in the background, leading to poor user experiences. Make sure you understand WebRTC limitations when creating voice and video applications for mobile devices.

Benefits of using WebRTC

• Open-Source: WebRTC is completely free to use, and since the tech giants are invested in it, expect this technology to continue evolving and improving for years to come.
• Available on all Modern Browsers: Edge, Chrome, Firefox, Safari, Opera—name a browser, and WebRTC is likely supported.
• Scalable: WhatsApp uses WebRTC to deliver critical communications to customers—what more scale can you ask for?
• Secure: WebRTC uses Secure Real-Time Transport Protocol (SRTP) to encrypt, authenticate, and protect your data and conversations.
• Works for Mobile Applications: WebRTC isn't just for browsers and web pages—it can be used for mobile apps, too.
• Versatile Functionality: WebRTC isn't just for voice and video calling. You can use it to build messaging and group call services, and you can even add recording functionality.

WebRTC examples in the wild

WebRTC is being used all around you. Likely, you've used an application already today that utilizes WebRTC. Here are a few well-known examples of WebRTC being used for real-time communications:

1. Facebook: It's no surprise that WhatsApp's parent company, Facebook, also takes advantage of WebRTC. Facebook uses WebRTC for Facebook Messenger (video chat, group video chat, messaging), Facebook Live, VR Chat, and more.
2. Houseparty: COVID-19 quarantine has led many to discover Houseparty, a social networking group video chat that works on mobile and desktop apps. Houseparty outlines exactly how they use WebRTC to "delight Houseparty users who spend 51 minutes chatting in the app, on average, daily."
3. Google Hangouts: Google is the mastermind behind WebRTC, so it's no surprise they use it for Google Hangouts' phone calls, SMS, video conferencing, and messaging.

WebRTC applications

You can see from the list of popular apps how powerful and dynamic WebRTC can be, but that's just a taste of possible use cases. Beyond basic video and phones calls with friends, here's a list of even more expansive uses for WebRTC:

• File-Sharing: Keep all your conversations and relevant files in one place. With WebRTC, you can send fully encrypted files (of pretty significant size, too) straight to a colleague through your web browser rather than emailing the file or uploading/sharing it through a 3rd-party cloud storage platform.
• Expanded Sales Enablement: Your website's chat with an agent feature doesn't have to be limited to text. WebRTC audio and video channels could allow you to demo your tool straight from the browser or hop on a voice call for further assistance (rather than requiring your customer to jump through the support call hula hoops).
• Collaboration: With WebRTC, you shouldn't ever have to install a 3rd-party video or call platform to participate in a business meeting. WebRTC empowers you to communicate with colleagues, partners, or clients on a platform that's universally accessible, convenient, and easy to use.
• Emergency Response: With video, audio, and chat functionality, WebRTC is evolving the way first responders receive information and improving how they respond. Safermobility, for example, uses WebRTC to allow users to send real-time video, audio, and text to the nearest authorities.
• Healthcare: We've seen doctors and clinics' use of WebRTC functionality expand during the COVID-19 quarantine. Now, doctors can perform virtual checkups via web browsers without requiring their clients to download 3rd-party apps to engage.
• Omnipresent Microphone: Tap to Speak used WebRTC to develop a solution that turns event participants' smartphones into microphones, eliminating the painful hassle of passing the microphone around the room.

And that's just the beginning. WebRTC's flexibility makes it adaptable to practically any communications use case.

WebRTC tutorials: How to get started with WebRTC

Getting started with WebRTC is simple. We created several quick deploy apps to get you to"hello world" in no time. Check out some of our Twilio WebRTC tutorials below:

Twilio Video React App

This Twilio Video React App WebRTC tutorial shows you how to build a multi-party video application with twilio-video.js and Create React App. Notes:

• Deploy to Twilio Serverless in less than 5 minutes
• No other infrastructure required
• No code changes required before first deploy
• No cost associated with deploying
• Go Rooms usage is free, but standard usage charges apply when using the app with other Room types.

Twilio Video iOS App

This Twilio Video iOS App WebRTC tutorial shows you how to build a video conferencing app that uses the Twilio Programmable Video SDK. This is an easy-to-configure app that's perfect for developers to experiment with real-time video and audio features.

Twilio Video Android App

This Twilio Video Android App WebRTC tutorial shows you how to a multi-party voice and video app with Twilio’s Programmable Video Android SDK. It's similar to the iOS WebRTC tutorial, but it's great for Android developers to get hands-on experience using Kotlin and Java. 

Google WebRTC Tutorial: JavaScript APIs

Google's built a helpful tutorial to show you the basics for tapping into the WebRTC JavaScript APIs:

1. Visit the WebRTC GitHub pages to find the JavaScript API samples you need for your audio or video use case. The 3 main WebRTC API components are: 1. MediaStream (getUserMedia): Accesses device cameras and microphones using JavaScript 2. RTCPeerConnection: Creates direct connections between peers 3. RTCDataChannel: Empowers the bi-directional transferring of any data type 2. Download and open the source code. 3. Add a pinch of HTML and Javascript to: 1. Stream video from your webcam 2. Set up a secure RTCPeerConnection 3. Use RTCDataChannel to exchange data 4. Set up a signaling service to exchange messages 4. Voilà—you've built a real time video streaming and data exchange app. 5. Try out other live demos on GitHub.

Custom solution vs. cloud-based API

Let’s look at the factors behind the choice to build a custom solution versus using a cloud-based API. While modern development often leans towards cloud-based solutions, there are still situations where you might choose to build a custom solution. Here's a quick overview of some possible use cases where a custom solution might make sense:

• You face regulatory and compliance issues that require maintaining and managing your servers (on-premises or in a cloud)
• The fixed operational cost associated with deploying and managing services is a better fit for your business case
• There are tax benefits involved with CapEx spending that make it worthwhile to buy your own hardware.

In most situations, choosing a cloud-based API is the better and more cost-effective choice. There are several advantages to choosing a cloud-based API:

• Faster implementation
• Lower initial and ongoing costs
• Reduced risk
• On-demand scalability
• Guaranteed performance
• Increased security
• Managed compliance and upgrades to the latest standards

How to get started with Twilio WebRTC Client

If you’re interested in building with WebRTC, look no further than Twilio WebRTC Client. Everything you need to build a complete solution (from browser abstraction to signaling and registration) is packaged in one JavaScript file.

When implementing video using the Twilio APIs, you don’t need to worry about infrastructure, scalability, performance, STUN/TURN, and so on, as you would when deploying a custom solution. Twilio handles all those concerns for you.

Twilio Client is powered by Twilio's global, elastically scalable platform, low latency media relay, and intelligent call control. You don’t need to build out the server side components—plus, you only pay for what you use. Twilio WebRTC client provides the security and reliability major enterprises need.

Twilio Client is powered by WebRTC, allowing developers to build everything from Call Centers to Hosted PBX. Here's how to get started with Twilio's WebRTC-powered voice calling:

1. Complete the Twilio Client Quickstart to build an application capable of making and receiving phone calls from your browser.
2. Set up your device and establish a connection to Twilio.
3. Twilio sends you a webhook to get the TwiML instructions
4. You respond with TwiML instructions
5. Twilio connects to the intended number

Easy as that. Get started now with a free trial account and be up and running in less than 5 minutes!

How to integrate WebRTC video with Twilio

Twilio provides API support for iOS, Android, and JavaScript. For an accessible overview of these concepts—regardless of platform—check out this tutorial. For our example, we’ll use JavaScript with a Node.js backend.

 

1. First, create a Room. While the first client to connect can do this, creating it ahead of time via a server-side REST API call from your Node.js code allows for better control over the room type, codecs, number of participants, and so on. 
   
   The Room will have a unique identifier called an SID—this will be used by clients to join that specific Room. It takes just two lines of code to create a new Room. In this example, we are creating a peer-to-peer room, but we can also use WebRTC Go (a quick-to-deploy, limited, free solution), peer-to-peer, group-small (maximum of four individuals), or group (the default type, which scales to 50 individuals).
   
   

   const client = require('twilio')('accountSid', 'authToken');
   client.video.rooms.create({uniqueName: 'DailyStandup', type: 'peer-to-peer',})
                    .then(room => console.log(room.sid));
   

    

2. Next, you need to give clients access tokens for the Room. Twilio provides libraries for this purpose. In our case, the getAccessToken() function on the client-side invokes a server-side API that will connect to Twilio to retrieve the access token.
   
   

   // server side
   const express = require('express');
   const app = express();
   const querystring = require('querystring');
   
   const AccessToken = require('twilio').jwt.AccessToken;
   const VideoGrant = AccessToken.VideoGrant;
   
   app.get('/token', function (req, res) { 
     const identity = req.query.identity;
     const room = req.query.room;
     // Create an access token which we will sign and return to the client,
     // containing the grant we just created
     const token = new AccessToken(
       process.env.TWILIO_ACCOUNT_SID,
       process.env.TWILIO_API_KEY,
       process.env.TWILIO_API_SECRET
     );
   
     // Assign identity to the token
     token.identity = identity;
   
     // Grant the access token Twilio Video capabilities
     const grant = new VideoGrant();
     grant.room = room;
     token.addGrant(grant);
   
     // Serialize the token to a JWT string
     res.send(token.toJwt());
   }
   
   
   // client side
   import { connect } from 'twilio-video';
   const token = getAccessToken(); // invokes the above via a REST API call​
   

    

3. Now in the browser, you connect clients to the Room using the provided access token, which Twilio verifies to ensure access rights to that Room.

   connect('$TOKEN', { name:'my-new-room' }).then(room => {
     
     room.on('participantConnected', participant => {
       console.log(`A remote Participant connected: ${participant}`);
     });
   }, error => {
     console.error(`Unable to connect to Room: ${error.message}`);
   });
   

    

4. And finally, assuming that the tokens are valid, the clients become Participants in the Room, allowing them to publish/subscribe to media tracks and listen for events.
   
   

   // Attach the Participant's Media to a <div> element.
   room.on('participantConnected', participant => {
     console.log(`Participant "${participant.identity}" connected`);
   
     participant.tracks.forEach(publication => {
       if (publication.isSubscribed) {
         const track = publication.track;
         document.getElementById('remote-media-div').appendChild(track.attach());
       }
     });
   
     participant.on('trackSubscribed', track => {
       document.getElementById('remote-media-div').appendChild(track.attach());
     });
   });
   

    

   There are additional details you need to consider if you want to handle special situations. For example, ensuring that you can handle events such as reconnections, muting/unmuting and enabling/disabling the camera, screen sharing (in Node.js, iOS, or Android), and changing the view based on the dominant speaker. These situations would be complicated manually, but can be addressed through the Twilio API with ease.

Why choose Twilio Client?

Twilio's cloud infrastructure handles everything you need to establish high-quality calling experiences. From browser abstraction to signaling protocols and registration, everything you need is packaged into one JavaScript file.

Twilio makes it easy for you to connect WebRTC to anything: browser-based users, users on mobile, SIP endpoints, PSTN telephone numbers—you name it, and Twilio can do it. Plus, our APIs make it simple to programmatically. control, conference, or record WebRTC calls.

Our global-media routing makes for real-time end-to-end quality calls, regardless of where your web users are in the world. Twilio analyzes how media is streamed and relayed to improve call quality and to provide global low latency.

Twilio Client takes your WebRTC real-time communications above and beyond. Try out the WebRTC tutorials above to get hands-on experience with our WebRTC solution. To learn more about how businesses are using Twilio to build top-notch WebRTC solutions, check out these case studies:

• RedBeacon & The Home Depot Build the Call Center They Need
• Datalot Optimized Lead Qualification With WebRTC
• SendHub Makes Business Phones Easy with Twilio
• How Zendesk Gave Voice to Customers in 40 Countries and Counting

Jesse Sumrak is a Content Marketing Associate at Twilio focused on writing killer content and producing captivating webinars. A writing zealot by day and an ultramarathon runner by night (and early-early morning), you can usually find Jesse preparing for the apocalypse on a precipitous peak somewhere in the Rocky Mountains. He can be reached at jsumrak [at] twilio.com.