The future of WebRTC

All the latest and greatest in internet technologies eventually become standard practice. The next big thing is clearly WebRTC.

Unless you’ve been living under a rock, no doubt you’ve seen the incredible video chat between Chrome and Firefox in Mozilla’s article, Hello Chrome, it’s Firefox Calling! In that video, they demonstrate the power of WebRTC, which is supported by both Chrome and Firefox. Believe it or not, that entire video chat was accomplished with nothing than some JavaScript. No add-ons, no frameworks, no log-ins, no accounts and absolutely nothing to install. Just write some JS and you’re good to go.

That’s the power of WebRTC.

What is WebRTC and why should we use it?

Already transforming the web thus far in 2013, WebRTC is poised to make even more sweeping changes in tech, as already demonstrated by the ever growing list of companies building products upon the promise of WebRTC. But what is it exactly, and why is it such a
groundbreaking technology?

At the most basic level, the promise of WebRTC is to bridge the gap between platforms. It creates true interoperability between devices of all types so that real­-time data, audio and video sharing become a natural part of using the web. According to WebRTC.org, “Its purpose is to help build a strong real time collaboration platform that works across multiple web browsers, across multiple platforms.”

The benefit? Applications built using the WebRTC native APIs don’t need to be downloaded and installed in order to run; they operate directly in the browser. Moreover, it heralds the establishment of an open, implementable communication technology for the browser, which is something that doesn't yet exist. If the core of internet technology (HTML, HTTP) included WebRTC as well, it would revolutionise the way we communicate online because open source encourages and accelerates advances in technology.

Part of the great potential of WebRTC is that it already has major support from Google, Mozilla and Opera, so communication between Firefox, Chrome and Opera is already possible. There’s no support for IE as of yet, but you can add it by using Chrome Frame in IE.

Additionally, the JavaScript API is currently undergoing standardisation at the W3C, with the Internet Engineering Task Force (IETF) developing the WebRTC protocol. Available for use through a BSD licence, implementing WebRTC comes nearly restriction free, and the technology benefits from integration with the best-­of­-breed in both video and voice engines.

In his talk about the state of WebRTC, Rod Hawkes raises the question of why we should use WebRTC over WebSockets, which can provide real-­time communication as well. The reason, he says, is that the two technologies are actually accomplishing two different things.

Where WebSockets focuses on providing a reliable real­-time connection via JavaScript, WebRTC actually delivers a complete network infrastructure for communication. On top of that, WebSockets needs a server to act as a 'middleman', as Hawkes terms it; but WebRTC is instantaneous, peer­-to­-peer (P2P) communication.

Simply speaking, WebRTC is not just about sharing information, ­­it’s about communicating on a human level.

Potential use cases for WebRTC

So what do we mean by 'communicating on a human level'?

Right now, WebRTC is mostly being implemented to provide high-quality video chat, so it’s going a long way towards improving the experience of web conferencing solutions. However, the use cases can go far beyond that. For example, Sqwiggle empowers remote teams to collaborate more easily and effectively through chat, but also in sharing rich media such as files, videos and social media updates.

With the ability to chat, share screens and share files, WebRTC also opens the door for software and services that provide tech support, online learning and even recruitment activities. Imagine visiting a company’s website, clicking a button and instantly being connected to another human being with whom you can share your desktop, documents and more. On top of that, WebRTC could even be used to communicate between different devices, not just computer­-to-­computer. Think about controlling your computer with your mobile phone using just a local area connection.

There are some even more intriguing uses for WebRTC. For example, peerCDN uses the technology to provide a 'peer-­to-­peer distributed CDN'. Rather than overloading your servers with a sudden spike in traffic, WebRTC allows peerCDN to establish a peer­-to-­peer network through which a site’s static resources could be hosted and delivered by the people already on the site. No more bandwidth overages, and no more crashing your website. This could very well be the future of web hosting.

WebRTC could also revolutionise online gaming. Even if you aren’t addicted to an MMO, consider this: instead of waiting hour upon hour for one of the servers in your region to open up so you can finally play the latest release of World of Warcraft, WebRTC would allow you to sign on instantly and play with anyone, anywhere in the world. Lag times could become a thing of the past, and you’d never be kicked off the server because too many players are logged in. It’s not a reality yet, but it’s only a matter of time before the gaming industry catches on to the potential of WebRTC.

Tutorial: embedding WebRTC video chat into your website without plugins or addons

Like many other early adopters, we at Fresh Tilled Soil have been playing around with WebRTC and other APIs for quite a while now. Video chat with WebRTC has been a particular favourite of ours among new web browser capabilities, and you can find a demo of this functionality on our site.

To show others how they can add WebRTC to their sites, we’ve put together an easy tutorial. Whether you’re a complete novice or a JavaScript guru, you’ll find everything you need to know in the following sections. In addition to copy and paste embed code, we also go into the particulars of exactly what our source code is doing for those curious about the nuts and bolts.

A quick warning before we jump into it: WebRTC technology is very new and continues to change every day. Since code is often updated all the time, what works today may not necessarily be applicable tomorrow. We encourage you to ask questions, troubleshoot problems and keep tabs on the conversation in the WebRTC Discuss forum.

