WebRTC (Web Real-time Communications) is a communications standard that enables peer-to-peer-based communications that includes data, audio, and video between two parties such as browsers or within an app.
WebRTC was Initially released in 2011 and is supported by Apple, Google, Microsoft, Mozilla, and Opera. It’s supported on both mobile and desktop browsers, allowing you to build communications experiences directly into a browser-based application.
Common use cases include video calling, video chat, and peer-to-peer WebRTC file sharing, with minimal or no plugins needed.
Basically; signals, text, AV, and files. The most common applications for WebRTC include
In-browser / in-app customer support chat (that may or may not include video/audio)
In-browser / in-app patient & doctor video / audio call.
File sharing between two parties or on a website.
From a developer’s perspective, there is a bit more that goes into making a WebRTC application work. It is an integral part of the HTML5 specification (managed by the IETF and W3C) and it’s exposed in the browser using JavaScript.
WebRTC works by connecting two browsers through the RTCPeerConnection.
First, the browsers are connected through signaling, bypassing the Session Description Protocol (SDP). This signaling discovers where the two users are and how to connect. Once the RTCPeerConnection is open, video, audio, and data communication can be sent between the two browsers.
To make it work, you only need two web browsers and a way to transfer an SDP between them. The SDP includes information about your computer, what audio codecs you support, how you can transmit data between computers, and what ports are available on your computer that you can connect to. You can read more about SDPs here.
Think of SDPs like business cards. You exchange them with somebody else, and now you know how to contact each other. Because methods of transferring SDPs are not detailed in the specification, you have to provide your own signaling implementation. This is done by implementing your own way to transfer the SDP data.
Now that we understand what an RTCPeerConnection is, let's look at RTCDataChannel and MediaStream.
The RTCDataChannel is a component of the PeerConnection and supports bi-directional data exchange. It’s built using the SCTP protocol (Stream Control Transmission Protocol) and sends data using an existing peer connection.
You can set one up by creating a `new RTCPeerConnection`
The MediaStream API was designed as a way to easily access the media streams from local cameras and microphones and is protected by permission controls that need to be embedded into the HTML of any page you load. So if you are looking to gain access to the camera and microphone attached to a computer, you have to ask the browser for permission. You can find more details about MediaStream here.
Initially, you need some way to transfer the SDP from browser A to browser B. The PubNub network can be used as a signaling server for these apps. Features, such as Presence and Storage/Playback also can be used to enhance those apps.
When calling another user through a WebRTC protocol or app, the caller needs to know if the callee is currently online or offline and what device they’re using, if they’re available to accept the call, etc.
Presence gives you all that information and enables you to show the users they can connect with. This is essential for signaling, to prevent users from trying to connect to other users that aren’t available.
The WebRTC protocol does not provide storage capabilities, and as a result, there are no records of what messages have been sent. Specifically, with text chat, users expect a history of previous chat conversations. PubNub’s Storage/Playback feature allows users to see a history of past conversations over a desired period of time.
Basically; PubNub provides:
SDP Signaling
Chat message storage
WebSockets are designed as a full-duplex communication protocol between a client and a server, the opposite of Peer To Peer. They work using the TCP Stack and WebSockets are considered reliable and orderable.
You can use a WebSocket service to manage the Signaling and Presence status in the same way that PubNub does but without work, it doesn’t persist data-message storage.
With WebRTC, video and voice communication can be easily implemented into any website. This adds advanced levels of interaction to a website, allowing users to communicate in context and in real time, with either site operators or with each other. Such capabilities are more desirable than current limitations whereby users need to call a number, download a plugin, or leave your website. For example, a financial institution website could easily embed a WebRTC communication app to allow users to quickly speak to a financial representative (rather than forcing them to use their phone to endlessly talk with an automated representative).
Another example of WebRTC with voice and video would be a Skype-like video chat application, that can be used entirely in the web browser. This means that end users don’t have to install any software or plugins, and can easily connect to one another, through video, audio, and text chat, browser to browser. We built WebRTC.co, a JavaScript video chat application that runs entirely on WebRTC and PubNub.
As a video and data service, WebRTC is pretty much here to stay; with buy-in from the major browser players and commitment to keep the mobile and desktop APIs up to date, you will find more and more apps moving to keep consumers on the platform with tools that support video chats for services such as dating, gaming, and healthcare.
For more on WebRTC, take a look at our WebRTC Video Chat Signaling Demo!
There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...
Michael Carroll
How to use geohashing, JavaScript, Google Maps API, and BART API to build a real-time public transit schedule app.
Michael Carroll
How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.
Michael Carroll
