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, the WebRTC standard and the APIs built into every major browser are free to use. What costs money is the infrastructure around them, such as signaling servers, TURN relays, and media servers, which this post covers below. WebRTC 1.0 became an official W3C Recommendation in January 2021, with its underlying protocols published as IETF standards – and this open-source project provides the simple APIs needed to get audio and video communications working on your web pages.

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 the core browser APIs, WebRTC tutorials and examples plus how to get started with Twilio Video and the Twilio Voice JavaScript SDK.

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

Every major browser supports WebRTC:

• Google Chrome
• Microsoft Edge
• Apple Safari
• Mozilla Firefox
• Samsung Internet
• Opera

Because support for WebRTC itself is universal, the compatibility question worth asking today is about specific codecs and newer features, which still vary by browser and device. Check the compatibility table on each API's MDN page before you rely on one.

Benefits of using WebRTC

• Open-Source: The WebRTC standard and its browser implementations are 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: Encryption is mandatory in WebRTC, not optional. The WebRTC security architecture requires every audio and video stream to be encrypted with DTLS-SRTP, and data channels run over DTLS, so there is no way to send unencrypted media.
• 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. Google Meet: Google is the mastermind behind WebRTC, so it's no surprise they use it for Google Meet. The WebRTC engine inside Chrome and every other Chromium-based browser comes from the same open-source project.
2. Discord: Discord carries voice and video for millions of concurrent users over WebRTC. Its browser app uses the browser's own WebRTC implementation, and its desktop and mobile apps build on the native WebRTC library. Discord's engineering team explains how it handles millions of concurrent voice users using WebRTC, including why group calls go through its own media servers: peer-to-peer connections become prohibitively expensive as the number of participants grows.
3. AI voice agents: Voice agents that let you talk to a large language model in real time are one of the newest WebRTC applications. OpenAI, for example, recommends WebRTC for connecting a browser to its Realtime API, and Twilio's ConversationRelay connects AI voice agents to phone calls.

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 phone calls with friends, here's a list of even more expansive uses for WebRTC:

• Healthcare: Doctors and clinics use WebRTC for telehealth, so doctors can perform virtual checkups via web browsers without requiring their clients to download 3rd-party apps to engage.
• 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.
• 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).
• Emergency Response: With video, audio, and chat functionality, WebRTC is evolving the way first responders receive information and improving how they respond. 
• 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.

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

The WebRTC browser APIs

The WebRTC browser APIs

WebRTC gives the browser three core APIs. getUserMedia captures audio and video from the user's devices, RTCPeerConnection sends that media to another peer, and RTCDataChannel sends any other data you like over the same connection. This section shows what each one is for, starting with a page you can run in under two minutes.

Capture your camera with getUserMedia

navigator.mediaDevices.getUserMedia() asks the user for permission to use their camera, microphone, or both, and returns a MediaStream you can play in a <video> element. Save the following page as camera.html in any folder:

Browsers only allow getUserMedia on secure origins, which means HTTPS or localhost, so serve the file rather than opening it from disk. From the folder that holds camera.html, run:

python3 -m http.server 8000

Then open http://localhost:8000/camera.html and allow camera access when the browser asks. You should see yourself. The muted attribute stops the preview from playing your own audio back to you, and playsinline keeps Safari on iOS from opening the video full screen.

Connect peers with RTCPeerConnection

RTCPeerConnection is the connection between two peers. Each side adds the tracks it wants to send, then the two exchange a session description, called an offer and an answer, that lists the codecs and media each side supports. They also exchange ICE candidates, the network addresses the browser might be reachable at, so they can find a path to each other.

The WebRTC specification deliberately leaves out how those offers, answers, and candidates travel between the peers. This is called signaling, and you have to provide it yourself, typically with a WebSocket server or an HTTP API. MDN's signaling and video calling guide walks through a complete example.

Signaling is not the only thing the spec leaves to you. Most home and office networks sit behind NAT, so the browser uses a STUN server to discover its public address. When both peers sit behind restrictive NATs or corporate firewalls, media has to be relayed through a TURN server, which is an ongoing bandwidth cost rather than something you stand up once. Twilio's Network Traversal Service gives you globally distributed STUN and TURN, and it works on its own with any WebRTC application. STUN is free and TURN is billed per GB; see the Network Traversal Service section of the Voice pricing page.

Send any data with RTCDataChannel

RTCDataChannel sends arbitrary data, text or binary, directly between peers over an existing RTCPeerConnection. It is what makes chat, file transfer, game state, and live cursors possible without routing every message through your server. You can choose whether a channel guarantees ordered, reliable delivery like TCP, or drops late messages the way real-time media does.

WebRTC tutorials: How to get started with WebRTC

Getting started with WebRTC is simple. To get hands-on with the browser APIs from the section above, work through Google's WebRTC codelab.

Google WebRTC Tutorial: JavaScript APIs

To go deeper into the browser APIs from the section above, Google's built a helpful tutorial that covers the basics for tapping into the WebRTC JavaScript APIs. The codelab's browser code is still a good guide, but its signaling server uses Node.js packages from 2014, so treat that part as an illustration rather than a template:

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 Programmable Video

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.

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 guide. 

To build a working video chat app with JavaScript, follow Build a Serverless Video Chat Application with JavaScript and Twilio Programmable Video. It walks you through displaying your own camera, generating access tokens with Twilio Functions, connecting to a video Room, handling participants as they join and leave, and deploying the finished app. Twilio Video Group Rooms route media through Twilio's servers and handle multiple participants, so the same approach works for a one-to-one call or a team meeting.

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 JavaScript, 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.

If you would like to skip the tutorial and get something running quickly, we have quick deploy reference apps for React, iOS, and Android. None of them need a code change before the first deploy, and the React app deploys to Twilio Serverless in a few minutes with no other infrastructure. Deploying costs nothing, and standard usage charges apply for Twilio Video when you use them for video calls.

How to get started with Twilio Voice JavaScript SDK

If you’re interested in building voice calling with WebRTC, look no further than the Twilio Voice JavaScript SDK. It handles browser abstraction, signaling, and registration for you, so a web page can make and receive calls to phone numbers, SIP endpoints, and other browsers. Install it from npm as @twilio/voice-sdk. It is one of Twilio's Programmable Voice SDKs, alongside SDKs for iOS, Android, and React Native.

The Voice JavaScript SDK 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. The Voice JavaScript SDK provides the security and reliability major enterprises need.

The Voice JavaScript SDK 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 Voice JavaScript SDK 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.

Why choose Twilio?

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 the Twilio Voice and Video SDKs.

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 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, browse Twilio's Voice customer stories.

Conclusion

Congratulations! You've seen what WebRTC is for, used getUserMedia to capture your camera, learned what RTCPeerConnection and RTCDataChannel do, and seen where Twilio Programmable Video and the Voice JavaScript SDK fit in. The camera example is on GitHub at https://github.com/donaltoomey/get-started-webrtc.

From here, you could add screen sharing with getDisplayMedia(), build a video chat app with the serverless JavaScript tutorial, try the quick-deploy apps above for a full-featured video experience, or add phone calling with the Voice JavaScript SDK. I can't wait to see what you build!

Jesse Sumrak is a Senior Content Marketing Manager 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.