1. WebRTC tutorial series - Introduction

WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose. While WebRTC knows how to communicate with other peers, it doesn’t know how to discover these other peers. Discovery is an inherent problem, this is where we’ll utilise the Ably Realtime Platform.

Ably is a platform provider for developers looking to implement realtime features in their applications. These realtime features make it possible for WebRTC to discover the exact peer we want it to discover.

This WebRTC tutorial series is divided into various chapters. Each chapter teaches you how to implement the various applications of WebRTC, using Ably.

WebRTC support in current browsers

At the time this article was written, WebRTC is supported by Google Chrome, Mozilla Firefox, and Opera, in both their Desktop and Android versions. Microsoft’s Internet Explorer and Apple’s Safari are yet to add support for WebRTC. You can find the latest info about WebRTC browser support on the Can I use website.

Frequent Terminologies

There are a lot of regular words and terminologies that are part of the WebRTC world. It would be nice to get to know these now, so you are comfortable with the rest of the tutorial.

WebRTC

Web Real Time Communications – the umbrella term for this technology and name of the World Wide Web Consortium’s (W3C) working group to standardize the technology in that body

RTCPeerConnection

a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection if it’s no longer needed.

RTCDataChannel

Represents a bi-directional data channel between two peers of a connection

MediaStream

represents a stream of media content. A stream consists of several tracks such as video or audio tracks.

RTCIceCandidate

represents a candidate Internet Connectivity Establishment (ICE) server which may establish an RTCPeerConnection

RTCSessionDescription

describes one end of a connection or potential connection. Each RTCSessionDescription comprises a description type indicating which part of the offer/answer negotiation process it describes.

These few terms defined above enough to get along with this tutorial. There are a lot of regular words and terminologies that are part of the WebRTC world. Should you want to go through a glossary of other terms used in WebRTC, you can visit the docs. You can also read our deep dive What is WebRTC to learn more about the use cases learn and how it compares to the capabilities of WebSockets.

Prerequisites

1. You need have a basic understanding of JavaScript to implement this tutorial.
2. You also need to have an Ably account. If you don’t have one already, you can create one for free

Lessons in this series

1. Data channels the right way using Ably
2. Straightforward Video calls with WebRTC and Ably
3. WebRTC file transfers with Ably
4. Less code, more efficient screen sharing with Ably