Introduction to WebRTC

A short introduction to big technology

Francois J Rossouw
DVT Software Engineering
6 min readApr 30, 2020

--

What is WebRTC

Web Real-Time Communication or as we know it WebRTC is a collection of Web APIs that allow developers to build audio, video, and generic data streaming applications over peer to peer connections within web browsers.

Why WebRTC

1. It is built on an open web standard, thus having abundant support from developers. It is not tied to any specific browser, any web browser vendor can implement the specification.

2. Because WebRTC runs on the web, it makes it easier to write a single application that runs on any device with a modern browser.

3. WebRTC is built primarily on peer to peer connections, it can be used to build decentralized streaming applications. Thus, reducing complexity when building applications that run across multiple devices that make use of audio, video, and camera APIs by providing its own set of universal APIs.

4. Where other competitors are limited to multi-media streams, WebRTC provides more than just audio and video streaming. With WebRTC we can send arbitrary bytes over the wire, leaving the interpretation and processing of these bytes as an implementation detail. This makes WebRTC more flexible in comparison to other multi-media streaming methods.

5. You don’t need external libraries, software, or applications to be able to use WebRTC. In most cases, you will just need a web browser with WebRTC support and you’re ready to go.

Who Supports WebRTC

https://touchstonesoftware.com.au/wp-content/uploads/2019/05/web_browsers_chrome_firefox_safari_edge_opera.png
Google Chrome, Firefox Browser, Safari Browser, Microsoft Edge, Opera Browser

Available API Clients

WebRTC is supported in several programming languages and frameworks. Here’s a list of some of them:

  • JavaScript
  • Java (Android)
  • Node.js Rest
  • Node.js WebSocket
  • Go
  • PHP
  • Python
  • React Native
  • REST
  • Ruby
  • Swift (iOS)

How WebRTC Works

Under the hood WebRTC is just a collection of JavaScript APIs. Before WebRTC, most audio/video streaming applications were implemented using a client-server architecture. Where the browser is the client and it connects to a server of sorts to request data. The server then responds with a data stream.

Client-Server Architecture

A quick view of how WebRTC works

  • WebRTC sends data across browsers
  • It uses NAT traversal mechanisms for browsers to reach one another
  • Sometimes browsers need to connect to a relay server.
  • Separates media and signaling
  • Peer to Peer is the default approach, you can add servers to store and forward media data between peers.
http://webtricksandtreats.com/wp-content/uploads/2017/01/webrtc.png
WebRTC Simple Explanation

Connecting WebRTC using NAT, STUN and TURN

For WebRTC to work we need to be able to identify or locate each other over the wire. This is often referred to as Peer Discovery. This is just a fancy way of saying — how do I find someone to talk or exchange data with? Peer discovery mechanisms are not defined by WebRTC, although the process can be as simple as sharing a URL that peers can use to communicate.

It would be ideal for two machines to be directly addressable using their public IPv4 addresses. This is not possible because of IPv4 address exhaustion and the fact that we also need firewalls to control access over ports and IP addresses on our machines.

NAT (Network Address Translation) is used to give the device a public IP address. Network routers will have public IP addresses where every device connected to it will have private IP addresses. Devices will not need a unique public IP address because their private IP addresses are translated to the router’s public IP with a unique port.

WebRTC uses the Interactive Connectivity Establishment (ICE) techniques to overcome the complexities of real-world networking. For this to happen, your application must pass ICE server URLs to RTCPeerConnections.

ICE will first try to make a connection using the host address obtained from a device’s operating system and network if unsuccessful ICE will obtain an external address using the STUN server, where if that fails traffic is routed via a TURN relay server.

STUN (Session Traversal Utilities for NAT) is a protocol that is used to discover public addresses and it determines any restrictions in your router that would prevent a direct connection with a peer. Clients receive their public addresses as requested from STUN servers. This occurs whether or not the client is accessible behind the router’s NAT. In other words, the application uses a STUN server to discover its public address.

Most WebRTC calls successfully make a connection using STUN servers.

TURN (Traversal Using Relays around NAT) is meant to bypass the Symmetric NAT restriction by opening a connection with a TURN server and relaying all information through that server. A connection is required with a TURN server which will tell all the peers to send packets to the server which will then be forwarded to the requester. There will be some overhead thus it is only used when there are no other alternatives.

TURN is used to relay audio/video/data streaming between peers, not signaling data!

Unlike STUN servers, TURN servers have public addresses, making them easy to be contacted by peers even if the peers are behind firewalls and proxies. This now starts to make it feel more like a client-server architecture, instead of a peer to peer connection.

This diagram shows in full how WebRTC works, where TURN is put into action after STUN failed, each peer resorts to using a TURN server.

In other words: A STUN server is used to get an external network address and a TURN server is used to relay traffic if direct (peer to peer) connection fails.

There will most likely be restrictions on routers on who can connect to what devices within a network. This could be problematic because even if we received a public IP address from the STUN servers, we might not be able to create a connection. This is where TURN servers are used.

The complete WebRTC exchange in one diagram:

https://princiya777.files.wordpress.com/2017/08/screen-shot-2017-08-19-at-23-59-53.png
Complete WebRTC Exchange Diagram

A link to this diagram if you would like to know more.

Who is using WebRTC

If you would like to read more about the applications using WebRTC please follow these links:

The Impact of WebRTC

With so many people working from home due to the COVID-19 pandemic, being connected and real-time communication has never been more important. WebRTC, along with other media streaming protocols has played a big role in keeping us all connected.

Video conferencing, online gaming, online medical care, these are some of the areas in which WebRTC has been used to provide solutions to remote communication.

It has provided a set of open and standardized real-time communication APIs which almost any web browser can use.

Demos and Some Fun

If you would like to try some code yourself, or just view some demos here are a few places to start looking.

Browser Support

Currently, not all browsers support WebRTC although most do. If you would like to find out which browser versions currently support WebRTC follow this link.

--

--