Without further ado, let’s get to it!

Writing your own code for WebRTC

Even if you don’t know much JavaScript, but still want to have control over the video chat functionality, we created a simple jQuery plug-in that allows you to manipulate the HTML without having to worry about the JavaScript portion. Here are the steps you need to make the plug-in work on your site:

Step 1: Create an empty HTML file.

Step 2: Download the plug-in, unzip it and place the it locally within your www directory. You’ll need to reference the CSS and JS files in the HTML file, so make sure you know where they are. Here is how the beginning of our HTML file looks like after we reference the CSS:

<html>
<head>
<meta charset="UTF-8">
<title>Fresh Tilled Soil Video Conference | WebRTC jQuery Plug-in Demo</title>

<!-- Stylesheet Resources -->
<link rel="stylesheet" href="css/fts-webrtc-styles.css">

</head>

Step 3: Now let’s start with the code. First, we’ll establish the overlay of the video box, which puts a small box with your own video in upper left-hand corner of a larger video window of the person you’re speaking with:

<body>

<!-- main container -->
<div id="mainContainer" class="main-container">

	<!-- local video -->
	<video id="localVideo" class="local-video"></video>

	<!-- remote video -->
	<video id="remoteVideo" class="remote-video"></video>

	<!-- video status & room entry bar -->
	<div id="videoStatus" class="video-status"></div>

</div> 

Since we’ll be using a JavaScript plug-in, we need to make sure to include jQuery on our website:

<!--JavaScript Resources--> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script>

Now here’s the magic! This next line of code will run all the precious JavaScript we wrote for our plug-in to make video chat work:

<script src="js/jquery.fresh-tilled-soil-webrtc.js">
</script>

Last, but not least, all we need to do is initialise the plug-in to run video chat on the page:

<script type="text/javascript"> $(function() { $('#mainContainer').createVideoChat(); 
}); </script> </body> </html>
</script>

That’s all the HTML you need to make this work! Click here to see how the finished product looks.

For the JavaScript geeks

Here’s a step-by-step description of what the JavaScript is doing behind the scenes. The source code is heavily commented as well, so feel free to follow along.

Step 1: Both Browser 1 and 2 access the computer's microphone and video input streams.
Performed by: Browser 1 and 2

Step 2: Browser 1 creates and sends a call offer (create a peer connection, set local description and create offer SDP).
Performed by: Browser 1

Step 3: Receive the call offer (create a peer connection, set remote and local description, and create answer SDP).
Performed by: Browser 2

Step 4: Create and send a call answer (SDP).
Performed by: Browser 2

Step 5: Receive call answer (SDP).
Performed by: Browser 1

Step 6: Call startIce() method of peer connection and send generated ICE candidate (contains details such as IP address and ports for communication).
Performed by: Browser 1

Step 7: Receive and process ICE candidate from Browser 1 and send generated ICE candidate.
Performed by: Browser 2

Step 8: Receive ICE candidate from Browser 2 (real-­time transport is established between ports).
Performed by: Browser 1

Step 9: Receive and display remote video stream.
Performed by: Browser 1 and 2

Using a simple embed code for a video chat widget

For those folks who don’t want the bother of writing any code, you’ll find a simple version of a HTML embed widget below to make video chat work on your website or blog with just a few keystrokes.

Copy and paste the following HTML code into your website:

<!--Begin Fresh Tilled Soil Video Chat Embed Code-->
<div id="freshtilledsoil_embed_widget" class="video-chat-widget"></div>
<script id="fts" 
src="http://freshtilledsoil.com/embed/webrtc-v5.js?r=FTS0316-CZ6NqG97"></script>
<!--End Fresh Tilled Soil Video Chat Embed Code-->

You’ll see the following widget show up on your site:

Type in a name for your chat room (anything will do) and click the Start Chat button.

Send the page URL and the name of the chat room to whoever you’d like to invite to video chat. As long as you're both using the latest version of Chrome or Firefox, you’ll be chatting via online video within moments.

That’s it! There’s nothing else to it. With just the use of a short piece of code, you’ve enabled your site for easy-­to-­use video communications.

Conclusion

In case you couldn’t tell already, we think WebRTC is truly an exciting technology. With the support of Google and Mozilla behind it, WebRTC has the potential to do amazing things.

As we mentioned earlier, the technology is constantly evolving. Even as it grows and evolves, what we discuss here today may not apply to future builds. Due to browser, codec, interop updates, and various network issues, this technology is not 100 per cent ready to go. However, it’s fast approaching that point.

In the last few months, we’ve seen some big improvements. The good news is that the brightest minds in tech are working on integrating WebRTC into the basic functionality of the web, so even more amazing capabilities are emerging.

Please ask your questions and leave us your comments below, and check out the WebRTC Discuss forum where you’ll find even more information.

Dmitry Dragilev is a tech evangelist at Fresh Tilled Soil, a team of designers, coders and UX experts that helps entrepreneurs and businesses create bloody brilliant user experiences for web and mobile applications through consulting, training, and events.

Paul Greenlea is a senior front-end developer and strategist at Fresh Tilled Soil. Over the years he's led teams through strategy, concept, and execution phases in positions ranging from UI designer to lead engineer.