Please be aware that you are viewing our bleeding edge unstable documentation. Unless you wanted to view the bleeding edge (and possibly unstable) documentation, we recommend you use our stable docs.

Go to Ably's stable canonical documentation »

I know what I'm doing, let me see the bleeding edge docs »

You are viewing our bleeding edge unstable documentation. We recommend you use our stable documentation »
Fork me on GitHub

WebRTC 0. A real world guide to WebRTC concepts with Ably

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 Data Stream Network 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.


WebRTC with Ably

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.


WebRTC browser support

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

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

Back to top