The HTML5 WebRTC API

Ramón Saquete

Written by Ramón Saquete

Desktop sharing, multi-conferencing, secure and instant file sending to friends, Webinar applications, sharing videos or audio recordings captured directly from your phone, eye tracking to perform a test of usabilityThe new system allows you to play online multiplayer video games in real time and even controlled with hand movements, log in through face recognition, capture a photo of yourself and apply effects to it to put it in the avatar of a comment, watch video and chat with people who are visiting the Web, are just some of the web applications that come to mind when I think of WebRTC.

Brendan Eich, the creator of JavaScript (the language with which the WebRTC API is used), has this to say about this technology:

WebRTC is a new front in the long war for an open and unencumbered web.

webRTC API
This technology responds to the need of websites such as Facebook or Google Hangouts, to allow their users to communicate in real time, without having to install their respective plugins (Skype for Facebook or Google Talk for Google Hangouts). But WebRTC applications go much further, and this technology opens up a wide range of possibilities, especially on tablets and cell phones, where, unlike a PC, we will always have a camera and microphone.

At this point, I guess I’ve already captured your interest in learning more about this technology, so now I’m going to get a little more technical, but keep reading, because what follows is equally interesting.

The three WebRTC APIs

WebRTC (Web Real-Time Communications) is a JavaScript API, which is subdivided into three different APIs. In general terms, it allows real-time communication for the transmission of video, voice or any other type of data via P2P (Peer to Peer). Let’s see what the APIs into which it is subdivided consist of and some examples of each one separately.

 

MediaStream or getUserMedia

It allows to obtain audio, video or combinations of both streams from the device. This API also allows us to capture the screen to share our desktop.

Once we get the information from the user’s camera, screen or microphone, we can apply effects to it in the client, send it to our server to store it for any kind of social application or we can use the following APIs to send the information in real time to another user or even multiple users.

Examples:

 

RTCPeerConnection

This API is in charge of streaming video or audio, with all that this entails: signal processing, communication, codec execution, bandwidth management, security, etc. These are quite complex tasks and this API allows to implement them, without the programmer having to worry about anything.

 

RTCDataChannel

Depending on the type of application, we may need to stream data other than video or audio.

RTCDataChannel, performs bidirectional communication of any type of data between peers, using the same API as WebSockets (the API used for bidirectional communication between client and server). It allows data flow to be reliable and communication to be slower (TCP), or unreliable and communication to be faster (UDP).

Example:

 

P2P (Peer to Peer)

In communication P2P or peer-to-peer communicationeach node is both a client and a server, allowing users to communicate faster with each otherThe communication is done directly between each pair of client and server on each side, without passing through a central server, being this the main feature provided by the WebRTC technology.

For P2P communication, we need both computers to be able to communicate. If a firewall on the computers involved prevents it, all communication will go through a TURN server and therefore the P2P will not be direct, although this only happens in 14% of cases. You can also use a STUN server to obtain the public IP at startup, to try to solve communication problems due to the use of NAT. In cases where we want to retransmit to many users, we will have no choice but to use an intermediate server MCU (Multipoint Control Unit), since the equipment serving the video may not have the necessary transfer speed to send it to all its clients.

 

Current status

WebRTC now has a stable version for Chrome for desktop, Chrome for Android, Firefox and Opera. Internet Explorer as always, is at the tail end of technology, so we probably won’t see WebRTC in this browser for a few years, but that’s not important, as the market share of this on mobiles and tablets is negligible, and this is where WebRTC is most interesting.
This technology is going to be key to what I have already mentioned on other occasions, that JavaScript and HTML5 will become the most used development languages for mobile applications.

  •  | 
  • Published on
Ramón Saquete
Ramón Saquete
Web developer and technical SEO consultant at Human Level. Graduated in Computer Engineering and Technical Engineering in Computer Systems. He is also a Technician in Computer Applications Development and later obtained the Pedagogical Aptitude Certification. Expert in WPO and indexability.

What do you think? Leave a comment

Just in case, your email will not be shown ;)

en